CSS keyframes animation with clouds example

Last Updated : |  

You want to animate clouds or something else only with CSS keyframes, then use animation and keyframes so you can either absolute positioned elements with left top right and bottom move in the keyframes or even with transform translate, that's up to you.

Most comparisons on the Internet are based on CSS animations against jQuery, as it is so prevalent (as if "JavaScript" and "jQuery" were synonymous), but jQuery is widely known to be quite slow in terms of animation performance. The newer  GSAP is also JavaScript-based, but it's literally up to 20x faster than jQuery. Part of the reason why JavaScript animations have a bad reputation is what is called the "jQuery factor".

CSS keyframes animation of the clouds

In our example, we animate clouds from left to right and from right to left, like in a loop that keeps coming back. And all this only with CSS, below you will find the code for it. We do nothing here but place the elements outside the visible area. We do this, e.g. With

// CSS CODE
     0  position: absolute;   1  top: 100px;   2  /* Or right */  3  left:-250px; 

    We bring you there with negative numbers. Do I have an element, e.g. 150px width then I use left -250px, so then the element is no longer watching. Now you can either go from a broad, or calculate this with JavaScript and set exactly. If you know your box never gets bigger than 600px then you can set a maximum width

    // CSS CODE
       0  max-width: 600px; 

      To secure that as well and if you move your element from 0px to 850px it will look like a loop because nothing in the visible area suddenly changes position.

      // CSS CODE
         0  /* Or translate() */  1  translate3d(0px,0px,0px); 

        Pay attention to the info above :). You could use JavaScript to compute items and position them as you would like to move, start, stop, move to specific directions and also change direction with interactions. We do this with keyframes

        // CSS CODE
           0  @keyframes cloud1 {   1       from{transform: translate3d(0px,0px,0px)}   2       /* If you just right, the number with a minus in front -850px */  3       to{transform: translate3d(850px,0px,0px)}   4   } 

          And then put our animation on the desired cloud

          // CSS CODE
             0  animation: cloud1 50s infinite linear; 

            TIP

            You can use hover like other pseudo elements to fire CSS events.



            But did you know

            That you can do that with JavaScript? If you specify a transformation with a 3D property (such as translate3d () or matrix3d ​​()), the browser will create a GPU layer for that element. So the GPU speed boost is not just for CSS animations - JavaScript animations can also benefit!



            HTML and CSS of clouds animation

            The CSS for this example can be found here, it can be extended or shortened or transferred to SASS or LESS.


            // CSS CODE
               0  /*   1   *  Created on : 02.05.2018, 15:44:15  2   *  @copyright : Samet Tarim  3   *  @author    : Samet Tarim aka prod3v3loper  4   */  5    6  .mb-cloud {   7    8      position: relative; // Here to relative to fix elements with absolute inside  9      overflow: hidden;   10      width: 100%;   11      height: 30em;  12      max-height: 30em;  13      background: linear-gradient(#87CEEB,#E0FFFF);   14  }   15    16  .cloud1,   17  .cloud2,   18  .cloud3,   19  .cloud4,   20  .cloud5,   21  .cloud6 {   22    23      position: absolute;   24    25      -webkit-border-radius: 200px;     26      -moz-border-radius: 200px;     27      border-radius: 200px;  28  }   29    30  .cloud1, .cloud4 {     31    32      width: 200px;     33      height: 60px;     34      background: #00c9ee;   35  }     36    37  .cloud1 {   38    39      top: 80px;   40      left:-230px;   41      animation: cloud1 50s infinite linear;   42  }   43    44  @keyframes cloud1 {   45      from{transform: translate3d(-130px,0,0)}   46      to{transform: translate3d(1900px,0,0)}   47  }   48    49  .cloud2 {   50    51      top: 200px;   52      left:-230px;   53      animation: cloud2 20s infinite linear;   54  }   55    56  @keyframes cloud2 {   57      from{transform: translate3d(-90px,0,0)}   58      to{transform: translate3d(1900px,0,0)}   59  }   60    61  .cloud3 {   62    63      top: 300px;   64      right:-230px;   65      animation: cloud3 60s infinite linear;   66  }   67    68  @keyframes cloud3 {   69      from{transform: translate3d(210px,0,0)}   70      to{transform: translate3d(-1900px,0,0)}   71  }   72    73  .cloud4 {   74    75      top: 400px;   76      left:-230px;   77      animation: cloud4 80s infinite linear;   78  }   79    80  @keyframes cloud4 {   81      from{transform: translate3d(-80px,0,0)}   82      to{transform: translate3d(1900px,0,0)}   83  }   84    85  .cloud5 {   86    87      top: 300px;   88      left:-230px;   89      animation: cloud5 100s infinite linear 1s;   90  }   91    92  @keyframes cloud5 {   93      from{transform: translate3d(-80px,0,0)}   94      to{transform: translate3d(1900px,0,0)}   95  }   96    97  .cloud6 {   98    99      top: 150px;   100      right:-230px;   101      animation: cloud6 40s infinite linear 1s;   102  }   103    104  @keyframes cloud6 {   105      from{transform: translate3d(300px,0,0)}   106      to{transform: translate3d(-1900px,0,0)}   107  }      108    109  .cloud1:after, .cloud4:after {     110    111      content: '';     112      position: absolute;     113      top:-40px;     114      left: 20px;     115      width: 80px;     116      height: 80px;      117      background: #00c9ee;   118      -webkit-border-radius: 200px;     119      -moz-border-radius: 200px;     120      border-radius: 200px;  121  }     122    123  .cloud1:before, .cloud4:before {     124    125      content: '';     126      position: absolute;     127      top:-60px;     128      right: 30px;     129      width: 100px;     130      height: 100px;     131      background: #00c9ee;    132      -webkit-border-radius: 200px;     133      -moz-border-radius: 200px;     134      border-radius: 200px;  135  }     136    137  .cloud2, .cloud5 {     138    139      width: 100px;     140      height: 30px;    141      background: #00c9ee;     142  }     143    144  .cloud2:after, .cloud5:after {     145    146      content: '';     147      position: absolute;     148      width: 40px;     149      height: 40px;     150      top:-20px;     151      left: 10px;     152      background: #00c9ee;     153      -webkit-border-radius: 200px;     154      -moz-border-radius: 200px;     155      border-radius: 200px;  156  }     157    158  .cloud2:before, .cloud5:before {     159    160      content: '';   161      position: absolute;     162      top:-30px;     163      right: 15px;     164      width: 50px;     165      height: 50px;     166      background: #00c9ee;    167      -webkit-border-radius: 200px;     168      -moz-border-radius: 200px;     169      border-radius: 200px;  170  }     171    172  .cloud3, .cloud6 {     173    174      width: 200px;     175      height: 60px;     176      background: #00f1ee;     177      box-shadow: 0px 0px 20px 5px #00f1ee;     178      -moz-box-shadow: 0px 0px 20px 5px #00f1ee;     179      -webkit-box-shadow: 0px 0px 20px 5px #00f1ee;     180  }     181    182  .cloud3:after, .cloud6:after {     183    184      content: '';     185      position: absolute;    186      width: 80px;     187      height: 80px;     188      top:-40px;     189      left: 20px;     190      background: #00f1ee;    191      -webkit-border-radius: 200px;     192      -moz-border-radius: 200px;     193      border-radius: 200px;  194      box-shadow: 0px 0px 20px 5px #00f1ee;     195      -moz-box-shadow: 0px 0px 20px 5px #00f1ee;     196      -webkit-box-shadow: 0px 0px 20px 5px #00f1ee;   197  }     198    199  .cloud3:before, .cloud6:before {     200    201      content: '';     202      position: absolute;    203      width: 100px;     204      height: 100px;     205      top:-60px;     206      right: 30px;     207      background: #00f1ee;     208      -webkit-border-radius: 200px;     209      -moz-border-radius: 200px;     210      border-radius: 200px;  211      box-shadow: 0px 0px 20px 5px #00f1ee;     212      -moz-box-shadow: 0px 0px 20px 5px #00f1ee;     213      -webkit-box-shadow: 0px 0px 20px 5px #00f1ee;   214  } 

              And the HTML for the example shown above


              // HTML CODE
                 0  <div class="mb-cloud">   1       <div class="cloud1"></div>    2       <div class="cloud2"></div>    3       <div class="cloud3"></div>    4       <div class="cloud4"></div>    5       <div class="cloud5"></div>    6       <div class="cloud6"></div>    7   </div> 


                Are CSS animations now "bad"?

                Of course not. In fact, they are ideal for easy transitions between states (such as rollovers) when compatibility with older browsers is not required. 3D transformations usually work very well (iOS7 is a notable exception), and CSS animations can be very attractive to developers who prefer to integrate all their animation and presentation logic into the CSS layer. However, JavaScript-based animations offer much more flexibility, a better workflow for complex animations and rich interactivity, and are often just as fast (or even faster) than CSS-based animations, despite what you may have heard.

                Advertising

                Your Comment

                * This fields are required, email don't publish
                ?

                This field is optional
                Fill this field link your name to your website.

                Data entered in this contact form will be stored in our system to ensure the output of the comment. Your e-mail address will be saved to determine the number of comments and for registration in the future

                I have read the Privacy policy and Terms. I Confirm the submission of the form and the submission of my data.
                tnado © 2019 | All Rights Reserved
                In cooperation with Hyperly