InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS animation

  • animation overview
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state
  • animation shorthand
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties
  • > CSS Animation

CSS animation-iteration-count

on Mar 24, 2016

CSS animation-iteration-count property specifies the number of times an animation cycle is played. It can be a number or infinite. In case animation-name has multiple values, animation-iteration-count can also have multiple values.

CSS property animation-iteration-count

CSS version: CSS 3
Value: [number | infinite] [, ...]*
Initial: 1
Applies to: all elements, ::before and ::after pseudo-elements
Inherited: no

Example – animation-iteration-count

In the following code, CSS property animation-iteration-count can be changed to the following values
  • 1
  • 2
  • 5
  • infinite
<style>
@keyframes left-to-right {
  0% {left:0;}
  100% {left:200px;}
}
.box {
  position: fixed;
  background-color:lightgreen;
  animation-name: left-to-right;
  animation-duration:4s;
  animation-iteration-count:1;
}
</style>

<div class=box>Object</div>
animation-iteration-count refresh done
try it online

Specification

  • W3C CSS 3 animation-iteration-count specification

Suggested posts:

  1. CSS animation-duration
  2. CSS animation-timing-function
  3. CSS animation-delay
  4. CSS animation-name
  5. CSS animation-direction
  6. CSS animation-fill-mode
  7. CSS animation-play-state
  8. CSS animation shorthand property
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS Animation, CSS properties, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress