Want to add visual appeal to your site? Use an animated background with just HTML and CSS to bring your pages to life. To increase viewer engagement on a website, grabbing the viewer's attention is essential. So it is better to add some animations in addition to the usual elements. In today's snippet, we show you how to create a subtle background effect with HTML and CSS. Before collecting the source code, have a look at the video tutorial below. In this video, we have shown the step-by-step process of how to create an animated background using HTML and CSS. Apart from this, we have 1000s of other videos about CSS animation examples, responsive website design, JavaScript projects, and so on.
A simple way to create background animations is to use CSS keyframes animations. Since CSS3 was introduced, many beautiful simple or complex animations can be created with CSS. Those who haven't started learning any JavaScript can play around with the keyframes property of CSS. In CSS keyframes animation we specify the start and end of an element and the browser will automatically animate it between those two states. If we add some transitions to it, it will become an awesome animation.
Here we have added ten span elements within a single div. Then we split the spans to the entire viewport using the fixed position and left properties. The top property value was set to -120px so that the elements are first out of view. Then we added the animation property. The project uses text so the spans are given a z-index so that the elements animate behind the text. We have also given each element a different color and size to make it look good. We added different animation-delay values to make elements animate one after another. Finally, transform and translate properties are used in CSS keyframes to animate the elements from top to bottom.
Top comments (0)