13

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% {}
}
Alex Jj
  • 1,343
  • 10
  • 19
  • 30

2 Answers2

26

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 {
      -webkit-animation-name: color2;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -webkit-animation-delay: 0s;
  }
  @-webkit-keyframes color2 {
      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;
    }
}

Demo

Sourabh
  • 8,243
  • 10
  • 52
  • 98
1

.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>
Muhammad Ameen
  • 139
  • 1
  • 5
  • Welcome to Stack Overflow. Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). – Sfili_81 Jun 16 '21 at 14:21