CODEWITHSUNDEEP
cssloopscss-transitionscss-animations
Alex Jj
Alex Jj

Reputation: 1393

how to make CSS animation to play every 10 seconds

I have a css animation, which it either repeat infinite or only a certain times. but I would like to play it like 2 times every 5 seconds. Here is my code:

    #countText{
    -webkit-animation-name: color2;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 5s;
}
@-webkit-keyframes color2 {
        0% { }
        25% { text-shadow:-2px -5px 10px #fb0017, -5px 0px 10px #3a00cd, -5px 5px 10px #00ff3a}
        50% { }
        75% { text-shadow:2px 5px 10px #fb0017, 5px 0px 10px #3a00cd, 5px -5px 10px #00ff3a; }
        100% {}
}

Upvotes: 13

Views: 44262

Answers (2)

Sourabh
Sourabh

Reputation: 8482

You can change the keyframes to show animation twice. First from 0% to 20% and next from 20% to 40%, then let it stay like that till 100%. Now change animation-duration to 5s with no animation-delay

#countText {
  animation-name: color;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0s;
}

@keyframes color {
  0% {}
  5%,
  25% {
    text-shadow: -2px -5px 10px #fb0017, -5px 0px 10px #3a00cd, -5px 5px 10px #00ff3a;
  }
  15%,
  35% {
    text-shadow: 2px 5px 10px #fb0017, 5px 0px 10px #3a00cd, 5px -5px 10px #00ff3a;
  }
  40% {
    text-shadow: none;
  }
}
<p id="countText">lorem text</p>

Upvotes: 29

Muhammad Ameen
Muhammad Ameen

Reputation: 165

.shk_this {
  transform: translate3d(0, 0, 0);
  animation-name: shakeMe;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes shakeMe {
  2%, 18% {
      transform: translate3d(-5px, 0, 0);
  }

  4%, 16% {
      transform: translate3d(5px, 0, 0);
  }

  6%, 10%, 14% {
      transform: translate3d(-5px, 0, 0);
  }

  8%, 12% {
      transform: translate3d(5px, 0, 0);
  }
  
  18.1% {
      transform: translate3d(0px, 0, 0);
  }
}
<div class="shk_this">Shake This</div>

Upvotes: 1

Related Questions