1
私は対処するのに問題があります。私は以下のアニメーションを持っています。どのようにループすることができますか？私はアニメーションが終了したら、もう一度やり直したい。どんな助けも素晴らしいだろう！css3アニメーションをループする方法は？
ご迷惑をおかけします。私はまだ私のメッセージが主にコードであるというメッセージを受け取りました。私はこれを回避するためにこれを書いています。これを編集してください。ちょうどあなたのanimationプロパティでinfiniteで1を交換
/* 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