07-26-2023, 07:01 PM
Example:
<!DOCTYPE html>
<html>
<head>
<title>Animations Example</title>
<style>
/* Define the animation keyframes */
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* Apply the animation to the div element */
div {
width: 200px;
height: 100px;
background-color: lightblue;
animation: slide-in 1s ease;
}
</style>
</head>
<body>
<div>This div slides in from the left.</div>
</body>
</html>
Explanation:
CSS animations are created using @keyframes to define the intermediate steps of the animation. In this example, the div element slides in from the left using the slide-in animation that lasts 1 second with an ease timing function.
<!DOCTYPE html>
<html>
<head>
<title>Animations Example</title>
<style>
/* Define the animation keyframes */
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* Apply the animation to the div element */
div {
width: 200px;
height: 100px;
background-color: lightblue;
animation: slide-in 1s ease;
}
</style>
</head>
<body>
<div>This div slides in from the left.</div>
</body>
</html>
Explanation:
CSS animations are created using @keyframes to define the intermediate steps of the animation. In this example, the div element slides in from the left using the slide-in animation that lasts 1 second with an ease timing function.