CODEWITHSUNDEEP
csscss-animations
GʀᴜᴍᴘʏCᴀᴛ
GʀᴜᴍᴘʏCᴀᴛ

Reputation: 8918

Need help with understanding CSS3 animations

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;
        }
    }

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? }

Upvotes: 0

Views: 504

Answers (2)

Zeta
Zeta

Reputation: 105886

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’).

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50149

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

Upvotes: 3

Related Questions