“I want to change the movement of elements using animation”
“I don’t know how to use keyframes”
Some people may be worried about the above.
For those new to keyframes, it can be difficult to understand how animation is created.
In this WEBCAMP MEDIA, I will explain how to implement animation with CSS keyframes and animation.
- About keyframes and animation
- how to make animation
- To specify multiple keyframes
I will explain the above items.
After reading this article, you will understand how to use CSS keyframes and animations to implement simple animations.
If you want to add movement to your elements with CSS, check it out!
Table of contents
- Features of CSS keyframes and animation
- What are keyframes
- What is animation
- How to animate with CSS keyframes and animation
- How to specify multiple keyframes for one element
- summary
Features of CSS keyframes and animation
In order to implement animation with CSS keyframes and animation, I will explain each feature.
What are keyframes
keyframes are a type of CSS property that allow you to specify the animation behavior you want to specify for an element.
Set the animation start point to 0% and the end point to 100%, and set in detail how the movement will be expressed in between.
The input method of keyframes is as follows.
@keyframes アニメーションの名前 {
0% {
プロパティ名; 値;
}
50% {
プロパティ名; 値;
}
100% {
プロパティ名; 値;
}
}As above, you can put 50% between 0% and 100% to change the movement during the animation execution.
What is animation
animation is a CSS property that gives the element the animation specified in @keyframes .
In the animation property, you can mainly specify the contents of the following items.
- animation-name: the name of the animation
- animation-duration: animation speed
- animation-direction: animation playback direction
- animation-timing-function: animation acceleration
Also, the above properties can be entered collectively in the animation property.
How to animate with CSS keyframes and animation
I will explain how to implement animation on HTML elements using keyframes and animation using sample code.
sample code
HTML
<body>
<p class="test">テスト</p>
</body>CSS
@keyframes animation-test{
0%{
width: 50px;
}
100%{
width: 500px;
}
}
.test{
animation: animation-test 2s ease-in;
width:500px;
background-color: aqua;
}In the above code, the animation to be implemented is named “animation-test”.
The animation details are to display the test class from 50px to 500px in 2 seconds.
Ease-in for the animation property will cause the movement to start slowly and accelerate as it approaches the end position.
How to specify multiple keyframes for one element
When specifying multiple keyframes, you can use them by separating them with commas when specifying them in the animation property.
The sample code explains in detail how to specify keyframes.
sample code
HTML
<body>
<p class="test">テスト</p>
</body>CSS
@keyframes animation-color{
0%{
background-color:rgb(72, 235, 235);
}
50%{
background-color:rgb(201, 243, 51);
}
75%{
background-color:rgb(236, 98, 98);
}
}
@keyframes animation-direction{
100%{
transform: translateX(500px);
}
}
.test{
animation: animation-color 5s,
animation-direction 5s;
width:300px;
height:300px;
background-color:rgb(72, 235, 235);
}In keyframes, two animations are created: one that moves 500px horizontally in 5 seconds, and the other that changes the background color in 5 seconds.
Multiple animations are implemented on a single element by specifying each name and the content to be executed in the animation property and separating them with commas .
summary
This time, I explained how to implement animation with CSS keyframes and animation. How was it?
To implement animation, create the content of the animation with keyframes and assign it to the element with animation.
You can specify multiple animations created with keyframes by entering them in animation separated by commas.
