We Keep Coding

I want to do an animation, but just one time, not to be on a loop [duplicate]

I'm running an animation on some elements that are set to opacity: 0; in the CSS. The animation class is applied onClick, and, using keyframes, it changes the opacity from 0 to 1 (among other things).
Unfortunately, when the animation is over, the elements go back to opacity: 0 (in both Firefox and Chrome). My natural thinking would be that animated elements maintain the final state, overriding their original properties. Is this not true? And if not, how can I get the element to do so?
The code (prefixed versions not included):
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; }
50% { transform:scale(1.2); opacity:0.5; }
100% { transform:scale(1.0); opacity:1.0; }
}

Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this:
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
animation: bubble 1.0s forwards;

If you are using more animation attributes the shorthand is:
animation: bubble 2s linear 0.5s 1 normal forwards;
This gives:
bubble animation name
2s duration
linear timing-function
0.5s delay
1 iteration-count (can be 'infinite')
normal direction
forwards fill-mode (set 'backwards' if you want to have compatibility to use the end position as the final state[this is to support browsers that has animations turned off]{and to answer only the title, and not your specific case})
Available timing-functions:
ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end
Available directions
normal | reverse | alternate | alternate-reverse

IF NOT USING THE SHORT HAND VERSION: Make sure the animation-fill-mode: forwards is AFTER the animation declaration or it will not work...
animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;
vs
animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

Use
animation-fill-mode: forwards;
animation-fill-mode: forwards;
The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
Note: The #keyframes rule is not supported in Internet Explorer 9 and earlier versions.
Working example
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
animation: bubble 3s forwards;
/* animation-name: bubble;
animation-duration: 3s;
animation-fill-mode: forwards; */
}
/* Safari */
#-webkit-keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
/* Standard syntax */
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>

I had an issue using forwards: at least in Chrome, even after the animation ended, the renderer was still sucking up graphics resources, making the application less responsive.
An approach that does not cause this trouble is by using an EventListener.
CSS animations emit events, so you can use the animationend event to intervene when the animation ends.
CSS
.fade_in {
animation: fadeIn 2s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
JavaScript
const element = document.getElementById("element-to-be-animated");
element.addEventListener("animationend", () => {
// Set your final state here. For example:
element.style["opacity"] = 1;
}, { once: true });
The option once: true tells the engine to remove the event listener after its execution, leaving your application fresh and clean.
I have created a JSFiddle to show how it works.

How can I create an Animated Button with a Sprite Sheet using Javascript?

I am trying to create an animated button using a sprite sheet. The animation should play on hover and then on mouseout the animation should finish and then stop.
How can I go about doing this? I have tried setting the background of a div and controlling the background position through hover events. I can get the background position to set itself properly but each change goes so fast it might as well be instant and so the animation does not show itself.
Any suggestions would be helpful. After a lot of searching with no luck I am not sure what else to try.
Thank You!

the best advice would be to use a CSS3.
pretty easy no need for javascript:
take a look at this for example:
http://codeitdown.com/css-sprite-animations/
example here:
http://jsfiddle.net/drukaman/ued7mLha/1/

from the Referance : https://medium.com/#Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb
HTML
<html>
<head>
<title>
Sprite-Sheet Animation
</title>
<link rel=”stylesheet” type=”text/css” href=”main.css”>
</head>
<body>
<div class=”animatedDiv”></div>
</body>
</html>
CSS
.animatedDiv {
width: 820px;
height: 312px;
background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
-webkit-animation: play 2s steps(48) infinite;
-moz-animation: play 2s steps(48) infinite;
-ms-animation: play 2s steps(48) infinite;
-o-animation: play 2s steps(48) infinite;
animation: play 2s steps(48) infinite;
}
#-webkit-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-moz-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-ms-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-o-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
for Detailed explanation follow the link.

Problems with CSS3 animations and animations following a javascript class switch

Im trying to get an animation to trigger when I update the elements class via javascript. The intention is for this to be part of a PhoneGap app so -webkit- prefixes should do the job to my knowledge.
Anyhow, the animations are currently not working when I'm testing in Chrome, both when on the element alone as well on the new class. Can anybody explain where I'm going wrong here?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSockets</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" onclick="document.getElementById('ani1').className = 'bounce fade';">
Start
</a>
<div id="ani"></div>
</body>
</html>
style.css
#-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateY(50px);
}
20%, 60% {
-webkit-transform: translateY(70px);
}
80%, 40% {
-webkit-transform: translateY(30px);
}
}
#ani {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background: red;
-webkit-transform: all 0.1s;
-webkit-animation: 'bounce' 1s 'ease-in-out';
-webkit-animation-iteration-count: 3;
-webkit-animation-delay: 2s;
}
#ani.bounce{
-webkit-animation: 'bounce' 1s 'ease-in-out';
-webkit-animation-iteration-count: 3;
}
#ani.fade{
-webkit-transition: opacity 0.4s linear;
-webkit-animation-delay: 3s;
}

