<img class="kpop" src="https://ljc-dev.github.io/fluffy-octo-adventure/kpop.png">
img {
display: block;
width: 200px;
height: 200px;
object-fit: contain;
}
@keyframes slideDown {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(75%);
}
}
.kpop{
animation-name: slideDown;
animation-duration: 3s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.