Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Animation property in css3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 167
    Comment on it

    Hello readers, this is a smalll blog on animation-timing-function property. This property defines the speed of the animation. The animation-timing-function property, is used to define a function that defines how a transition will change during each cycle. These timing functions are also called easing functions. Easing functions have some predefined values. The possible values are:

     

        ease-out - It defines an animation with a slow end
        ease - This is default value. It defines an animation with a slow start, then fast, then end slowly.
        ease-in - It defines defines an animation with a slow start
        linear - It defines an animation having same speed from start to end
        ease-in-out - It defines an animation with a slow start and end
        cubic-bezier(n,n,n,n) - is used to define our own values in a cubic-bezier function

     

    In this example I have create five circles of same width and height but different colour, I have applied different values of animation-timing-function property to each circle to show you the effect of different value and the difference between them.

     

    html code  is written below

     

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css"  href="style.css">
    </head>
    <body>
    <div id="box1">LINEAR</div>
    <div id="box2">EASE</div>
    <div id="box3">EASE-IN</div>
    <div id="box4">EASE-OUT</div>
    <div id="box5">EASE-OUT-IN</div>
    
    </body>
    </html>
    
    

     

     

    css is written below

    div {
        width: 100px;
        height: 100px;
       
        font-weight: bold;
        position: relative;
        -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
        animation: mymove 5s infinite;
        padding:20px;
        text-align:center;
        border:1px solid black;
        border-radius:80px;
    }
    
    /* Chrome, Safari, Opera */
    #box1 {-webkit-animation-timing-function: linear;}
    #box2 {-webkit-animation-timing-function: ease;}
    #box3 {-webkit-animation-timing-function: ease-in;}
    #box4 {-webkit-animation-timing-function: ease-out;}
    #box5 {-webkit-animation-timing-function: ease-in-out;}
    
    
    /* Standard syntax */
    #box1 {animation-timing-function: linear; background-color: yellow;}
    #box2 {animation-timing-function: ease; background-color: green;}
    #box3 {animation-timing-function: ease-in; background-color: red;}
    #box4 {animation-timing-function: ease-out;background-color: pink ;}
    #box5 {animation-timing-function: ease-in-out; background-color: blue;}
    
    
    
    /* Chrome, Safari, Opera */
    @-webkit-keyframes mymove {
        from {left: 0px;}
        to {left: 300px;}
    }
    
    /* Standard syntax */
    @keyframes mymove {
        from {left: 0px;}
        to {left: 300px;}
    }

     

     

    Note:  The animation-timing-funtion property is supported by latest version of all the browsers and not supproted in Internet Explorer 9 and earlier versions.

 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: