How to loop css3 animation?

Question

I have problem to deal with. I have animation below. How can I loop it? I mean when animation ends I want to start it again. Any help would be great!

Sorry for the changes. I still got message that my message is mostly code. I write this to bypass this. Please edit this. Thank you so much............

/* 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>

Derlin · Accepted Answer · 2017-08-30 13:03:05Z

3

Just replace 1 by infinite in your animation property:

.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;
}

For the whole animation to work properly, you need every part to take exactly the same amount of time. For that, you can either modify the animation itself, or add delay between iterations. See https://css-tricks.com/css-keyframe-animation-delay-iterations/ for more info.

edited Aug 30, 2017 at 13:03

answered Aug 30, 2017 at 12:53

Derlin

9,9212 gold badges34 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

MMPL1 Over a year ago

but then all elements start overlaping each other and I have "blink" effect and it's not what I want to do

Blazemonger Over a year ago

@MMPL1 You'll also need to modify the animations and make them all the exact same duration, so they can loop together.

MMPL1 Over a year ago

@Blazemonger is there any option to do this with jquery?

Blazemonger Over a year ago

Yes, but you're already using CSS animations, which are preferable anyway.

MMPL1 Over a year ago

@Blazemonger but honestly I don't know how. I create this animation in google web designer and know I'm trying to remove all unnecessary elements and I stucked on looping :/

|

Collectives™ on Stack Overflow

How to loop css3 animation?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related