+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: How to make animations with CSS3 (/showthread.php?tid=5166)
How to make animations with CSS3 - Qomplainerz - 07-26-2023
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.