How to create a CSS animation [closed] - css

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
So I want this div to go from margin-left:900px to 550px in a smooth animation where it starts fast and goes slower and slower in a smooth kind of way. This should happen on page load.
I tried with javascript, but couldn't figure it out...
I know you can do something like this with CSS3, but how? Could anyone give me a code example? Tried Googling but couldn't find the answer...
Lets say I have a div with an id:
<div id='slide'>
and the CSS:
#slide {
width: 200px;
height 200px;
margin-left: 900px;
background-color: #435;
}
How do I animate this?

Answer 1

If you want to do it using a CSS animation on load without javascript interaction, you need to use a keyframe animation
#slide {
width: 200px;
height 200px;
margin-left: 900px;
background-color: #435;
-webkit-animation: slide 1s ease-out forwards;
animation: slide 1s ease-out forwards;
}
#keyframes slide {
100% {
margin-left:500px;
}
}
#-webkit-keyframes slide {
100% {
margin-left:500px;
}
}
Demo
forwards makes it stay in the 100% keyframe state, slide is the animation name, ease-out makes it slow down as the animation goes on (see here for a full list and here or here to generate your own), and 1s is the animation duration, in this case it is 1 second.
Other notes:
At this point in time the the animations have to be browser prefixed
in most cases
If you wished, you could include a 0% keyframe with the default
margin-left:900px, but it is not necessary in this case because it
is declared in the #slide CSS
You can use as many keyframes as you would like ranging from 0% to 100%
including decimal formats, e.g. 50.001% { ...
Another form you can write it in is using from { ... and to { ...
where from = 0% and to = 100%

Answer 2

Use the transition property. E.G.
transition: margin-left 1s ease-out
ease-out will give the effect you want. (Starts fast and gets slower)
Example:
http://jsfiddle.net/pM6cx/3/
Just change the marginLeft property in your onLoad function similar to the fiddle if you want to achieve this effect on window load.
Keyframes aren't needed for such a task.

Answer 3

To change the speed of a CSS animation, you could use the animation-timing-function :)
the trick is finding the right function.
e.g:
animation-timing-function:cubic-bezier(0,.72,.51,1);
You can use
http://cubic-bezier.com/#0,.72,.51,1
http://jsfiddle.net/SpacePineapple/54hvZ/

Answer 4

Here is an example for you using CSS3 keyframes:
#box{
position:relative;
top: 100px;
left:100px;
width:100px;
height:100px;
background-color: red;
-webkit-animation: move 5s ease-in-out;
}
#-webkit-keyframes move{
0% {top: 100px; left: 100px;}
100% {top: 100px; left: 500px;}
}
FIDDLE
EDIT
By adding the forwards property after ease-in-out:
-webkit-animation: move 5s ease-in-out forwards;
Updated FIDDLE
This means the animation will apply the property values for the time the animation ended

Answer 5

You could use css transition:
#slide:hover{transition:all 0.2s ease;width:400px;}
Knee's JSFiddle