Question

我有问题需要处理。我下面有动画。我怎么能循环呢？我的意思是当动画结束时我想再次启动它。任何帮助都会很棒！

抱歉更改。我仍然得到消息，我的消息主要是代码。我写这个是为了绕过这个。请编辑这个。非常感谢............

＆＃13;

/* resets */

p,
h1,
h2,
h3 {
  margin: 0px;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}


/* styling elements */

.animation-content {
  width: 750px;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.main-background {
  position: absolute;
  width: 750px;
  height: 100px;
  left: 0px;
  top: 0px;
}

.splash {
  position: absolute;
  width: 288px;
  height: 260px;
  left: 439px;
  overflow: visible;
  visibility: visible;
  top: -262px;
}

.first-paragraph {
  position: absolute;
  width: 196px;
  height: 24px;
  left: 468px;
  top: 42px;
  opacity: 0;
}

.logotypes {
  position: absolute;
  width: 182px;
  height: 47px;
  top: 30px;
  left: 475px;
  opacity: 0;
}

.pec-address {
  position: absolute;
  width: 192px;
  height: 23px;
  top: 43px;
  left: 470px;
  overflow: visible;
  opacity: 0;
}


/* animations */


/* first paragraph */

@keyframes first-paragraph-animation {
  0% {
    opacity: 0;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
  }
  16.67% {
    opacity: 1;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
  }
  83.33% {
    opacity: 1;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
  }
  100% {
    opacity: 0;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
  }
}

@-webkit-keyframes first-paragraph-animation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease;
  }
  16.67% {
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
  83.33% {
    opacity: 1;
    -webkit-animation-timing-function: ease;
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: linear;
  }
}

.animation-content .first-paragraph-animation {
  animation: first-paragraph-animation 3s linear 1.002s 1 normal forwards;
  -webkit-animation: first-paragraph-animation 3s linear 1.002s 1 normal forwards;
  -moz-animation: first-paragraph-animation 3s linear 1.002s 1 normal forwards;
}


/* logotypes */

@keyframes logotypes-animation {
  0% {
    opacity: 0;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
  }
  16.72% {
    opacity: 1;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
  }
  83.68% {
    opacity: 1;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
  }
  100% {
    opacity: 0;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
  }
}

@-webkit-keyframes logotypes-animation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease;
  }
  16.72% {
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
  83.68% {
    opacity: 1;
    -webkit-animation-timing-function: ease;
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: linear;
  }
}

.animation-content .logotypes-animation {
  animation: logotypes-animation 2.99s linear 4.002s 1 normal forwards;
  -webkit-animation: logotypes-animation 2.99s linear 4.002s 1 normal forwards;
  -moz-animation: logotypes-animation 2.99s linear 4.002s 1 normal forwards;
}


/* www address */

@keyframes address-animation {
  0% {
    opacity: 0;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
  }
  17.08% {
    opacity: 1;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
  }
  83.26% {
    opacity: 1;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
  }
  100% {
    opacity: 0;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
  }
}

@-webkit-keyframes address-animation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease;
  }
  17.08% {
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
  83.26% {
    opacity: 1;
    -webkit-animation-timing-function: ease;
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: linear;
  }
}

.animation-content .address-animation {
  animation: address-animation 3.016s linear 6.992s 1 normal forwards;
  -webkit-animation: address-animation 3.016s linear 6.992s 1 normal forwards;
  -moz-animation: address-animation 3.016s linear 6.992s 1 normal forwards;
}


/* splash */

@keyframes splash-animation {
  0% {
    top: -262px;
    left: 439px;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
  }
  9.11% {
    top: -75px;
    left: 439px;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
  }
  90.98% {
    top: -75px;
    left: 439px;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
  }
  100% {
    top: 101px;
    left: 439px;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
  }
}

@-webkit-keyframes splash-animation {
  0% {
    top: -262px;
    left: 439px;
    -webkit-animation-timing-function: linear;
  }
  9.11% {
    top: -75px;
    left: 439px;
    -webkit-animation-timing-function: linear;
  }
  90.98% {
    top: -75px;
    left: 439px;
    -webkit-animation-timing-function: ease;
  }
  100% {
    top: 101px;
    left: 439px;
    -webkit-animation-timing-function: linear;
  }
}

.animation-content .splash-animation {
  animation: splash-animation 11s linear 0s 1 normal forwards;
  -webkit-animation: splash-animation 11s linear 0s 1 normal forwards;
  -moz-animation: splash-animation 11s linear 0s 1 normal forwards;
}

＆＃13;

<div id="animation-content" class="animation-content">
  <img src="http://funkyimg.com/i/2wSFx.jpg" class="main-background" id="main-background">
  <img src="http://funkyimg.com/i/2wSFz.png" class="splash splash-animation" alt="splash" id="splash">
  <img src="http://funkyimg.com/i/2wSFy.png" class="first-paragraph first-paragraph-animation" id="przepis" alt="">
  <img src="http://funkyimg.com/i/2wSFB.png" class="logotypes logotypes-animation" alt="logotypy" id="logotypes">
  <img src="http://funkyimg.com/i/2wSFA.png" class="pec-address address-animation" id="adres-www" alt="">
</div>

＆＃13;

Answer 1

只需在1媒体资源中infinite替换animation：

.animation-content .splash-animation {
  animation: splash-animation 11s linear 0s infinite normal forwards;
  -webkit-animation: splash-animation 11s linear 0s infinite normal forwards;
  -moz-animation: splash-animation 11s linear 0s infinite normal forwards;
}

要使整个动画正常工作，您需要每个部分花费相同的时间。为此，您可以修改动画本身，也可以在迭代之间添加延迟。有关详细信息，请参阅https://css-tricks.com/css-keyframe-animation-delay-iterations/。

如何循环css3动画？

1 个答案: