Do you want to animate clouds or other elements using only CSS keyframes? With animate CSS, you have the flexibility to do just that. You can move absolute positioned elements with left, top, right, and bottom within keyframes, or even use transform translate. The choice is yours when it comes to leveraging animate CSS.
Most comparisons on the Internet pit CSS animations against jQuery, given its widespread use (as though "JavaScript" and "jQuery" were synonymous). However, jQuery is notoriously slow when it comes to animation performance. The newer JavaScript-based GSAP is literally up to 20 times faster than jQuery. Part of why JavaScript animations have a bad rap is what's referred to as the "jQuery factor." But with animate CSS, you can create sleek animations without relying on external libraries.
Animate CSS Keyframes for Cloud Animation
In our example, we'll demonstrate how to animate clouds moving from left to right and vice versa in a continuous loop. The beauty of this effect is that it can be achieved solely with CSS keyframes, utilizing animate CSS. Below you'll find the code to create this stunning visual.
First, we place the elements outside the visible area using CSS properties like
0 position: absolute; 1 top: 100px; 2 /* Or right / 3 left:-250px; We position them using negative numbers. If an element is, for example, 150px wide, we can use left -250px to hide it. You can either set a specific width or calculate it with JavaScript. If you know your box won't exceed 600px, you can set a maximum width with
0 max-width: 600px; To ensure a smooth loop effect, you can move your element from 0px to 850px without any sudden changes in the visible area.
0 /* Or translate() */ 1 translate3d(0px,0px,0px); You can further fine-tune the animation using JavaScript to compute items and position them as needed, allowing for starts, stops, specific directions, and interaction-driven changes. With animate CSS, you can define the keyframes as follows:
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 } Finally, apply the animation to the desired cloud element with
0 animation: cloud1 50s infinite linear; And there you have it! A captivating cloud animation achieved solely through animate CSS, without the need for complex scripts or additional libraries.
TIP
Did you know that you can use hover and other pseudo-elements to trigger CSS events? It's a handy feature when you want to animate CSS properties on user interaction.
But did you know
That you can achieve similar effects with JavaScript? By specifying a transformation with a 3D property (such as translate3d() or matrix3d()), the browser will create a GPU layer for that element. This GPU acceleration isn't exclusive to CSS animations – JavaScript animations can also benefit! It's an excellent way to boost performance and create smooth transitions in both animate CSS and JavaScript-driven animations.
HTML and CSS for Clouds Animation Using Animate CSS
The CSS for this cloud animation example can be found below. You can easily modify, extend, or even convert it to SASS or LESS. This code snippet demonstrates how to bring your cloud animation to life using animate CSS, offering a sleek and efficient way to add visual flair to your website.
0 .mb-cloud { 1 2 position: relative; // Here to relative to fix elements with absolute inside 3 overflow: hidden; 4 width: 100%; 5 height: 30em; 6 max-height: 30em; 7 background: linear-gradient(#87CEEB,#E0FFFF); 8 } 9 10 .cloud1, 11 .cloud2, 12 .cloud3, 13 .cloud4, 14 .cloud5, 15 .cloud6 { 16 17 position: absolute; 18 19 -webkit-border-radius: 200px; 20 -moz-border-radius: 200px; 21 border-radius: 200px; 22 } 23 24 .cloud1, .cloud4 { 25 26 width: 200px; 27 height: 60px; 28 background: #00c9ee; 29 } 30 31 .cloud1 { 32 33 top: 80px; 34 left:-230px; 35 animation: cloud1 50s infinite linear; 36 } 37 38 @keyframes cloud1 { 39 from{transform: translate3d(-130px,0,0)} 40 to{transform: translate3d(1900px,0,0)} 41 } 42 43 .cloud2 { 44 45 top: 200px; 46 left:-230px; 47 animation: cloud2 20s infinite linear; 48 } 49 50 @keyframes cloud2 { 51 from{transform: translate3d(-90px,0,0)} 52 to{transform: translate3d(1900px,0,0)} 53 } 54 55 .cloud3 { 56 57 top: 300px; 58 right:-230px; 59 animation: cloud3 60s infinite linear; 60 } 61 62 @keyframes cloud3 { 63 from{transform: translate3d(210px,0,0)} 64 to{transform: translate3d(-1900px,0,0)} 65 } 66 67 .cloud4 { 68 69 top: 400px; 70 left:-230px; 71 animation: cloud4 80s infinite linear; 72 } 73 74 @keyframes cloud4 { 75 from{transform: translate3d(-80px,0,0)} 76 to{transform: translate3d(1900px,0,0)} 77 } 78 79 .cloud5 { 80 81 top: 300px; 82 left:-230px; 83 animation: cloud5 100s infinite linear 1s; 84 } 85 86 @keyframes cloud5 { 87 from{transform: translate3d(-80px,0,0)} 88 to{transform: translate3d(1900px,0,0)} 89 } 90 91 .cloud6 { 92 93 top: 150px; 94 right:-230px; 95 animation: cloud6 40s infinite linear 1s; 96 } 97 98 @keyframes cloud6 { 99 from{transform: translate3d(300px,0,0)} 100 to{transform: translate3d(-1900px,0,0)} 101 } 102 103 .cloud1:after, .cloud4:after { 104 105 content: ''; 106 position: absolute; 107 top:-40px; 108 left: 20px; 109 width: 80px; 110 height: 80px; 111 background: #00c9ee; 112 -webkit-border-radius: 200px; 113 -moz-border-radius: 200px; 114 border-radius: 200px; 115 } 116 117 .cloud1:before, .cloud4:before { 118 119 content: ''; 120 position: absolute; 121 top:-60px; 122 right: 30px; 123 width: 100px; 124 height: 100px; 125 background: #00c9ee; 126 -webkit-border-radius: 200px; 127 -moz-border-radius: 200px; 128 border-radius: 200px; 129 } 130 131 .cloud2, .cloud5 { 132 133 width: 100px; 134 height: 30px; 135 background: #00c9ee; 136 } 137 138 .cloud2:after, .cloud5:after { 139 140 content: ''; 141 position: absolute; 142 width: 40px; 143 height: 40px; 144 top:-20px; 145 left: 10px; 146 background: #00c9ee; 147 -webkit-border-radius: 200px; 148 -moz-border-radius: 200px; 149 border-radius: 200px; 150 } 151 152 .cloud2:before, .cloud5:before { 153 154 content: ''; 155 position: absolute; 156 top:-30px; 157 right: 15px; 158 width: 50px; 159 height: 50px; 160 background: #00c9ee; 161 -webkit-border-radius: 200px; 162 -moz-border-radius: 200px; 163 border-radius: 200px; 164 } 165 166 .cloud3, .cloud6 { 167 168 width: 200px; 169 height: 60px; 170 background: #00f1ee; 171 box-shadow: 0px 0px 20px 5px #00f1ee; 172 -moz-box-shadow: 0px 0px 20px 5px #00f1ee; 173 -webkit-box-shadow: 0px 0px 20px 5px #00f1ee; 174 } 175 176 .cloud3:after, .cloud6:after { 177 178 content: ''; 179 position: absolute; 180 width: 80px; 181 height: 80px; 182 top:-40px; 183 left: 20px; 184 background: #00f1ee; 185 -webkit-border-radius: 200px; 186 -moz-border-radius: 200px; 187 border-radius: 200px; 188 box-shadow: 0px 0px 20px 5px #00f1ee; 189 -moz-box-shadow: 0px 0px 20px 5px #00f1ee; 190 -webkit-box-shadow: 0px 0px 20px 5px #00f1ee; 191 } 192 193 .cloud3:before, .cloud6:before { 194 195 content: ''; 196 position: absolute; 197 width: 100px; 198 height: 100px; 199 top:-60px; 200 right: 30px; 201 background: #00f1ee; 202 -webkit-border-radius: 200px; 203 -moz-border-radius: 200px; 204 border-radius: 200px; 205 box-shadow: 0px 0px 20px 5px #00f1ee; 206 -moz-box-shadow: 0px 0px 20px 5px #00f1ee; 207 -webkit-box-shadow: 0px 0px 20px 5px #00f1ee; 208 } And the HTML for the example shown above is crucial to structuring the animation. Together with the CSS, it forms the backbone of the animation, allowing you to create the desired visual effect. By combining HTML and CSS, you can design animations that are both visually appealing and functional, enhancing the user experience on your website. Don't hesitate to experiment with different elements and styles to create unique animations using animate CSS.
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 straightforward 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 appealing 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.
Conclusion
Animate CSS and keyframes provide a valuable toolset for creating engaging animations on the web. While JavaScript-based animations offer more flexibility and interactivity, CSS animations are a great option for simple transitions and effects. Understanding the capabilities and limitations of both will enable you to choose the best approach for your specific needs and create compelling visual experiences for your users. Keep exploring, experimenting, and innovating with both CSS and JavaScript to bring your web designs to life.
Advertising