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.

Changing max-height back to zero as transition or animation

So I have got an animation on an object (<div>).
#keyframes fade-in-left {
0% {
max-height: 0px;
}
100% {
max-height: 200px;
}
This animation obviously happens when the object is being created. What I need now is an animation or transition that shrinks my object back down to max-height: 0px;.
Giving the property max-height an transition and then changing the value of it in js to 0px does nothing.
Also creating a reversed animation and then repolacing the original
object with a clone and this animation does not bring the object down
to 0px.
(Please keep in mind that I am not intersted in changing the scale or other transform properties)
Thanks for your suggestions!
More details:
My <div> object:
#keyframes fade-in-left {
0% {
max-height: 0px;
}
100% {
max-height: 200px;
}
}
.law-list .law-item {
-webkit-transition: max-height .9s linear;
-moz-transition: max-height .9s linear;
-ms-transition: max-height .9s linear;
-o-transition: max-height .9s linear;
transition: max-height .9s linear;
}
.fade-in {
-webkit-animation-duration: .9s;
animation-duration: .9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fade-in-left;
animation-name: fade-in-left;
}
I create my html content in js and the html elements looks like this:
<div class='law-item fade-in' id='law_0'>Law Nr.1</div>
<div class='law-item fade-in' id='law_1'>Law Nr.2</div>
So when an element is created, the max-height animation plays.
When I want to delete an object, I want the situation stated above to occur: a fade out animation and then an deletion.
I handel his in a js function:
function removeLaw(id) {
document.getElementById("law_" + id).style.maxHeight = "0px";
setTimeout(function() {
document.getElementById("law_" + id).parentElement.removeChild(document.getElementById("law_" + id));
}, 900);
}
As stated it should fade out to 0 max-height. But all it does it stay at the current max-height and then after max-height get deleted.

There is always more than one way to do something. Since you are using an animation to set the height, it is best to use an animation to remove the height as well. Think of the animation ending at 100%. At this point, your max-height is set. Even though you have a transition set on the element, the animation is preventing the transition from firing as it should. The animation event is still firing even though it is at 100%. You could set an event listener on the animationend event from the beginning and pause the animation. I haven't tried this, but it may work.
What I found in your case is to create a fade-out class and a fade-out animation. I removed all references to transition from your css since I used animations. I suppose you could go the other way and use only transitions instead of animations, but mixing them is the problem you have been having.
I created a basic click event listener on each law-item and changed the class on the item prior to removing when the new animation ended.
function removeLaw(id) {
var el = document.getElementById(id);
el.classList.remove('fade-in');
el.classList.add('fade-out');
el.addEventListener('animationend', function(e) {
el.remove();
})
}
var lawItems = document.querySelectorAll('.law-item');
lawItems.forEach(function(lawItem){
this.addEventListener('click', function(e) {
removeLaw(e.target.id)
})
})
#keyframes fade-in-left {
0% {
max-height: 0px;
}
100% {
max-height: 200px;
}
}
#keyframes fade-out-left {
0% {
max-height: 200px;
}
100% {
max-height: 0px;
}
}
.law-list .law-item {
height: 200px;
}
.fade-in {
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fade-in-left;
animation-name: fade-in-left;
}
.fade-out {
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fade-out-left;
animation-name: fade-out-left;
}
<div class='law-list'>
<div class='law-item fade-in' id='law_0'>Law Nr.1</div>
<div class='law-item fade-in' id='law_1'>Law Nr.2</div>
</div>

Opacity from 0 to 1 animation not working on Firefox

As the title says, this animation is not working on Firefox.
I am running this animation through JavaScript after a few seconds by using:
document.getElementById('my_id').style.webkitAnimationPlayState = "running";
I also tried:
style.animationPlayState
In the same file, changing the background-color animation works perfectly.
My conclusion is, there is something wrong with opacity on Firefox?
#my_id {
opacity: 0;
animation: animation 1s;
animation-fill-mode: forwards;
animation-play-state: paused;
-webkit-animation: animation 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
-moz-animation: animation 1s;
-moz-animation-fill-mode: forwards;
-moz-animation-play-state: paused;
}
#keyframes animation {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0.2;}
}
The above CSS is from the element I want to animate.

Instead of using JavaScript to add -webkit-animation-play-state, just add a class to your #my_id div using onload that includes all of the browser prefixes.
JavaScript
window.onload = function() {
document.getElementById("my_id").className += "running";
}
CSS
#my_id.running {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
The above code adds the .running class to your #my_id element, which declares animation-play-state: running, including the browser prefixes. You can test the above code by checking out my example that uses your code. I've tested it and it works in Firefox (51), Chrome, Opera, & Safari.

how to revert css3 keyframe animation from current frame on mouse out?