There are two problems. First there is a typo in your inline Javascript: getElementById('ani1'). There is a "1" appended at the id.
The second thing is that you have to remove the quotes in the -webkit-animation statements.
Incorrect:
-webkit-animation: 'bounce' 1s 'ease-in-out';
Correct:
-webkit-animation: bounce 1s ease-in-out;
If you fix that, it should work ;-)

CSS3 Keyframe Animations: End and stay on the last frame

I've run into some difficulty trying to play a CSS3 keyframe animation and have the relevant element stick at the last frame after the animation has completed. To my understanding, the property that I have to set for this to work should be animation-fill-mode, which should have the value of forwards; this doesn't do anything.
.animatedSprite {
.animation-name: sprite;
.animation-duration: .5s;
.animation-iteration-count: 1;
.animation-direction: normal;
.animation-timing-function: steps(3);
.animation-fill-mode: forwards;
//Vendor prefixes... }
This will just play the animation once and then go back to the first frame. I found an example of keyframe animations at JSFiddle ( http://jsfiddle.net/simurai/CGmCe/ ), and changing the fill mode to forwards and setting the iteration count to 1 wouldn't do anything there, either.
Any help would be greatly appreciated.

animation-fill-mode:forwards is the correct property to use. Is does not seem to work because the sprite image background has a default background-repeat:repeat, so the last frame you think you are seeing is actually the first frame of the repeated background image.
If you set
background: url("http://files.simurai.com/misc/sprite.png") no-repeat
animation: play .8s steps(10) forwards;
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
and run the demo the final frame is now blank - so forwards is doing what it should do. The second part of the solution is to change the final to and steps CSS properties to position the background correctly. So we really need the background to stop at -450px and use 9 steps.
-webkit-animation: play .8s steps(9) forwards;
#keyframes play {
from { background-position: 0; }
to { background-position: -450px; }
}
See demo - I only fixed the Chrome properties. Also here is the sample image in case the original disappears.
.hi {
width: 50px;
height: 72px;
background: url("http://i.stack.imgur.com/ilKfd.png") no-repeat;
-webkit-animation: play .8s steps(9) forwards;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(9) forwards;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -450px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -450px; }
}
<div class="hi"></div>

Change 'infinite' to '1' in the css, this fixes it for me

just add
animation: mymove .8s forwards;
here 'mymove' is name of my keyframe
example:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove .8s forwards;
}
#keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<h1>The #keyframes Rule</h1>
<div></div>
</body>
</html>

The following code will make the transition stay on the last frame:
-webkit-timing-function:ease;
-webkit-iteration-count:1;

CSS3 animation change background-image without sliding

This is the current code I have
.jack_hitting{
-moz-animation: jackhitting 0.5s infinite;
}
#-moz-keyframes jackhitting {
0% {
background-position: -8px -108px;
}
20% {
background-position: -41px -108px;
}
40% {
background-position: -73px -108px;
}
60% {
background-position: -105px -108px;
}
80% {
background-position: -137px -108px;
}
100% {
background-position: -8px -108px;
}
}
and this cycles through the background image sliding to the next one, but i would rather have it not slide, so that it basically works like the following js code:
document.getElementById('id').style.backgroundPosition='-8px -108px';
Is there an effect that can do what I would like?
Thanks in advance :)

I think I found it: step-start (I think it's one of multiple that could do this in the animation-timing-function category)
animation: jackhitting 10s step-start infinite;
Long-form would be
animation-name: jackhitting;
animation-duration: 10s;
animation-timing-function: step-start;
animation-iteration-count: infinite;
Unfortunately, you'll have to prefix this for each browser for now.
Here's a fiddle to test it out:
http://jsfiddle.net/Ym6b5/4/
(The div is much too big. I wanted you to see the background image move and see if it's what you were after)
The animation-duration is the total amount of time it'll take to go through your keyframes. The animation-delay that I thought was the delay between steps is the delay before the animation should start.
http://dev.w3.org/csswg/css3-animations
Hope it's what you were looking for.
Cheers,
iso