CSS Animation and @Keyframes Property
Last Updated :
25 Jul, 2024
CSS allows the animation of HTML elements without using JavaScript. An animation lets an element systematically and with proper timing, change from one style to another. You can change whatever CSS properties you want, end the number of times, as you want it. To use CSS animation, you must first specify some @keyframes for the animation. @keyframes will describe which styles that element will have at specific times.
We will be using a basic example such as the animation of a battery charging.
The @keyframes property has the option to divide the animation time into parts/percentages and perform an activity that is specified for that part of the whole duration of the animation. the @keyframes property is given to each animation according to the name of that animation. It allows you to run the animation infinitely as well.
Here, is a simple CSS block that explains the usage of @keyframes:
Example: Usage of @keyframes in a background-color change.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation and @Keyframes Property</title>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<style>
body {
background-color: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #343a40;
}
p {
margin-bottom: 40px;
color: #6c757d;
font-size: 1.1rem;
}
.circle {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-color: red;
animation: circle 8s infinite;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@keyframes circle {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
75% {
background-color: purple;
}
100% {
background-color: green;
}
}
</style>
</head>
<body>
<div class="container">
<h1>CSS Animation with @Keyframes</h1>
<p>Watch the circle change colors using the <code>@keyframes</code> property.</p>
<div class="circle"></div>
</div>
</body>
</html>
Output:
Note: While using @keyframes, there are some guidelines that are set in place for you to create a smooth and working animation. Guidelines such as, make sure you make the transitions smooth and specify when the style change will happen in percent or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is when the animation is going to start, 100% is when the animation is completed. For the best browser support, i.e. to make sure the animation is supported in all browsers throughout the internet, be sure to always define both the 0% and the 100% selectors.
The animation for the charging of a battery is important, as it helps you to understand just how the @keyframes property will help you to time your animation in perfect intervals and hence help make the transitions smooth. The charging of the battery is used to explain how you can set various animations within the given time-period by specifying the percentage of division, exactly how in the example the battery charges from 0-25% then from 25-50% and so on.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Battery Charging Animation</title>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 2rem;
text-align: center;
max-width: 600px;
width: 90%;
}
h1 {
color: #2c3e50;
font-size: 2.5rem;
margin-bottom: 1.5rem;
font-weight: 600;
}
.battery-container {
position: relative;
width: 80%;
max-width: 300px;
margin: 0 auto;
}
.battery {
height: 120px;
border: 8px solid #34495e;
border-radius: 15px;
position: relative;
background-color: #ecf0f1;
overflow: hidden;
}
.battery::before {
content: '';
height: 40%;
width: 20px;
background-color: #34495e;
position: absolute;
right: -28px;
top: 50%;
transform: translateY(-50%);
border-radius: 0 5px 5px 0;
}
.charge {
height: 100%;
width: 100%;
background-color: #2ecc71;
position: absolute;
bottom: 0;
left: -100%;
animation: chargeAnimation 5s linear infinite;
}
@keyframes chargeAnimation {
0% { left: -100%; }
100% { left: 0; }
}
.battery-percentage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
font-weight: bold;
color: #34495e;
z-index: 10;
animation: percentageAnimation 5s linear infinite;
}
@keyframes percentageAnimation {
0% { content: '0%'; }
20% { content: '20%'; }
40% { content: '40%'; }
60% { content: '60%'; }
80% { content: '80%'; }
100% { content: '100%'; }
}
.status {
margin-top: 1rem;
font-size: 1.2rem;
color: #7f8c8d;
}
@media (max-width: 576px) {
h1 {
font-size: 2rem;
}
.battery {
height: 100px;
}
.battery-percentage {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Battery Charging Animation</h1>
<div class="battery-container">
<div class="battery">
<div class="charge"></div>
<div class="battery-percentage"></div>
</div>
</div>
<div class="status">Battery is charging...</div>
</div>
</body>
</html>
Output:
Similar Reads
CSS animation-name Property
The animation-name property in CSS is used for defining animations. It is used to specify the name of the @keyframes that describe the animation. Understanding the Animation-Name PropertyThe animation-name property in CSS is used to connect an element to a set of keyframes. The keyframes describe th
2 min read
CSS animation-delay Property
The animation-delay property specifies a delay for the start of an animation. Defined in seconds (s) or milliseconds (ms), this value determines how long to wait before beginning the animation. Negative values start the animation as if it had already been playing for the specified duration. Syntaxan
3 min read
CSS animation Property
The CSS animation property is used to specify the animation that should be applied to an element. The animation property is a shorthand for several other CSS properties that control different aspects of the animation. Syntax: animation: animation-name animation-duration animation-timing-function ani
2 min read
CSS animation-fill-mode Property
The animation-fill-mode property in CSS is used to define the styles that an animation applies to an element before and after it executes. By default, CSS animations do not affect an element until the first keyframe is played or after the last keyframe is played. This property can override that beha
3 min read
CSS animation-duration Property
The animation-duration property in CSS is essential for controlling the length of time an animation takes to complete one cycle, making it a vital tool for creating dynamic and engaging web designs. Syntax:animation-duration: time | initial | inherit;Property Value:time: This value is used to specif
3 min read
CSS animation-direction Property
The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward. It controls the visual flow and repetition behavior of animations in web pages, enhancing dynamic content presentation. Syntaxa
4 min read
CSS animation-iteration-count Property
The animation-iteration-count property in CSS specifies the number of times an animation should be repeated. It can also be set to infinite to repeat the animation indefinitely. Syntaxanimation-iteration-count: number | infinite | initial | inherit;Property Valuenumber: Specifies the number of times
3 min read
CSS animation-play-state Property
The animation-play-state property in CSS controls animation playback: paused stops, running starts, initial resets to default, and inherit inherits from its parent element. Syntaxanimation-play-state: paused|running|initial|inherit;Property ValueThe animation-play-state property is listed below: Val
3 min read
Primer CSS Fade in 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
Primer CSS Fade up 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