cssanimationkeyframe

How can I stop a CSS keyframe animation?

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.