<div class="circle1"></div>
.circle1 {
position: absolute;
top: 30px;
width: 100px;
height: 100px;
background-color: #f756c4;
border-radius: 100px;
animation: pyonpyon 3s infinite ease;
}
@keyframes pyonpyon {
0% {
transform: translate(0, 0);
}
5% {
transform: translate(0, 0);
}
10% {
transform: translate(0, 0);
}
20% {
transform: translate(0, -15px);
}
25% {
transform: translate(0, 0);
}
30% {
transform: translate(0, -15px);
}
50% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 0);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.