This example code tells you how to do animation using css keyframe.
Please note that I have learned this from the udemy course by Jonas Schmedtmann.
Example
Example Code
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<!-- <title>Natours | Exciting tours for adventurous people</title> -->
<title>clip-path and linear-gradient</title>
</head>
<body>
<header class="header">
<div class="logo-box">
<img src="img/logo-white.png" alt="Logo" class="logo"/>
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Primary</span>
<span class="heading-primary-secondary">Secondary</span>
</h1>
</div>
</header>
</body>
</html>
CSS code
The css code below uses keyframe for animation which gives a way to control how the intermediate steps of the animation should be by defining actions for each percentage of the animation duration.
As you can see, you need to define keyframes so that you can use it in other place by animation property. When defining keyframes, you need to specify the percentage of the duration. For example, 0% means the start of the animation and 100% means the end.
In the example code below, I have defined two animations – moveInLeft/moveInRight. The moveInLeft makes the element move to the right and vice versa for the moveInRight. I can achieve the goal by defining translate position. You can also use other functions such as rotate(deg). In moveInLeft keyframe, the element starts with -100px position in the beginning and move to 10px at 80% of duration and 0 when done.
After defining the keyframe, you need to use the keyframe in the css element to use it. Typical properties are animation-name, animation-duration and animation-timing-function. You can use the keyframe name for animation-name. animation-duration represents the entire duration of the animation. animation-timing-function represents how the timing of the animation should be. For example, you can use ease-out, ease-in. (more timing function defined in MDN documents). animation-iteration-count represents how many times the animation should be played. You can specify all those properties explicitly or you can do everything in one line like in the heading-primary-secondary example.
.heading-primary-main {
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
/* animation-iteration-count: 3; */
/* animation-delay: 3s; */
}
.heading-primary-secondary {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: 17.4px;
animation: moveInRight 1s ease-out;
}
@keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
80% {
transform: translate(-10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}