Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create keyframe animations using css3?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 451
    Comment on it

    In this blog, we will learn how easy to create rotating and translating images by using css3 keyframes, here we will create spinning wind turbine and a blue sky with clouds floating in the background.

    In this example I have taken images of clouds fan and image of stand and place them on different position according to the requirement, the position of fan and blade is absolute. Here I have used vendor prefixes on various properties, it is used for compatibility with older browsers

     

    Html code is:

    <!DOCTYPE HTML>
    <html>
    
    
    <head>
    
    <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
    
    <div id="scenery">
    
    <img class="clouds small" src="images/cloud_sml.png" width="80" height="36"/>
    <img class="clouds medium" src="images/cloud_med.png" width="110" height="52"/>
    <img class="clouds large" src="images/cloud_lrg.png" width="10" height="67"/>
    
    
    <img class="fan" src="images/blades.png" width="120" height="120"/>
    <img class="stand" src="images/stand.png" width="12" height="130"/>
    
    </div>
    </body>
    
    
    </html>

     

     

    CSS code is:

    #scenery {
      
       position: absolute;
       top: 200px;
       left: 40%;
       width: 400px;
       height: 300px;
       overflow: hidden;
       
     
       background: #0099ff;
       /* Firefox */
       background: -moz-linear-gradient(top, #0099ff, #00ccff);
       /* WebKit - Chrome and Safari */
       background: -webkit-linear-gradient(top, #0099ff, #00ccff);
       /* Internet Explorer 10 */
       background: -ms-linear-gradient(top, #0099ff, #00ccff);
       /* Opera */
       background: -o-linear-gradient(top, #0099ff, #00ccff);
       /* general syntax */
       background: linear-gradient(top, #0099ff, #00ccff);
    }
    
    
    .stand {
       /* image is 12 x 130 px */
       position: absolute;
       bottom: 0;
       left: 250px;
    }
    
    
    .fan {
       /* image is 120 x 120 px */
       position: absolute;
       top: 116px;
       left: 196px;
       /* Animation properties to be added here */
       
    }
    
    
    .large {
       /* image is 130 x 67 px */
       top: 40px;
       left: -140px;
    }
    
    
    .medium {
       /* image is 100 x 52 px */
       top: 80px;
       left: -110px;
    }
    
    
    .small {
       /* image is 70 x 36 px */
       top: 10px;
       left: -80px;
    }
    
    
    
    @keyframes fanSpin {
       from { transform: rotate(0deg); }
       to { transform: rotate(1440deg); }
    }
    
    
    /* Firefox */
    @-moz-keyframes fanSpin {
       from { -moz-transform: rotate(0deg); }
       to { -moz-transform: rotate(1440deg); }
    }
    
    /* WebKit - Chrome and Safari */
    @-webkit-keyframes fanSpin {
       from { -webkit-transform: rotate(0deg); }
       to { -webkit-transform: rotate(1440deg); }
    }
    
    /* Opera */
    @-o-keyframes fanSpin {
       from { -o-transform: rotate(0deg); }
       to { -o-transform: rotate(1440deg); }
    }
    
    
    .fan{
      /* Firefox */
       -moz-animation: fanSpin 10s ease-in-out infinite;
       /* WebKit - Chrome and Safari */
       -webkit-animation:fanSpin 10s ease-in-out infinite;
       /* Opera */
       -o-animation: fanSpin 10s ease-in-out infinite;
       /* general syntax */
       animation: fanSpin 10s ease-in-out infinite;
    }
    
    
    
    @keyframes cloudsDrift {
       from { transform: translateX(0px); }
       to { transform: translateX(540px); }
    }
    
    
    /* Firefox */
    @-moz-keyframes cloudsDrift {
       from { -moz-transform: translateX(0px); }
       to { -moz-transform: translateX(540px); }
    }
    /* WebKit - Chrome and Safari */
    @-webkit-keyframes cloudsDrift {
       from { -webkit-transform: translateX(0px); }
       to { -webkit-transform: translateX(540px); }
    }
    /* Opera */
    @-o-keyframes cloudsDrift {
       from { -o-transform: translateX(0px); }
       to { -o-transform: translateX(540px); }
    }
    
    .clouds{
    
        /* Firefox */
       -moz-animation: cloudsDrift linear infinite;
       /* WebKit - Chrome and Safari */
       -webkit-animation: cloudsDrift linear infinite;
       /* Opera */
       -o-animation: cloudsDrift linear infinite;
       /* general syntax */
       animation: cloudsDrift linear infinite;
    }
    
    
    .large{
    
    /* Firefox */
       -moz-animation-duration: 40s;
       /* WebKit - Chrome and Safari */
       -webkit-animation-duration: 40s;
       /* Opera */
       -o-animation-duration: 40s;
       /* general syntax */
       animation-duration: 40s;
    
    }
    
    
    .medium{
    
        /* Firefox */
       -moz-animation-duration: 30s;
       /* WebKit - Chrome and Safari */
       -webkit-animation-duration: 30s;
       /* Opera */
       -o-animation-duration: 30s;
       /* general syntax */
       animation-duration: 30s;
    }
    
    
    .small{
    
     /* Firefox */
       -moz-animation-duration: 20s;
       /* WebKit - Chrome and Safari */
       -webkit-animation-duration: 20s;
       /* Opera */
       -o-animation-duration: 20s;
       /* general syntax */
       animation-duration: 20s;
    
    }

     

    Note:  This will work with the recent versions of all major browsers like  Firefox, Chrome, Opera, Safari and IE

 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: