Creates a zoom in zoom out animation.
@keyframes
to define a three-step animation. At the start (0%
) and end (100%
), the element is its original size (scale(1 ,1)
). Halfway through (50%
) it's scaled up to 1.5 times its original size (scale(1.5, 1.5)
).width
and height
to give the element a specific size.animation
to set the appropriate values for the element to make it animated.<div class="zoom-in-out-box"></div>
.zoom-in-out-box {
margin: 24px;
width: 50px;
height: 50px;
background: #f50057;
animation: zoom-in-zoom-out 1s ease infinite;
}
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}
CSS, Animation
Creates a card that shifts on hover.
CSS, Animation
Creates a typewriter effect animation.
CSS, Animation
Creates a staggered animation for the elements of a list.