- Theory
- Theory
Animation-timing-function, step 2
Here are some more animation forms: ease-in, ease-out and ease-in-out.
ease-in
ease-out
ease-in-out
The graphs show that when the ease-in parameter is set, the animation starts slowly and accelerates towards the end; the ease-out parameter makes it start quickly, then slows it down at the end. The effect of the ease-in-out value is similar to ease in that the animation starts and ends slowly, but the rate of change is a bit higher.
Let’s experiment with these values of the animation-timing-function property.
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animation-timing-function, step 2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="epoch4.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="technologic">
<div class="belt">
<span class="robot warrior"></span>
</div>
<div class="belt">
<span class="robot constructor"></span>
</div>
</body>
</html>
CSS
.robot {
animation-name: move;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes move {
to {
left: 400px;
}
}
Goalscompleted
Successively assign the following animation forms to the robot .constructor:
ease-in,ease-out,ease-in-out.