How to make CSS Animations ?
Last Updated :
06 Jun, 2023
Animation is a way using which we can create the illusion of motion by placing still images one after another in a typical format. For example, we can have a ball rising up at some instant then falling down as an animation effect. CSS provides us with some properties to control the animation effect by changing some of its variables like timing and keyframes etc.
Some CSS properties are as follows:
Along with all these methods, there are some other methods also such as animation-timing-function, @keyframes, animation-fill-mode, etc.
Explanation: Basically in our CSS code first we have to specify the main effect which our animation should display by using the “@keyframes” property. Then inside this block, we have to write the effect of animation i.e. the change in size, from which color to which color changes must happen, change in opacity, and many more. These all can be mentioned in terms of the percentage of the total time slot or using the “from” and “to” keywords. Hence, this block contains the main animation code to be displayed.
Below are examples of creating animations. The first animation results in a change of opacity and the second one results in a change of background-color.
Example 1:
CSS
@keyframes animation_example1 {
/* animation results in change of opacity*/
from {
opacity: 0.3;
}
to {
opacity: 1;
}
}
Example 2: In this code we created animations but to link these animations' effect to the HTML tags (maybe img or other ones) we have to specify their name in the CSS style of that tag.
CSS
@keyframes animation_example2 {
/* here the amount of total time is divided */
0% {
height: 220px;
width: 220px;
opacity: 0.7;
}
50% {
height: 240px;
width: 240px;
opacity: 0.4;
}
}
Example 3: In this code, we are able to mention the details of the animation like the timing and delay period and also the iteration counts etc
CSS
#pic1 {
animation-name: animation_example2;
animation-duration: 2s;
animation-delay: 0.5s;
animation-iteration-count: infinite;
}
/* This animation will continue
infinite number of times */
Below is the complete HTML code for which the above-mentioned CSS will be applied to produce the results.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes animation_example2 {
/* here the amount of total time is divided */
0% {
opacity: 1;
}
50% {
opacity: 0.1;
}
}
/* This animation will continue
infinite number of times */
#gfg {
animation-name: animation_example2;
animation-duration: 2s;
animation-delay: 0.5s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div id="gfg" style="width:250px;height:100px;
border:1px solid #000;
background-color:blue">
</div>
</body>
</html>
Output:
output
Similar Reads
Primer CSS Grow x Animation Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
W3.CSS Animations CSS Animations is a technique to change the appearance and behavior of various elements in web pages. It is used to control the elements by changing their motions or display. W3.CSS provides developers with some good inbuilt animation classes. The list of classes is as follows: Sr. No. Class Name De
5 min read
How to Create SVG Animations? Since web design is all about capturing the user's attention, it becomes necessary to use animation to communicate the value of our business/our client's business delightfully. This is why animations have become the go-to thing for designers to capture the visitor's attention or bring the visitor's
6 min read
Primer CSS Hover Animation Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHub’s design system. Animations are an important tool to attract users to
2 min read
How to pause/play animation using CSS ? CSS helps to animate HTML elements without using JavaScript. You can play and pause the animation applied to HTML elements using animation-play-state property of CSS.The animation-play-state property has 2 values:paused - Pauses an ongoing animation.running - Starts a paused animation (default value
2 min read
CSS Floating Animation CSS Floating Animation creates a visual effect where elements appear to float smoothly, often mimicking natural movement like drifting in water or air. This effect is achieved using CSS properties such as @keyframes, transform, and animation, giving elements a subtle, continuous floating motion.CSS
1 min read