- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pre- and post-animation state: animation-fill-mode, step 2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="epoch3.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="scientific">
<div class="sign"></div>
<div class="tube">
<span class="bubbles"></span>
<span class="reagent"></span>
</div>
<div class="tube">
<span class="bubbles"></span>
<span class="reagent experimental-reagent"></span>
</div>
</body>
</html>
CSS
@keyframes blink {
50% {
opacity: 1;
}
}
@keyframes reaction {
0% {
background-color: #01ff70;
}
100% {
background-color: #ff4136;
}
}
.bubbles {
animation-name: blink;
animation-duration: 2s;
}
.reagent {
animation-name: reaction;
animation-duration: 3s;
animation-delay: 2s;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
Set the following parameters to the chemical in the experimental tube .experimental-reagent:
- saving of the final state after animation,
- number of animation cycles
2 - and an alternating animation direction.
Comments