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>
Related
Here I have a Video that changes every few seconds with spinning animation + video getting small and big during the spinning.
But over time the timing gets out of order.
let degree = 720;
function rotateElement(){
let spin = `rotate(${degree}deg)`;
document.getElementById('myVideo').style.transform = spin;
document.getElementById('myVideo').style.transitionDuration = "1s";
degree += 720;
}
function smaller(){
document.getElementById('myVideo').style.maxWidth = "10px";
document.getElementById('myVideo').style.maxHeight = "10px";
document.getElementById('myVideo').style.transitionDuration = "1s";
}
function bigger(){
document.getElementById('myVideo').style.maxWidth = "30vw";
document.getElementById('myVideo').style.maxHeight = "19vw";
document.getElementById('myVideo').style.transitionDuration = "1s";
}
//setInterval(change, 5000);
window.onload = function () {
setInterval(change, 5000);
setInterval(rotateElement, 4900);
setInterval(smaller, 4850);
setInterval(bigger, 5050);
};
Not sure exactly what you want the animation to do with the rotate, but this is the basic idea of just doing it in CSS.
.test {
background-color: yellow;
/*animation: shrink 5s 3s ease infinite, rotate 50s steps(10, end) forwards infinite; */
animation: shrink 5s 3s ease infinite, rotate 50s forwards infinite;
transition: width 1s, height 1s;
overflow: hidden;
width: 30vw;
height: 19vh;
}
#keyframes shrink {
0%,
65%,
90%,
100% {
width: 30vw;
height: 19vh;
}
70% {
width: 14px;
height: 10px;
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<img class="test" src="http://placekitten.com/200/100">
Here is my script so far:
Html:
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>
Css:
#test {
background-color: blue;
width: 100px;
height: 100px;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
But how do i get the css animation (keyframes) to play on the div #test using some javascript?
Try to add 'animation' css property from js:
document.getElementById('test').style.animation = 'fading 2s infinite'
Add the animation to a class in CSS.
.fade {
animation: fading 1s forwards; // "fading" is the keyframe animation you created
}
[forwards][1] makes it so the element remains in the final state of the animation.
Then in Javascript when you want to animate your div, add the class to the element.
var el = document.getElementById('test'); // get a reference to the targeted element
el.classList.add('fade'); // add the class name to that element
document.getElementById('fader').addEventListener('click', function() {
var el = document.getElementById('test');
el.classList.add('fade');
});
#test {
background-color: blue;
width: 100px;
height: 100px;
}
.fade {
animation: fading 1s forwards;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="test"></div>
<button type="button" id="fader">fade out</button>
You have to add the animation keyframe fading to the div.
Have a look at this
#test {
background-color: blue;
width: 100px;
height: 100px;
position: relative;
-webkit-animation: fading 5s infinite;
animation: fading 5s infinite;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>
.cube {
width:40px;
height:40px;
background:#000;
animation:spin 3s;
animation-iteration-count:infinite;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<div class="cube"><div>
Like this give youre animation name like me(spin) and use this variable in animation selector with css. :)
You just declared the animation and did not used. You have to call it with "animation" keyword:
#test {
background-color: blue;
width: 100px;
height: 100px;
animation: fading 1s;
}
There is no need to use JS when you use #keyframes css
To add the #keyframes faded animation to the div just add those additional 2 lines to #test css . This will create 5s animation
#test {
background-color: blue;
width: 100px;
height: 100px;
-webkit-animation: fading 5s; /* Safari 4.0 - 8.0 */
animation: fading 5s;
}
You can add 'infinite' to loop the animation
-webkit-animation: fading 5s infinite; /* Safari 4.0 - 8.0 */
animation: fading 5s infinite;
I am making a label pop up for the user, if the user tries to drag and drop an element that has already been dragged.
Problem is, that the animations only happens once, and at the end of the animation, it will have an opacity of 0 forever.
CSS
#keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0;}
}
.o_tip{
position: absolute;
z-index: 999;
display: none;
opacity: 0;
-webkit-animation: smooth 2s ease-in;
-moz-animation: smooth 2s ease-in;
-o-animation: smooth 2s ease-in;
-ms-animation: smooth 2s ease-in;
animation: smooth 2s ease-in;
}
To illustrate my problem, if I 'end' the animation on opacity: 0.2 instead of opacity: 0:
#keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0.2;}
}
... then the label will reappear for each event - but it will not fade out again, which I want to do.
You can put the animation rule in a specific css class rule, and then on clicking add that class again. Just keep these points in mind:
You need to remove the animation class first before adding it again to have any effect.
Even if you follow first point, removing the class and adding it back right then won't have any visual effect. To trigger reflow, you can use this statement: void targetDiv.offsetWidth;.
document.querySelector("#start-animation").onclick = function(e){
var targetDiv = document.querySelector("#mydiv");
targetDiv.className = "";
void targetDiv.offsetWidth; // this triggers UI reflow
targetDiv.classList.add("o_tip");
}//onclick
#keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0;}
}
.o_tip{
z-index: 999;
animation: smooth 2s ease-in forwards;
}
#mydiv{
background-color: yellow;
height: 50px;
width: 100px;
}
#mydiv.o_top{
display: block;
}
<div id="mydiv"></div>
<button id="start-animation">Start animation</button>
I am animating a div (id="ani") using the following CSS code.
#ani {
width: 100px;
height: 100px;
background: red;
color:white;
position :relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
0% {left: 0px;}
25% {left: 250px;}
50% {left:500px;}
75% {left: 250px}
100% {left: 0px;}
}
I would like a know if there is a way to display the instantaneous value of the CSS 'left' property as it is changing i.e. the value of 'left' should be displayed all the time on the screen. Is there a way to bind 'left' value to say
any text field ? AngularJS seems to not work in style-sheets.
You can use something like DEMO
$(function(){
var div = $('#ani'),
showLeft = $('#left');
setInterval(function () {
showLeft.text(div.position().left)
}, 10);
});
i trying to make a button that stop a css3 animation and start it again
i tried the function
object.style.animationPlayState="paused";
but the problem that i wanna to stop and rerun it again from the start not to resume it from the last place.
also i tried to manipulate object.style.left value before stop also starts from the last place it was.
my last try was setting the count with 0 but no luck so far
any ideas about this problem?
the code
<html>
<head>
<title>Move 3 pic's</title>
</head>
<style>
#div1{position: relative; top:100px;}
#div2{position: relative ; top:100px;left:290px;}
#div3{position: relative ; top:250px; left:50px;}
#divmain
{
width: 400px; height:300px; border: 10px solid navy; margin: 5px;
}
.animate1
{
animation: movingdiv1 5s infinite alternate;
animation-timing-function:linear;
}
.animate2
{
animation: movingdiv2 5s infinite alternate;
animation-timing-function:linear;
}
.animate3
{
animation: movingdiv3 5s infinite alternate;
animation-timing-function:linear;
}
#-moz-keyframes movingdiv1
{
from {left: 0px;}
to {left: 300px;}
}
#-moz-keyframes movingdiv2
{
from {left: 300px;}
to {left: 0px;}
}
#-moz-keyframes movingdiv3
{
from {top: 240px;}
to {top: 0px;}
}
</style>
<script>
var x=0;
function start()
{
document.getElementById("div1").style.animationIterationCount="infinite";
document.getElementById("div2").style.animationIterationCount="infinite";
document.getElementById("div3").style.animationIterationCount="infinite";
if(x==1)
{
document.getElementById("start").value="Stop";
document.getElementById("div1").style.animationPlayState="running";
document.getElementById("div2").style.animationPlayState="running";
document.getElementById("div3").style.animationPlayState="running";
x=0;
}
else
{
document.getElementById("start").value="Start";
document.getElementById("div1").style.animationPlayState="paused";
document.getElementById("div2").style.animationPlayState="paused";
document.getElementById("div3").style.animationPlayState="paused";
x=1;
}
}
function reset()
{
/*what i tried here*/
document.getElementById("div1").style.animationPlayState="paused";
document.getElementById("div2").style.animationPlayState="paused";
document.getElementById("div3").style.animationPlayState="paused";
document.getElementById("div1").style.left="0px";
document.getElementById("div2").style.left="297px";
document.getElementById("div3").style.top="250px";
document.getElementById("div1").style.animationIterationCount="0";
document.getElementById("div2").style.animationIterationCount="0";
document.getElementById("div3").style.animationIterationCount="0";
}
</script>
<body>
<div id=divmain>
<span class="animate1" id=div1>
<img src="icon1.gif" id="icon1" width="50" height="50"/></span>
<span class="animate2" id=div2>
<img src="icon2.gif" id="icon2" width="50" height="50"/></span>
<span class="animate3" id=div3><img src="top.jpg" id="icon3" width="50" height="50"/></span>
</div>
<input id=start type=button onClick=start() value='Stop'>
<input id=reset type=button onClick=reset() value='Reset'>
</body>
If you want to rerun the animation from the start, remove the 'alternate' in the animation property.
.animate1
{
animation: movingdiv1 5s infinite;
animation-timing-function:linear;
}
.animate2
{
animation: movingdiv2 5s infinite;
animation-timing-function:linear;
}
.animate3
{
animation: movingdiv3 5s infinite;
animation-timing-function:linear;
}
EDIT:
Maybe I didn't understand your question earlier. You want to stop and rerun it again from the start, whenever the button is clicked. For that, I have modified the start function(). Whenever the Stop button is pressed the animate classes are removed from the moving divs. And when the start button is pressed, the animate classes are added.
function start()
{
document.getElementById("div1").style.animationIterationCount="infinite";
document.getElementById("div2").style.animationIterationCount="infinite";
document.getElementById("div3").style.animationIterationCount="infinite";
if(x==1)
{
document.getElementById("start").value="Stop";
document.getElementById("div1").className = "animate1";
document.getElementById("div2").className = "animate2";
document.getElementById("div3").className = "animate3";
x=0;
}
else
{
document.getElementById("start").value="Start";
document.getElementById("div1").className = "";
document.getElementById("div2").className = "";
document.getElementById("div3").className = "";
x=1;
}
}