Image Transition with css3 - Keyframes

Asked

Viewed 5,893 times

1

I’m trying to make an animation with automatic image exchange using the @keyframes of css3. I am copying and pasting the sample code, but without success. The transition between the images is taking place in a "crazy" way. See the snippet.

The animation I want to do is DEMO 3 - with MULTIPAS IMAGES: LINK - DEMO 3

#cf {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
}
#cf img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;
}
#cf img.top {
    animation-name: fadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-direction: alternate;
} 
#cf img.left {
    animation-name: fadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-direction: alternate;
} 
@keyframes fadeInOut {
    0% {opacity:1;}
    17% {opacity:1;}
    25% {opacity:0;}
    92% {opacity:0;}
}
#cf img:nth-of-type(3) {
    animation-delay: 2s;
}
	
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>

<div id="cf">
  <img class="bottom" src="http://www.podagaita.com/img/fotos/imagem%20de%20aves%201.jpg" />
  <img class="top" src="https://peregrinacultural.files.wordpress.com/2009/08/imagem-266.jpg" />
  <img class="left" src="http://s3.amazonaws.savoir.com.br/cea.com.br/imagem/cadastrocqlv/imagem/cadastrocqlv-53440.jpg" />
</div>

</body>
</html>

css css3

  • The link you provided cannot be found. What about the problem is actually happening? What is not working?

  • I fixed the @Celsomtrindade link I want to make an automatic transition between css3 images

  • How many images you are using to make this effect?

  • I was wrong. It is the SECOND example of DEMO 3. MULTIPLE IMAGES!!! I want to make the transition with 3 images.

  • @Celsomtrindade I added a Snippet to the code. In it you can see how the image transition is with the "unregulated" time. This is the problem

2 answers

1

in case, you need to work with animation and not with transition... another point is that you need to use the prefix in the animation-delay.

In his keyframes, you have to distribute the time between the images, as in the example below I am working with 4 images, so I gave 25% of the time for each image, if you want to work with 3 images, then it will be 33%.

Finally, his animation-timing-function is as ease-in-out, if you want a linear time division, use linear.

#container img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 256px;
  height: 256px;
  
  opacity: 0;
  
  -webkit-animation: opacity 8s linear infinite;
  -moz-animation: opacity 8s linear infinite;
  animation: opacity 8s linear infinite;
}

@keyframes opacity {
  5%, 25%  { opacity:1; } 
  0%, 30%, 100% { opacity:0; }
}

@-moz-keyframes opacity {
  5%, 25%  { opacity:1; } 
  0%, 30%, 100% { opacity:0; }
}

@-webkit-keyframes opacity {
  5%, 25%  { opacity:1; }
  0%, 30%, 100% { opacity:0; }
}

#container img:nth-child(1) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  animation-delay: 0;
}

#container img:nth-child(2) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

#container img:nth-child(3) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s
  animation-delay: 4s;
}

#container img:nth-child(4) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
}
<div id="container">
  <img src="http://cdn.flaticon.com/svg/105/105026.svg" />
  <img src="http://cdn.flaticon.com/svg/105/105027.svg" />
  <img src="http://cdn.flaticon.com/svg/105/105029.svg" />
  <img src="http://cdn.flaticon.com/svg/105/105052.svg" />
</div>

Now an example where animation manipulates the background-image right on the content. 

#container {
  position: relative;
  background-size: cover;
  width: 256px;
  height: 256px;
  
  -webkit-animation: imagens 8s linear infinite;
  -moz-animation: imagens 8s linear infinite;
  animation: imagens 8s linear infinite;
}

#progresso {
  position: absolute;
  bottom: -6px;
  left: 0px;
  width: 0%;
  height: 5px;
  background-color: black;
  opacity: 0.5;
  
  -webkit-animation: progress 2s linear infinite;
  -moz-animation: progress 2s linear infinite;
  animation: progress 2s linear infinite;
} 

@-webkit-keyframes imagens {
  0%, 20%, 100% { background-image: url('http://cdn.flaticon.com/png/256/105026.png'); }
  25%, 45% { background-image: url('http://cdn.flaticon.com/png/256/105027.png'); }
  50%, 70% { background-image: url('http://cdn.flaticon.com/png/256/105029.png'); }
  75%, 95% { background-image: url('http://cdn.flaticon.com/png/256/105052.png'); }
}

