In this article, we are going to talk about the animation keyframes. The animation change from current style to a new style.

We use the previous project file to demonstrate the keyframes of CSS Animation.

First, we add an animation called “move”

@keyframes move {

from{ transform: translateX(0)}
to{transform: translateX(200px)}

This translate the box from 0px to 200px.

We bind the “move” animation to the box element. It will last for 5s.

.box{

height: 100px;
width: 100px;
background-color: blue;
color:white;
position: absolute;
animation: move 5s
}
.container{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
@keyframes move {
from{ transform: translateX(0)}
to{transform: translateX(200px)}
}

#css3 #css-keyframes #css-animation #css