CODEWITHSUNDEEP
css
lolikols
lolikols

Reputation: 87

Transition from one image to another

currently I'm using this code:

#div { background-image: url('imageurl.com'), url('imageurl2.com'); position: absolute !important; right: 0; left: 0; height: 210px !important; display: table-cell !important; vertical-align: middle !important;}

@keyframes FadeInOut {
 0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#div img.top {
animation-name: FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

I'm actually trying to implement the code from Demo 3 on this website: http://css3.bradshawenterprises.com/cfimg/

In that demo, there are two images in one div and the code is just fading the first one in and out on a timer. I tried implementing this myself using the above code, but it's fading anything in and out. Does anyone know what I'm missing?

Upvotes: 2

Views: 7608

Answers (2)

godblessstrawberry
godblessstrawberry

Reputation: 5048

here's the implementation, they use separate <img> tags to show/hide images: they are absolutely positioned one above the other, that one which is on top is just showing and hiding by the animation (which changes its opacity) - so the bottom one just becomes visible when top one has opacity = 0

@keyframes cf3FadeInOut {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#cf3 img.top {
  animation-name: cf3FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  animation-direction: alternate;
}
#cf3 img {
  position: absolute;
  left: 0;
}
#cf3 {
  position: relative;
  height: 281px;
  width: 450px;
  margin: 0 auto;
}
<div id="cf3" class="shadow">
  <img class="bottom" src="http://css3.bradshawenterprises.com/images/Turtle.jpg">
  <img class="top" src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg">
</div>

Upvotes: 1

Sergey Tretyak
Sergey Tretyak

Reputation: 334

If you need implementation through background-image you can use pseudo-element:

#cf2 {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
  background-image: url("http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg");
}

#cf2::after{
  content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url("http://css3.bradshawenterprises.com/images/Turtle.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
}

@keyframes cf3FadeInOut {
  0% {
    opacity:1;
  }
  45% {
    opacity:1;
  }
  55% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

#cf2::after {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
<div id="cf2">
</div>

Upvotes: 6

Related Questions