CSS Zoom Animation Effects | zoomIn, zoomOut, zoomInUp, zoomOutRight

Try out different zoom effects using pure CSS animation including zoom in, zoom out, and directional zoom transitions.

Contents

  1. Zoom IN
  2. Zoom Out
  3. Zoom In Up
  4. Zoom In Down
  5. Zoom In Left
  6. Zoom In Right
  7. Zoom Out Up
  8. Zoom Out Down
  9. Zoom Out Left
  10. Zoom Out Right

Zoom In

The zoomIn animation smoothly scales an element from small to its full size while increasing opacity, creating an engaging entrance effect.

Zoom in Animation
HTML
<div class="box zoomIn" >Zoom in Animation</div>
CSS
.box {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #088dce;
    color: #fff;
    padding: 10px 10px;
    display: inline-block;
}

.zoomIn {
    animation: zoomIn 1s both infinite;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}
Run codeTry it yourself

Zoom Out

The zoomOut animation gradually scales an element down to nothing while fading it out, making it disappear with a shrinking motion.

Zoom Out Animation
HTML
<div class="box zoomOut" >Zoom Out Animation</div>
CSS
.box {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #088dce;
    color: #fff;
    padding: 10px 10px;
    display: inline-block;
}

.zoomOut {
    animation: zoomOut 1s both infinite;
}

@keyframes zoomOut {
    0% { opacity: 1 }
    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    100% { opacity: 0 }
}
Run codeTry it yourself

Zoom In Up

The zoomInUp animation combines a zoom-in effect with an upward motion, perfect for introducing elements from below the view port.

Zoom In Up Animation
HTML
<div class="box zoomInUp" >Zoom In Up Animation</div>
CSS
.box {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #088dce;
    color: #fff;
    padding: 10px 10px;
    display: inline-block;
}

.zoomInUp {
    animation: zoomInUp 1s both infinite;
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
    }
}
Run codeTry it yourself

Zoom In Down

The zoomInDown animation zooms an element in while moving it downward, giving a smooth drop-in appearance.

Zoom In Down Animation
HTML
<div class="box zoomInDown" >Zoom In Down Animation</div>
CSS
.box {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #088dce;
    color: #fff;
    padding: 10px 10px;
    display: inline-block;
}

.zoomInDown {
    animation: zoomInDown 1s both infinite;
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
    }
}
Run codeTry it yourself

Zoom In Left

The zoomInLeft animation zooms an element into view while sliding it from the left, making it appear as if it is entering from the side.

Zoom In Left Animation
HTML
<div class="box zoomInLeft" >Zoom In Left Animation</div>
CSS
.box {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #088dce;
    color: #fff;
    padding: 10px 10px;
    display: inline-block;
}

.zoomInLeft {
    animation: zoomInLeft 1s both infinite;
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
    }
}
Run codeTry it yourself

Zoom In Right

The zoomInRight animation brings an element in with a zoom effect combined with movement from the right, giving a dynamic entrance.

Zoom In Right Animation
HTML
<div class="box zoomInRight" >Zoom In Right Animation</div>
CSS
.box {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #088dce;
    color: #fff;
    padding: 10px 10px;
    display: inline-block;
}

.zoomInRight {
    animation: zoomInRight 1s both infinite;
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
    }
}
Run codeTry it yourself

Zoom Out Up

The zoomOutUp animation scales an element down while moving it upward, creating a smooth disappearing effect toward the top.

Zoom Out Up Animation
HTML
<div class="box zoomOutUp" >Zoom Out Up Animation</div>
CSS
.box {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #088dce;
    color: #fff;
    padding: 10px 10px;
    display: inline-block;
}

.zoomOutUp {
    animation: zoomOutUp 1s both infinite;
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
    }
    100% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
    }
}
Run codeTry it yourself

Zoom Out Down

The zoomOutDown animation shrinks an element while shifting it downward, making it exit gracefully toward the bottom.

Zoom Out Down Animation
HTML
<div class="box zoomOutDown" >Zoom Out Down Animation</div>
CSS
.box {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #088dce;
    color: #fff;
    padding: 10px 10px;
    display: inline-block;
}

.zoomOutDown {
    animation: zoomOutDown 1s both infinite;
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
    }
    100% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
    }
}
Run codeTry it yourself

Zoom Out Left

The zoomOutLeft animation scales an element down while sliding it to the left, creating a dramatic disappearing motion.

Zoom Out Left Animation
HTML
<div class="box zoomOutLeft" >Zoom Out Left Animation</div>
CSS
.box {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #088dce;
    color: #fff;
    padding: 10px 10px;
    display: inline-block;
}

.zoomOutLeft {
    animation: zoomOutLeft 1s both infinite;
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }
    100% {
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0);
        transform-origin: left center
    }
}
Run codeTry it yourself

Zoom Out Right

The zoomOutRight animation shrinks an element while moving it to the right, producing a quick and clean exit effect.

Zoom Out Right Animation
HTML
<div class="box zoomOutRight" >Zoom Out Right Animation</div>
CSS
.box {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #088dce;
    color: #fff;
    padding: 10px 10px;
    display: inline-block;
}

.zoomOutRight {
    animation: zoomOutRight 1s both infinite;
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }
    100% {
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0);
        transform-origin: right center
    }
}
Run codeTry it yourself