Develop Reference

Pausing alternate css animation and going back to its origin

jQuery( ".button" ).click(function() {
// STOP BOUNCING SMOOTHLYY
$('.button').on('animationiteration webkitAnimationIteration', function () {
var $this = $(this);
$this.removeClass('loading');
})
});
.button{
position: absolute;
top: calc(50vh - 10px);
left: calc(50vw - 10px);
height: 100px;
width: 100px;
border-radius: 100%;
background-color: green;
display: inline-block;
cursor: pointer;
}
.loading{
animation: bouncing 1s ease infinite alternate;
animation-fill-mode: forwards;
}
#keyframes bouncing{
from {transform: translateY(0);}
to {transform: translateY(-100px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button loading"></div>
A bouncing ball animated with css alternate animation (transform: translateY). I want the ball to stop its movement when clicked and go back to its intial place (possibly with smooth easing).
Css doesn't seem to know where the animation is, then it is not able to move back to its original point. Do you have a different solution for achieving this?

You can use getComputedStyle(). In jQuery, you can do it through .css().
The .css() method is a convenient way to get a style property from the
first matched element, especially in light of the different ways
browsers access most of those properties (the getComputedStyle()
method in standards-based browsers versus the currentStyle and
runtimeStyle properties in Internet Explorer) and the different terms
browsers use for certain properties.
For CSS, let's modify it a little bit. Make the default behaviour to be paused (animation-play-state: paused) and for .loading, set it to run. The paused moment is when you get the computed style to deal with it.
In jQuery, the animation will be paused, then the CSS transform (that is a matrix()) will be stored and applied to the element, next to a transition and the animation that will be set to none Finally, after some delay, it will run a function to apply a transform in order to bring the element back to the starting position.
jQuery( ".button" ).click(function() {
$this = $(this);
$this.removeClass('loading');
computedTransform = $this.css("transform");
$this.css({"transform": computedTransform, "transition": "0.86s", "animation": "none"}).delay(20).queue(function() {
$this.css("transform", "matrix(1, 0, 0, 1, 0, 0)")
});
});
.button{
position: absolute;
top: calc(50vh - 10px);
left: calc(50vw - 10px);
height: 100px;
width: 100px;
border-radius: 100%;
background-color: green;
display: inline-block;
cursor: pointer;
animation: bouncing 1s ease infinite alternate forwards paused;
}
.loading {
animation-play-state: running;
}
#keyframes bouncing{
from {transform: translateY(0);}
to {transform: translateY(-100px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button loading"></div>

Countinue the animation when the element has been replaced with another element

If I have an element, which has a CSS animation.
After 3 seconds, the Javascript replace the element with another new element (but same div element).
I want the new element to continue the rest unfinished part of the animation but not restart the animation.
Is it possible to fulfill it?
function replaceDIV(){
var elm = document.getElementsByTagName("div")[0];
var new_elm = document.createElement("div");
new_elm.innerHTML = "New Element";
new_elm.style.backgroundColor = "green";
elm.parentNode.replaceChild(new_elm,elm);
}
setTimeout(function(){
replaceDIV();
}, 3000);
div {
color: #FFF;
width: 150px;
height: 150px;
position: relative;
-webkit-animation: mymove 8s linear forwards;
animation: mymove 8s linear forwards;
}
#-webkit-keyframes mymove {
from {left: 0px;}
to {left: 500px;}
}
#keyframes mymove {
from {left: 0px;}
to {left: 500px;}
}
<div style="background-color: red;">Original Element</div>
How can I continue the rest unfinished CSS animation after the DIV has changed into a new DIV?
Is it possible to fulfill it with only CSS? Or it must use Javascript?

Animating the container div and then swapping out the inner div will get you to the solution that you want.
The problem is that when you're swapping out the same dom element it effectively resets the CSS animation to the beginning -- but if you're animating the container and swapping out the inner element then nothing will be interrupted.
In the below snippet I:
Created.container-div
Updated CSS applied to that container div
Updated index of var elm declaration
function replaceDIV(){
var elm = document.getElementsByTagName("div")[1];
var new_elm = document.createElement("div");
new_elm.innerHTML = "New Element";
new_elm.style.backgroundColor = "green";
elm.parentNode.replaceChild(new_elm,elm);
}
setTimeout(function(){
replaceDIV();
}, 3000);
.container-div {
color: #FFF;
width: 150px;
height: 150px;
position: relative;
-webkit-animation: mymove 8s linear forwards;
animation: mymove 8s linear forwards;
}
#-webkit-keyframes mymove {
from {left: 0px;}
to {left: 500px;}
}
#keyframes mymove {
from {left: 0px;}
to {left: 500px;}
}
<div class="container-div"><div style="background-color: red;">Original Element</div></div>

How to stop left to right moving image for sometime and start over again

I want to stop for sometime the left to right moving image at the end(right) and start over again the loop.I tired with the help of this website link,
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-delay
but i am unable to stop for sometime and start over again.Someone can help me with this please?
Thanks for your valuable time

To make a 5 second animation with a 10 second delay, you'd use 33%, based on the formula: 100/(maxTime)*animationTime
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 15s infinite;
}
#-webkit-keyframes mymove {
0% {left: 0px;}
33% {left: 200px;}
100% {left: 200px;}
}
<div></div>

