Add a delay to the Buzz Out animation after each loop

Asked

Viewed 29 times

0

Hello, I’m trying to put a delay in my Buzz out animation after each loop, I’m applying it in a text, which is inside the p tag. I’ve looked for several answers and most of them say to put the first percentage at 33%, so that there is a delay, I understood the concept, but it doesn’t seem to apply to my problem.

My html code

<div className={style.container}>
      <div className={style.divImage}>
        <img src={image} alt="" className={style.image} />
      </div>
      <p onClick={onClick} className={style.text}>
        {text}
      </p>
    </div>

My css code

.text {
  font-family: RobotoCondensedBold;

  color: #7c7c7c;
  font-size: 22px;
  animation: text 1s linear infinite;
  animation-delay: 1s;
  cursor: pointer;
}

/* @-webkit-keyframes text {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
} */
@keyframes text {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.text {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.text:hover,
.text:focus,
.text:active {
  -webkit-animation-name: text;
  animation-name: text;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

If anyone can tell me what I’m doing wrong I’ll be very grateful, Thank you!

javascript html css react effect

1 answer

2


Peter, it seems to me that you don’t quite understand the concept, wherever you read it, so I’ll explain that then you can adjust it however you want.

Note that your animation is 1s and is divided into 10 10% intervals, totaling 100%, okay. To make it easier I put a "delay" in your 50% animation, that is. From 0% to 50% your animation is stopped, as the animation has 1s, she’s gonna stand there 500ms before repeating the loop. And from 50% up to 100% I divided again into a range of 10 Steps, now getting 50%, 55%, 60%, 65%, etc, up to 100%.

Another ex: with this same animation if you change to 2s, she’s gonna stay 1s parada and 1s animada, for what matters is the division of @keyframes over the time of implementation.

The detail is that now the animation that took place in 1s now occurs in 500ms, and it will seem that it is more accelerated, but adjusting the values you can leave to your taste, so I will leave this part for you to solve case you want.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.text {
font-family: RobotoCondensedBold;

color: #7c7c7c;
font-size: 22px;
animation: text 1s linear infinite;
/* animation-delay: 1s; */
cursor: pointer;
}

/* @-webkit-keyframes text {
10% {
  -webkit-transform: translateX(3px) rotate(2deg);
  transform: translateX(3px) rotate(2deg);
}
20% {
  -webkit-transform: translateX(-3px) rotate(-2deg);
  transform: translateX(-3px) rotate(-2deg);
}
30% {
  -webkit-transform: translateX(3px) rotate(2deg);
  transform: translateX(3px) rotate(2deg);
}
40% {
  -webkit-transform: translateX(-3px) rotate(-2deg);
  transform: translateX(-3px) rotate(-2deg);
}
50% {
  -webkit-transform: translateX(2px) rotate(1deg);
  transform: translateX(2px) rotate(1deg);
}
60% {
  -webkit-transform: translateX(-2px) rotate(-1deg);
  transform: translateX(-2px) rotate(-1deg);
}
70% {
  -webkit-transform: translateX(2px) rotate(1deg);
  transform: translateX(2px) rotate(1deg);
}
80% {
  -webkit-transform: translateX(-2px) rotate(-1deg);
  transform: translateX(-2px) rotate(-1deg);
}
90% {
  -webkit-transform: translateX(1px) rotate(0);
  transform: translateX(1px) rotate(0);
}
100% {
  -webkit-transform: translateX(-1px) rotate(0);
  transform: translateX(-1px) rotate(0);
}
} */
@keyframes text {
0% {
  -webkit-transform: translateX(0) rotate(0);
  transform: translateX(0) rotate(0);
}
50% {
  -webkit-transform: translateX(0) rotate(0);
  transform: translateX(0) rotate(0);
}
55% {
  -webkit-transform: translateX(3px) rotate(2deg);
  transform: translateX(3px) rotate(2deg);
}
60% {
  -webkit-transform: translateX(-3px) rotate(-2deg);
  transform: translateX(-3px) rotate(-2deg);
}
65% {
  -webkit-transform: translateX(3px) rotate(2deg);
  transform: translateX(3px) rotate(2deg);
}
70% {
  -webkit-transform: translateX(-3px) rotate(-2deg);
  transform: translateX(-3px) rotate(-2deg);
}
75% {
  -webkit-transform: translateX(2px) rotate(1deg);
  transform: translateX(2px) rotate(1deg);
}
80% {
  -webkit-transform: translateX(-2px) rotate(-1deg);
  transform: translateX(-2px) rotate(-1deg);
}
85% {
  -webkit-transform: translateX(2px) rotate(1deg);
  transform: translateX(2px) rotate(1deg);
}
90% {
  -webkit-transform: translateX(-2px) rotate(-1deg);
  transform: translateX(-2px) rotate(-1deg);
}
95% {
  -webkit-transform: translateX(1px) rotate(0);
  transform: translateX(1px) rotate(0);
}
100% {
  -webkit-transform: translateX(-1px) rotate(0);
  transform: translateX(-1px) rotate(0);
}
}
.text {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.text:hover,
.text:focus,
.text:active {
-webkit-animation-name: text;
animation-name: text;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
<div className={style.container}>
  <div className={style.divImage}>
    <img src={image} alt="" className={style.image} />
  </div>
  <p class="text">
    {text}
  </p>
</div>

  • 1

    I’m not very familiar with the concept of animation using just css, I ended up getting confused when trying to understand, I thank you for the very detailed explanation, I would like to ask if you wouldn’t have any material to tell me about it, I intend to understand more about these concepts of animations. Thank you very much.

  • Guy on Youtube yourself you find some material, but also I recommend the Mozilla doc, but the main and you train, try to replicate animations and test the properties to go seeing what happens etc...

Browser other questions tagged javascript html css react effect

You are not signed in. Login or sign up in order to post.