Transitioning images with css3 - KeyFrames

Question

Transitioning images with css3 - KeyFrames

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I'm trying to make an animation with automatic image swapping using @keyframes of css3 . I am copying and pasting the example code, but to no avail. The transition between the images is occurring in a "crazy" way. Look at 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"/><imgclass="top" src="https://peregrinacultural.files.wordpress.com/2009/08/imagem-266.jpg"/><imgclass="left" src="http://s3.amazonaws.savoir.com.br/cea.com.br/imagem/cadastrocqlv/imagem/cadastrocqlv-53440.jpg" />
</div>

</body>
</html>

css css3

asked by anonymous 12.01.2016 / 18:37

2 answers

1

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

In your keyframes , you have to distribute the time between the images, as in the example below I'm 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, its animation-timing-function is as ease-in-out , if you want a linear division of time, 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"/><imgsrc="http://cdn.flaticon.com/svg/105/105027.svg" />
  <img src="http://cdn.flaticon.com/svg/105/105029.svg"/><imgsrc="http://cdn.flaticon.com/svg/105/105052.svg" />
</div>

Now an example where the animation handles the background-image direct 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>

12.01.2016 / 19:25

When choosing a company to connect to the Database Hibernate JPQL for multiple likes

score 1 · Accepted Answer

The problem occurs because you need to change the time values 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. Here's what the process looks like:

t = (a + b) * n

Where:

a = Time each image will be visible; Let's 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%
  100% - (b / t * 100%)
  5- 100%

That is:

2- (5/18) * 100 = 27.77; Home 3 - ((5 + 1) / 18) * 100 = 33.33; Home 100 - ((1/18) * 100) = 94.44;

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

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

Lastly, we only need to define the delay time 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 3rd as you should follow the DOM hierarchy. That is, the 3rd image is above all, so it should animate first to leave first.

See an example: link

Important

Remove this property: animation-direction: alternate;

It causes the animation to "go back and forth" instead of going into a cycle. That is, it will animate the images in that order: 1 - 2 - 3 - 2 - 1. Instead of: 1- 2- 3- 3-