How can I stop a CSS keyframe animation?


Tags: css,animation,keyframe

Problem :

I have a keyframe animation that changes color after certain events but I can't figure out how to stop the animation after the event is done?

HTML (just to call up the events):

<div id="prt1"></div>
<div id="prt2"></div>
<div id="prt3"></div>

CSS (just the styles and keyframe animations):

#prt1 {
height:20%;
width:5%;
border:1px solid black;
top:50%;
left:0%;
animation:prt1 2s infinite;
-webkit-animation:prt1 2s infinite;
display:none;
}

@keyframes prt1 {
0% {background-color:white;}
33% {background-color:black;}
66% {background-color:white;}
100% {background-color:white;}
}

@-webkit-keyframes prt1 {
0% {background-color:white;}
33% {background-color:black;}
66% {background-color:white;}
100% {background-color:white;}
}

#prt2 {
height:30%;
width:5%;
border:1px solid black;
left:0%;
top:50%;
animation:prt2 2s infinite;
-webkit-animation:prt2 2s infinite;
display:none;
}

@keyframes prt2 {
0% {background-color:white;}
33% {background-color:white;}
66% {background-color:black;}
100% {background-color:white;}
}

@-webkit-keyframes prt2 {
0% {background-color:white;}
33% {background-color:white;}
66% {background-color:black;}
100% {background-color:white;}
}

#prt3 {
height:49%;
width:5%;
border:1px solid black;
left:0%;
top:50%;
animation:prt3 2s infinite;
-webkit-animation:prt3 2s infinite;
display:none;
}

@keyframes prt3 {
0% {background-color:white;}
33% {background-color:white;}
66% {background-color:white;}
100% {background-color:black;}
}

@-webkit-keyframes prt3 {
0% {background-color:white;}
33% {background-color:white;}
66% {background-color:white;}
100% {background-color:black;}
}


Solution :

You need to set the animation-iteration-count:

animation-iteration-count: 1;

For more details, have a look at:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

...and:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/

You've provided very limited information about your problem. This solution might not be exactly what you're looking for. Add some more detail to your question and I'll update this answer if necessary.

Vendor Prefixes: You may add vendor prefixes (-webkit-, -moz-, -o-) like e.g. -webkit-animation-iteration-count: 1; for browser support and to target specific browsers allowing to set custom values for them.


    CSS Howto..

    How to copy this semi-static menu?

    How to CSS select each first div without class after div with class?

    How does wikimedia code there input onfocus

    How to change pseudo class property?

    How to have a multiline CSS horizontal scroll?

    How do you disable the set width of parent element for child element?

    jQuery, CSS: Two divs, how can I make them “show”next to each other?

    CSS - how to set some divs inline

    How to create and apply CSS to javascript Alert

    How to add modal window parameters for this code?

    CSS/Menu: How to position element right below/beside elements

    How to implement this in pure CSS?

    How can I determine the background image URL of a div via JavaScript?

    Having an HTML table, how can I toggle between displaying only specific rows using HTML, CSS, and JavaScript [duplicate]

    How to set responsively images on images to appear fixed using HTML+CSS+JS?

    How to add jQuery file to navigation website?

    How to fixed the form fields alignment issues using css and bootstrap

    How to fix maximum width of a div? If contents of that div's exceeds than maximum width, we get scroller?

    How to read different CSS classes with the same beginning with jquery?

    How can i apply css stylesheet to single specific element?

    How do I display a continuous chain of image slides using SlideJS?

    How to add a tooltip for just the background image of an input field with HTML and CSS

    How to stop web content from being displayed before css/jquery is prepared?

    On Eclipse-Java EE, how do I change the color settings for selected elements on a tree view?

    CSS: how to make two sections at the same line?

    How can I make a different CSS for the first child
    ?

    How to set height and width of video element in percent

    How to get just one parameter in 'clip' CSS property using JQuery? [duplicate]

    How to order a css file?

    Difference in css position IE/FF, how to solv my problem?