DEV Community

loading...

Create Zoom in zoom out animation effect in CSS

vaishali1192 profile image Vaishali1192 ・1 min read
  • To create zoom in zoom out effect we need to focus on two elements "width" and "height".
  • First define proper height width of an element.
  • Add Css to that element
  • We need to use @keyframes to define animation


@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}

Discussion (0)

Forem Open with the Forem app