How to make a background image zoom in and out slowly

html css css-transitions css-animations

19,534

Solution 1

There is mainly 2 different ways, using either animation or transition.

animation is normally better when one want something running all the time, and transition is more efficient for e.g. hover effects.

Here is a start using animation.

Stack snippet

html, body {
  height: 100%;
  margin: 0
}

@keyframes breath {
  0%   { background-size: 100% auto; }
  50% { background-size: 140% auto; }
  100% { background-size: 100% auto; }
}

#bkg{
  width: 100%;
  height: 100%;
  animation: breath 4s linear infinite;
  background: url("http://wallpapercave.com/wp/LXR5gFx.png") center center no-repeat;
}

<div id="bkg"></div>

And here is another using transition and :hover.

Stack snippet

html, body {
  height: 100%;
  margin: 0
}

#bkg {
  width: 180px;
  height: 180px;
  position: relative;
  overflow: hidden;
}

#bkg::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url("http://wallpapercave.com/wp/LXR5gFx.png");
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .5s linear;
}

#bkg:hover::before{
  transform: scale(1.3);
}

<div id="bkg"></div>

Solution 2

You want to use a separate element with transform(), for three reasons:

It will use the GPU to render the element
It will be more performant in terms of FPS more on that
Animating the body background will cause the entire page to repaint on every frame

Also, animating the background-position will create a juggle effect, as the browser will try to round the position to the nearest pixel.

With a transform: scale() on the other hand, the browser will position the element with subpixel rendering, resulting in a way smoother movement.

@keyframes breath {
  from { 
    transform: scale(1);
  }
  to {
    transform: scale(1.05)
  }
}

div{
  width: 100vw;
  height: 100vh;
  animation: breath 2s ease-in-out alternate infinite;
  background: url("https://www.placecage.com/800/600");
  background-size: cover;
}

body {
  margin: 0;
}

<div></div>

Solution 3

What you are looking for is called keyframes.

This is the code in the following example.

@keyframes zoom {
0% { transform:scale(1,1); }
50% { transform:scale(1.2,1.2); }
100% {
    transform:scale(1,1); 
}
}

Css transform has properties which can br run "frame by frame", in the above, we want the picture to be zoomed by the factor 1.2 on the x and y axis by the time 50% of the animation have passed. We start at no zoom, zoom it by 20% and then we go back tot he original state.

And here is how we add this to the class:

animation: zoom 30s infinite;

just add that to your class and it will run. There are more parameters, but this gets complicated for someone who is unfamiliar with, thus, an easy example.

Here the link to the codepen in action

http://codepen.io/damianocel/pen/QyqRgw

19,534

Author by

Thomas Croonen

Updated on June 07, 2022

Comments

Thomas Croonen almost 2 years
I would like to bring some more interactive elements into my webpage.

What i've seen before on some website's, is that the background image zoom's in slowly and back out. So that it looks more like a living thing.

I've been searching on the internets and here. But i dont know how this technique is done exactly and i dont know the name for this kind of effect.

I also think this should be fairly easy to achiev this with some CSS3 and HTML5.

The questions are:
- Is there a name for this effect and what is it called?
- Can it be done with pure CSS?
- Is there a sample online availble for the basics?
Here is the html i had in mind:
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test page</title>
        <style>
            body {
                background-image: url("http://wallpapercave.com/wp/LXR5gFx.png");
                background-size: 100% auto;
            }
        </style>
    </head>

    <body>

    </body>
</html>
```
The goal is to let the background image zooming in slowly and back out. Like it is breathing.