Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • What are Animations in CSS3?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 137
    Comment on it
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    @keyframes anim
    {
    from {background:#fff;}
    to {background:#00ff;}
    }
    @-webkit-keyframes anim /*Safari and Chrome*/
    {
    from {background:#000;}
    to {background:#090909;}
    }
    div
    {
    width:200px;
    height:200px;
    background:#333;
    position:relative;
    animation:anim 10s ;
    -webkit-animation:anim 5s; /*Safari and Chrome*/
    }    
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    

    An animation is an effect that lets an element gradually change from one style to another.
    You can change as many styles you want, as many times you want.

    Syntax: @keyframes animationname {keyframes-selector {css-styles;}}
    animationname required defines the name of the animation.
    keyframes-selector required percentage of the animation duration.
    Legal values is 0-100%.
    from (same as 0%)
    to (same as 100%)
    css-styles required one or more legal CSS style properties.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: