1
我有問題要處理。我有下面的動畫。我該如何循環呢？我的意思是當動畫結束時，我想再次啓動它。任何幫助將是偉大的！如何循環css3動畫？
對不起，發生變化。我仍然收到消息說我的消息主要是代碼。我寫這個來繞過這個。請編輯這個。非常感謝你............
/* 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;
}<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>
但是然後所有的元素開始相互重疊，我有「眨眼」的效果，這不是我想要做的 – MMPL1
@ MMPL1您還需要修改動畫並使其具有完全相同的持續時間，以便它們可以循環在一起。 – Blazemonger
@Blazemonger是否有任何選項可以用jQuery來做到這一點？ – MMPL1