CSS Animations
Moving or restyling an element over time does not require JavaScript, because CSS can animate HTML elements on its own.
What are CSS Animations?
With an animation, an element shifts gradually from one style to another, and neither the number of CSS properties involved nor the number of changes is limited.
Keyframes come first: they describe the styles an element should have at particular moments, and a CSS animation cannot run until they exist.
CSS animation-name and animation-duration
Two properties get an animation going. animation-name labels it, while animation-duration states how long one run takes. Leave the duration out and nothing animates, since its default value is 0s (0 seconds).
CSS @keyframes Rule
Styles placed inside a @keyframes rule mark the moments the animation passes through, and the element moves gradually from its current style towards each new one.
None of this has any effect until the animation is bound to an element.
Example
Here a <div> element is bound to "myAnimation". Over 4 seconds its background color fades from red to yellow. The keywords from and to stand for 0% and 100%.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes From To</title>
<style>
@keyframes myAnimation {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>CSS Animation: from/to</h1>
<div></div>
</body>
</html>
Percentage keyframes
Percentages can replace from and to, and they allow any number of style changes. In this case the background color changes at 0%, 25%, 50%, and 100%.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes Percent</title>
<style>
@keyframes myAnimation {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>CSS Animation: Percentages</h1>
<div></div>
</body>
</html>
Color and position
Keyframes at 0%, 25%, 50%, 75%, and 100% set both a background color and a position here, so the <div> element travels around a square path while its color changes.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes Position</title>
<style>
@keyframes myAnimation {
0% {background-color: red; left: 0px; top: 0px;}
25% {background-color: yellow; left: 200px; top: 0px;}
50% {background-color: blue; left: 200px; top: 200px;}
75% {background-color: green; left: 0px; top: 200px;}
100% {background-color: red; left: 0px; top: 0px;}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>CSS Animation: Position and Color</h1>
<div></div>
</body>
</html>