Question

我想用css动画2张图片，其中1张图片开始并停留5秒钟，另一张图片随后停留5秒钟，并且它们全部以无限循环再次开始。我只做了一次，但是一旦经过第一次循环，它们都会在没有第二次图像延迟的情况下同时生成动画。请查看下面的代码：

CSS：

img.coke {
position: relative;

animation-name: FadeInOut;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

img.fanta {
position: relative;
opacity:0;
animation-name: FadeIn;
animation-duration: 5s;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes FadeInOut {
0% {
 opacity:0;
}

50% {
opacity:1;
}

100% {
 opacity:1;
}
}

@keyframes FadeIn {
 0% {
 opacity:0;
 }

 100% {
  opacity:1;
 }
 }

HTML：

<div id ="imgo">
<img class = "coke"  src="http://media.wktv.com/images/AP_985452110986.png"   />
<img class ="fanta"  src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" />
</div>

Answer 1

正如您所注意到的，animation-delay只是用来延迟动画开始的时间：

指定动画何时开始。这使动画序列在应用于元素后的某个时间开始。

但是你可以根据动画的%使用已经控制不透明度状态的逻辑：

＆＃13;

img {
  max-height: 200px;
}
img.coke {
  position: relative;
  animation: FadeInOut 2s infinite alternate ease-in-out;
}
img.fanta {
  position: relative;
  opacity: 0;
  animation: FadeIn 2s infinite alternate ease-in-out;
}
@keyframes FadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes FadeIn {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

＆＃13;

<div id="imgo">
  <img class="coke" src="http://media.wktv.com/images/AP_985452110986.png" />
  <img class="fanta" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" />
</div>

＆＃13;

Answer 2

.coke {
    height: 100px;
    opacity: 0;
    -webkit-animation: example1 10s infinite; /* Safari 4+ */
    -moz-animation:    example1 10s infinite; /* Fx 5+ */
    -o-animation:      example1 10s infinite; /* Opera 12+ */
    animation:         example1 10s infinite; /* IE 10+, Fx 29+ */
}

.fanta {
    height: 100px;
    opacity: 0;
    -webkit-animation: example2 10s infinite; /* Safari 4+ */
    -moz-animation:    example2 10s infinite; /* Fx 5+ */
    -o-animation:      example2 10s infinite; /* Opera 12+ */
    animation:         example2 10s infinite; /* IE 10+, Fx 29+ */
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes example1 {
    10%  {opacity: 0;}
    15%  {opacity: 1;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes example1 {
    10%  {opacity: 0;}
    15%  {opacity: 1;}
    100% {opacity: 1;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example2 {
    45%  {opacity: 0;}
    50%  {opacity: 1;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes example2 {
    45%  {opacity: 0;}
    50%  {opacity: 1;}
    100% {opacity: 1;}
}

尝试操纵动画百分比

示例：https://jsfiddle.net/o4226gmd/

CSS图像动画循环

2 个答案: