CODEWITHSUNDEEP
jquerycssloopsanimation
Sherif Galal
Sherif Galal

Reputation: 13

Multiple Text Animation Loop

I saw this project and I've been trying to make the animation-iteration-count:infinite, but every time I try the texts overlap, what I have in mind is to make the text repeat again every time it stops on text 3. 

@import 'https://fonts.googleapis.com/css?family=Baloo+Paaji';

$primary-color: #1e90ff;
$secondary-color: #ffe221;
$tertiary-color: #ffffff;

html, body {
  height: 100%;
}

body {
  font-family: 'Baloo Paaji', cursive;
  background: #1e90ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  height: 220px;
  position: relative;
}

#color {
	color: #ffe221;
}

h1, h2 {
  font-size: 75px;
  text-transform: uppercase;}

  span {
    width: 100%;
    float: left;
    color: #ffffff;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    transform: translateY(-50px);
    opacity: 0;
    animation-name: titleAnimation;
    animation-timing-function: ease;
    animation-duration: 3s;


  }

h1 span {
  animation-delay: 0.6s;
  -webkit-animation-fill-mode: forwards;}

  &:first-child {
    animation-delay: 0.7s;
  }

  &:last-child {
    color: #ffe221;
    animation-delay: 0.5s;
  }
}
.title {
	margin: -4em 0 0 0;
}
h2 {
  top: 0;
  position: absolute;}

  span {
    animation-delay: 4.1s;
    -webkit-animation-fill-mode: forwards;}

    &:first-child {
      animation-delay: 4.2s;
    }

    &:last-child {
      color:  #ffe221;
      animation-delay: 4s;
    }

h2 {
  top: 0;
  position: absolute;}

.slide-two{
    animation-delay: 8.1s;
    -webkit-animation-fill-mode: forwards;}

    &:first-child {
      animation-delay: 8.2s;
    }

    &:last-child {
      color:  #ffe221;
      animation-delay: 8s;
    }
  



@keyframes titleAnimation {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  80% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
  }
}
<html>
<head>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<section class="container">
  <h1 class="title">
    <span>this is </span>
    <span id="color">text one</span>
  </h1>
  
  <h2 class="title">
    <span>and</span>
    <span>this is <em id="color">text</em></span>
    <span>two</span>
  </h2>

   <h2 class="slidetwo">
    <span class="slide-two">while this  </span>
    <span id="color"  class="slide-two">is</span>
    <span class="slide-two">text three</span>
  </h2>
</section>


</body>
</html>

Upvotes: 1

Views: 4814

Answers (1)

Rob Monhemius
Rob Monhemius

Reputation: 5144

This seems to work:

@import 'https://fonts.googleapis.com/css?family=Baloo+Paaji';

html, body {
  height: 100%;
}

body {
  font-family: 'Baloo Paaji', cursive;
}

.container {
  width: 100%;
  height: 220px;
  position: relative;
}

.container>div {
  font-size: 75px;
  text-transform: uppercase;
  color: #ffe221;
  opacity: 0;
  height: 0px;
  }
.container>div:nth-child(1){
  animation: animation 12s infinite;
}
.container>div:nth-child(2){
  animation: animation 12s infinite;
  animation-delay: 4s;
}
.container>div:nth-child(3){
  animation: animation 12s infinite;
  animation-delay: 8s;
}
@keyframes animation {
    0% {opacity: 0; height: auto;}
    16% {opacity: 1;}
    33% {opacity: 0; height: 0px;}
    100% {opacity: 0; height: 0px;}
}

}
<html>
<head>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<section class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>


</body>
</html>

I simplified the example a bit. Disadvantage is that you need the know the amount of divs you want to animate for this.

  1. We have 3 divs we will animate seperately, so we want to "overlap" the 3 animations. While the other animation runs there will be a pause in the others. Therefore we calculate 1/3 animation time (33%) and 2/3 delay (33% - 100%) while the other animations run.
  2. Each element will get their own animation assigned by using the :nth-child() selector.
  3. We do not want the animations to run at the same time so we will add an animation delay of 1/3 the animation time to the second element and 2/3 animation time to the third element.

PS: While this works, you need to know the amount of divs you have and you cannot use display: none. In my opinion it might be easier to use jQuery to do this. Or maybe a combination of jQuery and transitions. That would allow you to use display: none and also use a variable amount of divs.

Upvotes: 1

Related Questions