How to Play CSS3 Transitions in a Loop

How to play CSS3 transitions in a loop?

CSS transitions only animate from one set of styles to another; what you're looking for is CSS animations.

You need to define the animation keyframes and apply it to the element:

@keyframes changewidth {
  from {
    width: 100px;
  }

  to {
    width: 300px;
  }
}

div {
  animation-duration: 0.1s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Check out the link above to figure out how to customize it to your liking, and you'll have to add browser prefixes.

How to make a CSS transition loop once?

I'm fairly certain it is not possible to loop a transition, you are able to transition from one state to another but not back again in a single transition.

To achieve the result you are looking for you would use an animation instead.

First set up the animation keyframes:

@keyframes glowyellow {
  0% { color: auto; }
  50% { color: yellow; }
  100% { color: auto; }
}

Then to use this on your element:

#sidebar2:target .phonenumber {
  animation: glowyellow 1.4s linear;
}

Use vendor prefixes to support browsers as you are doing in your example.

Here is a fiddle as an example.

CSS loop an animation

Use animation-iteration-count: infinite. Limit the loop with a number value.

<style style="text/css">  div.slide-slow {    width: 100%;    overflow: hidden;  }  div.slide-slow div.inner {    animation: slide-slow 3s;    margin-top: 0%;    animation-iteration-count: infinite;  }  @keyframes slide-slow {    from {      margin-left: 100%;    }    to {      margin-left: 0%;    }  }</style>
<div class="slide-slow">  <div class="inner">    <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">  </div></div>

how to make CSS animation to play every 10 seconds

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

---

Related Topics