How to add CSS translation to existing translation?

I am placing a DIV element on the screen using CSS translate. This works fine, except that when the same element is displaced later, the original displacement is discarded.
Set the CSS start position with javascript
div.style.transform ="translate(800px, 400px)";
After setting the starting position randomly with javascript, the CSS animation just resets it back.
CSS Animation
#keyframes testanimation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(80px);
}
}
How can I combine CSS translations, to take previous displacements into account? In this case, the goal is to have the animation start at randomised locations. The 20px - 80px should be relative.

The best way to do this I would guess is to fetch the previous transform, add something to those values and then apply the new transform.
Another suggestion is to set the position of the element using position, left and top. Using the following code for example:
div.style.position = "absolute";
div.style.left = "800px";
div.style.top = "400px";
That way, the transform would then apply to that position instead of relative to your previous transform.

If it is only about transform, then you need to reset each value in the animation, else it will be overwritten by animation rules.
example:
div {/* translate value reduced to fit in snippet window */
border:solid;
height:40px;
width:40px;
transform:translatex(180px) translatey(140px);
animation:2s testanimation forwards;
}
#keyframes testanimation {
0% {
transform:translatex(180px) translatey(150px)
}
100% {
transform:translatex(180px) translatey(180px)
}
}
<div></div>
Your style to apply to start width should be :
div.style.transform ="translatex(800px) translatey(400px)";
and the animation :
#keyframes testanimation {
0% {
transform:translatex(800px) translatey(420px)
}
100% {
transform:translatex(800px) translatey(480px)
}
}
in order to update only the translatey value
translate or position:relative + coordonates have the same effects/results.
You can also combine them
div {/* value reduced to fit window's demo */
border:solid;
height:40px;
width:40px;
position:relative;
transform:translate(80px,40px);
animation:2s testanimation forwards;
}
#keyframes testanimation {
0% {
top : 20px
}
100% {
top:40px
}
}
<div></div>
the other way round works too :
div {
/* value reduced to fit window's demo */
border: solid;
height: 40px;
width: 40px;
position: relative;
left: 80px;
top: 40px;
animation: 2s testanimation forwards;
}
#keyframes testanimation {
0% {
transform: translatey(20px)
}
100% {
transform: translatey(40px)
}
}
<div></div>

An example of my comment above:
#wrapperDiv {
width: 100px;
height: 100px;
background: green;
transform: translate(400px, 200px) rotate(50deg);
}
#yourDiv {
width: 100px;
height: 100px;
background: red;
animation: testanimation 2s infinite;
}
#keyframes testanimation {
0% {
transform: translateY(20px) rotate(0deg);
}
100% {
transform: translateY(80px) rotate(40deg);
}
}
<div id="wrapperDiv">
<div id="yourDiv">
<div>
<div>
The div#yourDiv will get a transform relative to its parent div#wrapperDiv transform.

I think a more general solution would be to parse the css transform property, as this allows you to keep animating an element without having to worry about its state.
This is the solution I use for this case:
parseTransformMatrix = function(str){
const match_float = "[+\\-]?(?:0|[1-9]\\d*)(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?"
const match_sep = "\\s*,?\\s*"
m = str.match(RegExp(`matrix\\((${match_float}(?:${match_sep}${match_float})*)\\)`))
if(!m || !m.length || m.length < 2) return null
return m[1].match(RegExp(match_float, 'g')).map(x => parseFloat(x))
}
// Test parseTransformMatrix method
console.log(parseTransformMatrix("matrix(1, 0, 0, 1, 96.2351, 309.123)"));
getElementTranslate = function(e){
let t = e.css("transform")
let r = { left: 0, top: 0 }
if(!t) return r
mat = parseTransformMatrix(t)
if(!mat || !mat.length || mat.length != 6) return r
r.left = mat[4]
r.top = mat[5]
return r
}
Here, e is a jQuery element, but you could easily use getPropertyValue instead if you don't want to have this dependency.
Using these functions, you can do something like:
let t = getElementTranslate(e)
e.css({transform:`translate(${t.left+20}px,${t.top+80}px)`})

Interrupt the animation and jump to a specific keyframes

I have a animation like this
div {
position: relative;
-webkit-animation: bouger 2s linear infinite;
}
#-webkit-keyframes bouger {
0% { left: 0%; }
50% { left: 50%; }
100% { left: 100%; }
}
How can i interrupt the animation and go to the keyframes 50% (left: 50%;) after a click like that
<div>CC</div>
<input type="button" value="Go to 50%" />
here's a FIDDLE and i want that the animation continues after.

with jQuery:
this will stop the animation and move the div to left 50%.
$("input").click(function() {
$("div").css({
'-webkit-animation' : 'none',
'left' : '50%'
})
})
fiddle
or you can move it to left 50% and continue the animation from there by defining a new #-webkit-keyframes and run it by adding a class to your div. like so:
div.two {
left:50%;
-webkit-animation: bouger2 2s linear infinite;
}
#-webkit-keyframes bouger2 {
0% { left: 50%; }
100% { left: 100%; }
}
code below is using toggleClass which will go back and forth from bouger and bouger2, but you can change it to 'addClass' if u wish:
$("input").click(function() {
$("div").toggleClass('two')
})
http://jsfiddle.net/SvdUN/3/