I want tot revert back to my first position from the current frame of animation.
Here in this code I have written a simple css3 keyframe animation and its working on hover. while mouse is out, I want this element to revert back to its first position with animation.
// html
------------------------------------
<div class="wrapper">
<div class="test"></div>
</div>
Css
.wrapper {width: 300px; height: 400px; position: relative;}
.test {width:40px; height: 40px; background-color: #0c6; border-radius: 40px; position: absolute; top:100px; left: 100px;}
.wrapper:hover .test{
animation-name:testin ; -webkit-animation-name:testin;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
#keyframes testin {
0%{top:100px; left:100px;}
20%{top:150px; left:150px;}
40%{top:200px; left:50px;}
60%{top:250px; left:150px;}
80%{top:300px; left:50px;}
100%{top:350px; left:150px;}
}
#-webkit-keyframes testin {
0%{top:100px; left:100px;}
20%{top:150px; left:150px;}
40%{top:200px; left:50px;}
60%{top:250px; left:150px;}
80%{top:300px; left:50px;}
100%{top:350px; left:150px;}
}
Please tell me if there is any javascript / jquery help or library for this kind of effects.
Thanks

what you want to achieve can be done with JavaScript or JQuery. These two are the ones that triggers functionality in a web page, so in your example the functionality of ":hover" (which is CSS) can also be achieved with JS libraries. In this case a simple one to use is hover(), so let's say we use JQuery library for this, and we'll start off by setting the appropiate scripts and markup in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="wrapper">
<div class="test"></div>
</div>
<script type= "text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Once you have that, we will need to create the other keyframe animation which will be the opposite, something like this:
#keyframes testinBack {
0%{top:350px; left:150px;}
20%{top:300px; left:50px;}
40%{top:250px; left:150px;}
60%{top:200px; left:50px;}
80%{top:150px; left:150px;}
100%{top:100px; left:100px;}
}
#-webkit-keyframes testinBack {
0%{top:350px; left:150px;}
20%{top:300px; left:50px;}
40%{top:250px; left:150px;}
60%{top:200px; left:50px;}
80%{top:150px; left:150px;}
100%{top:100px; left:100px;}
}
Now for the JS part, what we will do is to create a class in CSS from the one you already had, and create two classes, one with the keyframe animation-name: "testin", and the other with "testinBack":
.animationTest{
animation-name: testin; -webkit-animation-name:testin;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.animationTestBack{
animation-name: testinBack; -webkit-animation-name:testinBack;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
With that created, now the JS part should end up like this:
$( ".wrapper" ).hover(function() {
$('.test').addClass('animationTestin');
$('.test').removeClass('animationTestinBack');
},function(){
$('.test').removeClass('animationTestin');
$('.test').addClass('animationTestinBack');
});
So that when you hover on the wrapper you add the class that has the animation going down, and when you hover out, you remove that class and then add the animation going up.
Here is a fiddle:
https://jsfiddle.net/n1k5hkff/
Hope it helps,
Leo.

Fade out / fade in effect with CSS3

I'm trying to create a fade out / fade in effect with CSS3 animations. Here is my CSS :
#buttonright, #buttonleft{
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
}
And the Javascript (i'm using jquery) :
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
$('#buttonleft').css("opacity","1");
$('#buttonright').css("opacity","1");
It looks like the browser think it's stupid to set the opacity to 0 then to set it back to 1. Does someone has a possible solution ?
Thank you.

Edit: Regard yaki's answer for a pure CSS3 solution.
You're not giving the browser enough time to complete the transition. If you add a setTimeout to the latter statements, it should work.
Something like this:
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000);
setTimeout(function(){$('#buttonright').css("opacity","1");}, 5000);

Actually accepted solution is not CSS3 solution (it's still requires some javascript code). Please check the code below.
html:
<a id='buttonleft'>Button left</a>
<a id='buttonright'>Button right</a>
css:
#buttonleft, #buttonright {
text-align: left;
background: rgb(180,180,255);
opacity:0.5;
/* property duration timing-function delay */
-webkit-transition: opacity 500ms linear 100ms;
-moz-transition: opacity 500ms linear 100ms;
-o-transition: opacity 500ms linear 100ms;
transition: opacity 500ms linear 100ms;
}
#buttonleft:hover, #buttonright:hover {
opacity: 1.0;
}

something like this?
$('#button').hover(
function() {
$(this).animate({opacity: 0}, 500);
},
function() {
$(this).animate({opacity: 1}, 500);
}
);

You can use CSS3 animations now that it is more supported than when you asked the original question. I've created a jsFiddle showing how to do this on hover.
#keyframes demo {
from {
animation-timing-function: ease;
opacity: 1;
}
50% {
animation-timing-function: ease-in;
opacity: 0;
}
to {
animation-timing-function: ease-inout;
opacity: 1;
}
}
img:hover
{
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: 1;
animation-name: demo;
}