how to stop CSS animation without javascript
Tags: javascript,animation,css3,transition
Problem :
This is the jsFiddle. What I would like is stop the box when it reaches its end position. I know there is a transition function available also but that does not seem to work. Are all animation functions type also available for transition? I am using rotate function in my actual work.
Solution :
Just set animation-iteration-count to 1. A value of infinite causes the animation to be repeated infinitely. And remember to style the object the way it should be AFTER the animation (top: 200px;).
I've updated the fiddle: http://jsfiddle.net/nTG42/2/
More information is provide by the MDN: https://developer.mozilla.org/en/css/css_animations
CSS Howto..
To me resetting seems wasteful. There must be a clean way to apply the /* lots of style attributes */ to the h1 tags you want it applied to while...
<div class="main_block"> <div class="inner_block"> <a href="page2.html"><h1>Pro</h1></a> <img src=Grafik/talt.png> </div> <div class="inner_block"> <a href="page2.html"><h1>Basic</h1></a> <img src=Grafik/talt.png > </div>...
If they're next to each other (as you've shown them), then you can use the adjacent (+) selector: .one:hover+.two { ... } If they're a bit further away, but still...
I thought this was addressed in .NET 3.5, but I can't find any references. Anyways, here is a hand-rolled server control that allows you to specify colgroup... public class ColGroupGridView...
According to the comments/request, here is the edited version of the original CSS code to reflect the desired result: /* apply to both */ .menu ul { padding-left: 0px; }...
I added the references inside the _Layout view, inside the <environment> tags: <environment names="Development"> <link rel="stylesheet" href="~/css/MyCss.css" /> </environment> If anyone knows a better way I would welcome it...
Your problem is that the outer div is sizing automatically by the inner content, which is sizing automatically by its content. You have couple of options: Use the background solution...
look at your application.html.erb. You should have something like: <% flash.each do |key, value| %> <div class="flash <%= key %>"><%= value %></div> <% end %> If so, the class will...
You're right that adding the px to the variable is causing problems. I actually tried the interpolation syntax and it didn't help, but you should be specifying units anyways in...
Try a demo here http://jsfiddle.net/XfPAG/4/. The idea is using absolute position: HTML <div id="wrap"> <div id="header"> ... 25 px high space fixed to the top </div> <div id="body"> ... stretches...
Because your width is unknown (100%), you are going to want to set the height using padding percentage, because percentage padding is calculated from the width. .circle { background: #515151;...
If you look at the docs explaining the Foundation grid they already use the box-sizing: border-box star hack Since the .row containing your block-gridhas a set max-width of 100% it's...
You can do this if all the rectangle share a common parent. #parent .rectangle { opacity: 0.2; } #parent:hover .rectangle { opacity: 0.5; } #parent:hover .rectangle:hover { opacity: 1; }...
You could place the item inside a ul inside the li instead of using a div like <ul> <li> <ul><li></li></ul> </li> </ul> then position:absolute; the embedded <ul> and push it...
The reason your button is not blue is because you are not declaring a webkit gradient. I had a look at your stylesheet. Add the correct prefix for various browsers...
Yes Andrus, it's exactly the same IE9 bug which reference I posted you today: this bug report. The bug was fixed in the main grid in jqGrid 4.0, but you...
The height of an inline element is set strictly by its contents. Add display: inline-block; to the anchor so it will respect your height: 20px;
Your code needs a bit of restructuring. Wrap all the divs from #greenSmall to #green in a new .content div. Remove the css property float:left from #green Move the .slides...
you can use ng-style to change color like myStyle can be your expression <div class="left-panel" ng-style="myStyle"></div> or <div class="left-panel" ng-style="{color:'green'}"></div> ...
Border doesn't support percentage... but it's still possible... As others have pointed to CSS specification, percentages aren't supported on borders: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' Value: <border-width> | inherit Initial: medium...
Problem is in your CSS. You have added space between "li" and class "selected". It should be "#nav ul li.selected". And at the same time add your code inside $(document).ready()...
With a little change to HTML and You can simplify your code in one function for Accept and Reject. See below, Note: Added content class to all container elements with...
Close all the link tags with </a>. For example change <td><h6><a href="/mobile">Mobile</h6></td> to <td><h6><a href="/mobile">Mobile</a></h6></td> and the rest of all links...
The above Donut chart can be done using Html 5 canvas. Sample: https://jsfiddle.net/wm6szms3/ Html code: <canvas id="canvas" width=325 height=325></canvas> JavaScript code: var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var colors=['skyblue','gray','orange']; var values=[47,6,47]; var...
background-size sprite * px css div{ width:75px;height:45px; background:url(http://i.stack.imgur.com/8yNbR.png) no-repeat 0px 0px; background-size:75px 135px; text-align:center; line-height:45px; } div:hover{ background-position:0px -45px; } Demo http://jsfiddle.net/katPx/ percent css div{ width:75px;height:45px;...
You now got: var type = $(this).attr('data-type'); Since the function is called on the <select>, you select the data-type attribute of the <select> (which is defined), and not from the...
it doesn't :( i happen to stumble across this post while searching for the EXACT same problem. -ms-transform: rotate(-90deg) butchers the output into something unrecognizable. i think it's the right...
Did you consider using inline editing instead of the classic version which is using iframes? The advantage of the inline version is that if, for example, your CSS heavily relies...
CSS .slider-pager{ margin: 0 auto; } Like this? - Fiddle...
I would get rid of the spans and give the first second and third divs a class of "content" and then in your css put: .content { float: left; }.