- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>@keyframes: frame grouping</title>
<meta charset="utf-8">
<link rel="stylesheet" href="epoch1.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="ancient">
<div class="lift-top">
<div class="platform">
<span class="stone-wheel"></span>
</div>
</div>
</body>
</html>
CSS
.platform {
animation-name: lift-up;
animation-duration: 3s;
}
@keyframes lift-up {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-250px);
}
100% {
transform: translateY(-300px);
}
}
You’ve gone to a different page
Goalscompleted
0
- Change the value of frame
50%
to50%, 80%
; - Change the motion transformation in frame
50%, 80%
totransform: translateY(-50px)
.
Comments