@-moz-keyframes imagens {
  0%, 20%, 100% { background-image: url('http://cdn.flaticon.com/png/256/105026.png'); }
  25%, 45% { background-image: url('http://cdn.flaticon.com/png/256/105027.png'); }
  50%, 70% { background-image: url('http://cdn.flaticon.com/png/256/105029.png'); }
  75%, 95% { background-image: url('http://cdn.flaticon.com/png/256/105052.png'); }
}

@keyframes imagens {
  0%, 20%, 100% { background-image: url('http://cdn.flaticon.com/png/256/105026.png'); }
  25%, 45% { background-image: url('http://cdn.flaticon.com/png/256/105027.png'); }
  50%, 70% { background-image: url('http://cdn.flaticon.com/png/256/105029.png'); }
  75%, 95% { background-image: url('http://cdn.flaticon.com/png/256/105052.png'); }
}

@-webkit-keyframes progress {
  0% { width: 0%; }
  80% { width: 100%; }
  100% { width: 0%; }
}

@-moz-keyframes progress {
  0% { width: 0%; }
  80% { width: 100%; }
  100% { width: 0%; }
}

@keyframes progress {
  0% { width: 0%; }
  80% { width: 100%; }
  100% { width: 0%; }
}
<div id="container">
  <div id="progresso"></div>
</div>

  • Even though the other fellow answered first, his answer came in a different way but also performs the purpose very well, thanks also @Tobymosque. If it’s not too much to ask, could you help me with one more thing? The images need to be covered (background-size:cover). I am trying to input directly into the <img> tag and also into the css file, but without success. How can I do this?

  • @Zkk, in the case of background-size:cover, how to set the image as a background-image, in this case the ideal is not to use an element <img> rather a div, I advise you to apply the background-image right in the div#container and use the @keyframes to replace the background.... added an example of how to do it.

  • @Zkk, I took the opportunity to add a bonus, a progress bar for the image transition.

  • I understand it works, but it’s kind of confusing to logic: 0% { width: 0%; }&#xA; 80% { width: 100%; }&#xA; 100% { width: 0%; } rsrsrsrs

1


The problem is because you need to change the values of time and % of the keyframe to match the number of images and animation and transition time you want to use, which is what the tutorial recommends. See how the process would be:

t=(a+b)*n

Where:

a= Time each image will be visible; We will use 5s. b= Animation time; Let’s use 1s. n= Total images; Let’s use 3.

t=(5+1)*3; Logo: t= 18;

Now we need to calculate the values of % of keyframes.

1-0%
2- a/t*100%
3- (a+b)/t*100% = 1/n*100%
4- 100%-(b/t*100%)
5-100%

That is to say:

2- (5/18)*100 = 27,77;
3- ((5+1)/18)*100 = 33,33;
4- 100-((1/18)*100) = 94,44;

Now just round up the values and apply to the keyframe.

@keyframes cf4FadeInOut {
    0% {opacity:1;}
    28% {opacity:1;}
    33% {opacity:0;}
    94% {opacity:0;}
    100% {opacity:1;}
}

Finally we just need to define the time of delay for each image, which would be: Visible time + transition time * image position.

(5+1)*1 (para 2ª img) and (5+1)*2 (para 1ª img)

#cf4a img:nth-of-type(1) {
    animation-delay: 12s;
}
#cf4a img:nth-of-type(2) {
    animation-delay: 6s;
}
#cf4a img:nth-of-type(3) {
    animation-delay: 0s;
}

You need to start from the 3rd because you must follow the DOM hierarchy. That is, the third image is above all, so she should cheer first to leave first.

Take an example: https://jsfiddle.net/q8wq4cm6/1/

Important

Remove this property: animation-direction: alternate;

It causes the animation to "come and go" rather than enter a cycle. That is, it will animate the images in this order: 1 - 2 - 3 - 2 - 1. Instead of: 1-2-3-1-2-3.

  • Thanks for the help and the great explanation @Celsom Trindade! If it’s not too much to ask, could you help me with one more thing? The images need to be covered (background-size:cover). I am trying to introduce them directly into the <img> tag and also into the css file, but without success. How can I do that?

  • 1

    Yes, that’s easy, just replace the tags img for div with background. Just detail, they should have the same class, because you control them by nth-of-type(n). See: https://jsfiddle.net/q8wq4cm6/2/

  • I didn’t know that the cover works only on the div . I was "beating myself up" declaring on the tag imgand also in the style sheet. Anyway, problem solved, thanks again Celsom!!

  • It even works on the tag img but since by nature it assigns the values of width and height based on the image (if not specified in css) there will be neither width nor height for the image, this may be why it did not work for you. In fact, it just had no dimension. But in this case it is better to use in a div, because if you fill in the img src, it will overwrite the content.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.