1
Ich habe ein Problem zu bewältigen. Ich habe Animation unten. Wie kann ich es durchlaufen? Ich meine, wenn die Animation endet, möchte ich es erneut starten. Jede Hilfe wäre großartig!Wie Schleife css3 Animation?
Entschuldigung für die Änderungen. Ich habe immer noch eine Nachricht erhalten, dass meine Nachricht hauptsächlich aus Code besteht. Ich schreibe das, um das zu umgehen. Bitte bearbeiten Sie dies. Vielen Dank ............
/* 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>
aber dann beginnen alle Elemente sich zu überlappen und ich habe "blink" -Effekt und es ist nicht das, was ich tun möchte – MMPL1
@ MMPL1 Sie müssen auch die Animationen ändern und sie alle genau die gleiche Dauer machen, damit sie können Schleife zusammen. – Blazemonger
@Blazemonger gibt es eine Möglichkeit, dies mit jQuery zu tun? – MMPL1