- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pre- and post-animation state: animation-fill-mode, step 3</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;
}
@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
- Assign a
poweranimation with a duration of2sand a playback delay of2sto the battery charge.energy-fill, - then make the charge in the experimental battery
.mega-energy-filldisplay its state before the animation starts.