<div class="box1">
<p>ease</p>
</div>
<div class="box2">
<p>linear</p>
</div>
div {
width: 300px;
height: 50px;
margin-bottom: 10px;
border-radius: 5px;
background-color: #e57fe7;
}
.box1 {
animation: move 3s ease infinite;
}
.box2 {
animation: move 3s linear infinite;
}
p {
font-size: 20px;
font-weight: 900;
text-align: center;
color: white;
}
@keyframes move {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.