- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pre- and post-animation state: animation-fill-mode, step 4</title>
<meta charset="utf-8">
<link rel="stylesheet" href="epoch3.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="scientific">
<div class="battery">
<span class="energy-logo"></span>
<span class="energy-fill"></span>
</div>
<div class="battery">
<span class="energy-logo"></span>
<span class="energy-fill mega-energy-fill"></span>
</div>
</body>
</html>
CSS
.energy-logo {
animation-name: vibrate;
animation-duration: 2s;
}
.energy-fill {
animation-name: power;
animation-duration: 2s;
animation-delay: 2s;
}
.mega-energy-fill {
animation-fill-mode: backwards;
}
@keyframes vibrate {
50% {
transform: scale(1.2);
}
}
@keyframes power {
0% {
width: 150px;
background-color: #01ff70;
}
50% {
background-color: #ffdc00;
}
100% {
width: 30px;
background-color: #ff4136;
}
}
Goalscompleted
Set the following parameters to the charge of the experimental battery .mega-energy-fill:
- number of animation cycles
2 - and an alternating animation direction.