- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pre- and post-animation state: animation-fill-mode, step 5</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;
}
@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;
}
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
Set the following properties to the charge of the experimental .mega-energy-fill battery:
- keep the pre- and post-animation states
- number of animation cycles:
2, - and then an alternating direction of animation.
Comments