Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Need help with understanding CSS3 animations

Need help with understanding CSS3 animations

Problem

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

Problem courtesy of: DᴀʀᴛʜVᴀᴅᴇʀ

Solution

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
Solution courtesy of: Daniel Imms

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Need help with understanding CSS3 animations

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×