Need help with understanding CSS3 animations - css

Question

I am trying to learn animations in CSS3 but Im stuck with all the documentation out there. I have this code:
h1{
-webkit-animation: moveDown 1.s ease-in-out .6s backwards;
-moz-animation: moveDown 1s ease-in-out 0.6s backwards;
-o-animation: moveDown 1s ease-in-out 0.6s backwards;
-ms-animation: moveDown 1s ease-in-out 0.6s backwards;
animation: moveDown 1s ease-in-out 0.6s backwards;
}
#-webkit-keyframes moveDown{
0% {
-webkit-transform: translateY(-300px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#-moz-keyframes moveDown{
0% {
-moz-transform: translateY(-40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
#-o-keyframes moveDown{
0% {
-o-transform: translateY(-40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
I understand that webkit-animation - animation is the call for each browser.
I dont understand the modeDown. Is that like a variable?
1s is the length of the animations?
ease-in-out I dont understand
.6s is the delay
I dont get the backwards nor am able to find any info on it
Is this for the timing sequence?
#-moz-keyframes moveDown{
0% {
-moz-transform: translateY(-40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
Ive read this, this and this. Does someone mind explaining this better to me?
}

Answer 1

I dont understand the modeDown. Is that like a variable?
The animation moveDown starts at opacity:0 and -moz-transform:translateY(-40px) and finishes at opacity: 1 and -moz-transform: translateY(0px). This means that it starts completely transparent and shifted 40 pixels above where it normally is and ends at its regular positioning and fully opaque.
#-moz-keyframes moveDown{
0% {
-moz-transform: translateY(-40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
1s is the length of the animations?
Yes.
ease-in-out I dont understand
ease-in-out is an animation-timing-function, this specifies how to transition from 0% to 100% (or the other way). Ease in out will each in and each out of the animation so the change won't be so abrupt, another example is linear which will change in a completely uniform fashion.
There is a handy chart on this page that explains the difference better than words.
.6s is the delay
Yes.
I dont get the backwards nor am able to find any info on it
backwards and forwards are used for animation-fill-mode which says switch direction the animation should go. If forwards is chosen then the animation will run from 0% (transparent) to 100% (opaque), if backwards is chosen then the animation will run from 100% to 0%.
Further reading
The Art of the Web - timing functions
CSS3 animations spec
Mozilla developer - animation

Answer 2

It's often better to read the actual working drafts (or recommendations) from the W3C, since they provide complete information:
I dont understand the modeDown. Is that like a variable?
You could say so, however variables are usually mutable, while moveDown is simply an identifier for an animation. So it's simply the animation's name:
Keyframes are specified using a specialized CSS at-rule. A #keyframes rule consists of the keyword "#keyframes", followed by an identifier giving a name for the animation (which will be referenced using ‘animation-name’), followed by a set of style rules (delimited by curly braces). [source]
1s is the length of the animations?
ease-in-out I dont understand
.6s is the delay
The animation property is a shorthand for several animation-* properties at once:
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
As you can see the first property is the animation's name (see above), the second the actual length, the third one is the timing-function, in your case ease-in-out. This is basically a bezier-curve which modifies the timing. For example you want to speed up the animation at the beginning and the end, and have a more linear behaviour in the middle.
.6s is indeed the delay between the animations.
I dont get the backwards nor am able to find any info on it
Have a look at animation-fill-mode:
If the value for ‘animation-fill-mode’ is ‘backwards’, then the animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by ‘animation-delay’. These are either the values of the ‘from’ keyframe (when ‘animation-direction’ is ‘normal’ or ‘alternate’) or those of the ‘to’ keyframe (when ‘animation-direction’ is ‘reverse’ or ‘alternate-reverse’).