CODEWITHSUNDEEP
htmlcssanimationcss-animations
dingo_d
dingo_d

Reputation: 11670

Adding fade transition between animation

My problem looks like this:

.container {
  width: 200px;
  height: 170px;
  display: inline-block;
  position: relative;
}
.image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-background-size: cover!important;
  background-size: cover!important;
  background-repeat: no-repeat!important;
  animation: image 8s linear 1s infinite;
  animation-timing-function: steps(1);
}
@keyframes image {
  20% {
    background-position: 25% center;
  }
  40% {
    background-position: 50% center;
  }
  60% {
    background-position: 75% center;
  }
  80% {
    background-position: 100% center;
  }
}
<div class="container">
  <div class="image" style="background:url(http://i.imgur.com/GX23d5Y.jpg)"></div>
</div>

I have a long image that consists of say 5 images stitched together, and I'm animating its background-position in a similar manner.

Currently the transition is happening, but in steps, so each image 'blinks'.

I was wondering if it's possible to have some kind of fade in/out along with the background-position change. I tried inserting 

0% { opacity:1; }
20% { background-position: 25% center; opacity:0; }
21% { opacity:1; }

Into my animation, but I couldn't get a good fade in/out effect.

Any advice on how to do it (without inserting multiple images like here) is appreciated.

Upvotes: 3

Views: 150

Answers (1)

Harry
Harry

Reputation: 89750

Assuming I understood your question correctly, you need two animations where one fades the images in & out in a linear manner whereas the other shifts the background position in a step-wise manner.

.image {
  background-image: url(http://i.imgur.com/GX23d5Y.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: image 8s steps(1) 1s infinite, fadein 8s linear 1s infinite;
  opacity: 0;
}
@keyframes image {
  20% {background-position: 25% center;}
  40% {background-position: 50% center;}
  60% {background-position: 75% center;}
  80% {background-position: 100% center;}
}
@keyframes fadein {
  10%  {opacity: 1;}
  20%  {opacity: 0;}
  30%  {opacity: 1;}
  40%  {opacity: 0;}
  50%  {opacity: 1;}
  60%  {opacity: 0;}
  70%  {opacity: 1;}
  80%  {opacity: 0;}
  90%  {opacity: 1;}
  100% {opacity: 0;}
}

As you can see, the image animation does exactly what you seem to be having already (that is, shift the background-position). The second animation does the following:

  • Between 0% and 10%, it changes opacity in a linear manner from 0 to 1. This makes it look as though the first part of the image is fading in on load.
  • At 20% (exactly the same time when the position is shifted to the second image), opacity again becomes 0. This hides the image temporarily.
  • Then after a short while at 30% we animate the opacity back again to 1 which gives the fade in appearance to the second part of the image.
  • Similar pattern is followed for the 3rd, 4th and 5th parts of the image also. That is for the first 10%, the image fades in and for the next 10% it fades out.

  • Finally at 100%, the opacity becomes 0 again because we want the first part of the image to fade-in during the next cycle.

    .container {
  width: 200px;
  height: 170px;
  position: relative;
}
.image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(http://i.imgur.com/GX23d5Y.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: image 8s steps(1) 1s infinite, fadein 8s linear 1s infinite;
  opacity: 0;
}
@keyframes image {
  20% {background-position: 25% center;}
  40% {background-position: 50% center;}
  60% {background-position: 75% center;}
  80% {background-position: 100% center;}
}
@keyframes fadein {
  10%  {opacity: 1;}
  20%  {opacity: 0;}
  30%  {opacity: 1;}
  40%  {opacity: 0;}
  50%  {opacity: 1;}
  60%  {opacity: 0;}
  70%  {opacity: 1;}
  80%  {opacity: 0;}
  90%  {opacity: 1;}
  100% {opacity: 0;}
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <div class="image"></div>

</div>

  • The keyframe breakup used in the snippet results in a continuous fade in and out of image parts (that is, the image stays at opacity: 1 only for a very short amount of time). If you need to give a break, just modify the frames accordingly. A sample is available in the below snippet:

    .container {
  width: 200px;
  height: 170px;
  position: relative;
}
.image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(http://i.imgur.com/GX23d5Y.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: image 16s steps(1) 1s infinite, fadein 16s linear 1s infinite;
  opacity: 0;
}
@keyframes image {
  20% {background-position: 25% center;}
  40% {background-position: 50% center;}
  60% {background-position: 75% center;}
  80% {background-position: 100% center;}
}
@keyframes fadein {
  5%  {opacity: 1;}
  15%  {opacity: 1;}
  20%  {opacity: 0;}
  25%  {opacity: 1;}
  35%  {opacity: 1;}
  40%  {opacity: 0;}
  45%  {opacity: 1;}
  55%  {opacity: 1;}
  60%  {opacity: 0;}
  65%  {opacity: 1;}
  75%  {opacity: 1;}
  80%  {opacity: 0;}
  85%  {opacity: 1;}
  95%  {opacity: 1;}
  100% {opacity: 0;}
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <div class="image"></div>

</div>

Upvotes: 1

Related Questions