CSS Animations
CSS Animation helps you to create simple to complex webpage object element animations in any HTML webpage using CSS animation keyframes. Using which you can create an interactive and effective user interface experience for your simple webpage website element object. You are able to generate element animated objects from a start keyframe point to an end keyframe point.
So, let’s better understand all the aspects of using CSS animation in HTML webpage.
Basic syntax of CSS animation.
You can use CSS animation in your existing HTML webpage by dividing it into two main components.
- CSS Animation @keyframes – Here you can define object element animation styles at multiple element points during CSS animation in your existing HTML webpage.
- CSS Animation Properties – Animation is applied to CSS animation webpage object element in the existing HTML webpage.
Basic syntax of CSS animation in a webpage.
@keyframes animation-name {
from {
/* starting styles */
}
to {
/* ending styles */
}
}
/* You an Use Percentages Animation Style */
@keyframes animation-name {
0% {
/* starting styles */
}
100% {
/* ending styles */
}
}
Basic CSS Animation Properties.
To apply CSS animation animation effect in any HTML webpage website, you can manually apply multiple CSS animation properties as per your requirement.
Common CSS Animation Properties.
- animation-name – Here we define the name of the CSS animation in our current HTML webpage along with @keyframes.
- animation-duration – Here we define the time taken to preview the CSS animation from start to end in our current HTML webpage. For example, (2s, 400ms) Here the time is in milliseconds.
- animation-timing-function – Here we define the speed curve of the animation in our CSS animation in our current HTML webpage. For example, (ease, linear, ease-in, ease-out, ease-in-out) etc., using animation functions.
- animation-delay – Here we define the delay time before starting the CSS animation in our current HTML webpage. For example, (0s, 4s) here time is in 0 to 4 seconds.
- animation-iteration-count – Here you control how many times you want to play or repeat CSS animation in your current HTML webpage. For example, (1, or infinite) time can be set.
- animation-direction – Here you can control the direction of CSS animation in your current HTML webpage, for example, (normal, reverse, alternate) is the animation direction option.
- animation-fill-mode – Here you manually apply animation style effect in before and after order in CSS animation object element in your current HTML webpage. For example, (forward, backward, both, none) is the option.
- animation-play-state – Here you control what is the CSS animation current condition in your current HTML webpage, whether the animation is started or stopped. For example, currently the animation is (running, stopped).
Example of CSS animation in HTML webpage.
So, let’s understand the animation of a bouncing ball in HTML webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray CSS Animation Html Web Page Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: pink;
margin: 0;
}
.ballanimation {
margin: 10px;
padding: 10px;
width: 100px;
height: 100px;
background-color: blue;
color: red;
border-radius: 100%;
border-color: blue;
animation: bounce 1s ease-in infinite; /* apply the bounce ease-in infinite animation */
}
@keyframes bounce {
0%, 30%, 60%, 90%, 110% {
transform: translateY(0); /* set bounce object Initial position */
}
50% {
transform: translateY(-170px); /* it Move up bounce object */
}
70% {
transform: translateY(-90px); /* it Move down bounce object */
}
}
</style>
</head>
<body>
<div class=”ballanimation”><center>Ball Animation</center></div>
</body>
</html>
Bouncing Ball animation Css file.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: pink;
margin: 0;
}
.ballanimation {
margin: 10px;
padding: 10px;
width: 100px;
height: 100px;
background-color: blue;
color: red;
border-radius: 100%;
border-color: blue;
animation: bounce 1s ease-in infinite; /* apply the bounce ease-in infinite animation */
}
@keyframes bounce {
0%, 30%, 60%, 90%, 110% {
transform: translateY(0); /* set bounce object Initial position */
}
50% {
transform: translateY(-170px); /* it Move up bounce object */
}
70% {
transform: translateY(-90px); /* it Move down bounce object */
}
}
CSS Multiple Animation in HTML Webpage.
You can apply multiple animation properties in CSS animations to your existing HTML webpage by using the comma operator to separate the animation properties.
CSS Multiple Animation in HTML Webpage Example.
.bouncingball {
animation: bounce 1s ease-in infinite, spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(260deg);
}
}
Using JavaScript to control CSS animations in HTML webpage.
You can use and control animations with JavaScript by adding CSS animations to your existing HTML webpage or by removing the class.
JavaScript CSS animations HTML webpage Example.
const ball = document.querySelector(‘.bauncingball’);
ball.addEventListener(‘click’, () => {
ball.classList.toggle(‘animate’); // use toggle animation class in javascript
});
Using CSS animations in HTML webpage Conclusion.
CSS animations in HTML webpage are an easy and good way to increase the web visitor website interface or user interaction and apply attractive visual animation effects to the website. Web developers can create dynamic animation object elements for your webpage by adding keyframes with multiple animation properties.
