animation-iteration-count - HTML CSS CSS Property

HTML CSS examples for CSS Property:animation-iteration-count

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. animation-iteration-count

Description

The animation-iteration-count CSS property sets how many time to play the animation.

The following table summarizes the animation-iteration-count Property.

Item Value
Default value: 1
Applies to:All elements, ::before and ::after pseudo-elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


animation-iteration-count:     number | infinite | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
number Set the number of times to repeat. Default value is 1. Negative values are not allowed.
infinite repeat forever.
initial Sets this property to its default value.
inherit take the value of its parent element animation-iteration-count property.

You may specify non-integer values like 0.5 to play a part of an animation cycle.

The example below shows the animation-iteration-count property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 animation-iteration-count Property</title>
  <style type="text/css">
.box {<!--from www  . j a v  a 2 s  .c o m-->

    width: 153px;
    height: 103px;
  margin: 50px;
    background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
</style>
 </head>
 <body>
  <div class="box"></div>
 </body>
</html>

Related Tutorials