This question already has an answer here:
How do you detect when CSS animations start and end with JavaScript?
(1 answer)
Closed 4 years ago.
How can i start one keyframes animation after other one finished?
#myDiv {
position: relative;
width: 100px;
height: 100px;
border: 1px solid;
animation-name: animation1;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes animation1 {
0% {left: 100px}
100% {left: 200px}
}
#keyframes animation2 {
0% {top: 100px}
100% {top: 200px}
}
<div id="myDiv"></div>
I want to animation2 start after animation1 finished. I dont want to divide one animation like 0%,50%,100% or use other animation's animation duration. I want to get animation finished information and use it. I don't want to use delay. Is it possible?
You could use animation-delay. If animation1 takes 3 seconds to complete, you would declare animation2 as follows
#keyframes animation2{
animation-delay : 3s;
0% {
top: 100px;
}
100% {
top: 200px;
}
}
Related
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
im making a slide text from right to left , but when goes on left side stop moving and start again ...i want it to never stop moving from right to left .. here is my code ..
function change_left() {
$('#slide12').removeClass('slide-right').addClass('slide-left');
}
function change_right() {
$('#slide12').removeClass('slide-left').addClass('slide-right');
}
function to_left() {
setInterval(change_left, 5000);
};
function to_right() {
setInterval(change_right, 5000);
};
to_left();
to_right()
You can use css. no need jquery.
body { margin: 20px; }
.marquee {
height: 25px;
width: 420px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
<div class="marquee">
<div>
<span>You spin me right round, baby. Like a record, baby.</span>
<span>You spin me right round, baby. Like a record, baby.</span>
</div>
</div>
You can do this using css.
HTML
<div class="display">
<div class="moving-text">
Moving...
</div>
</div>
CSS
.display{
width:100%;
height:100px;
background:#000000;
position:relative;
overflow:hidden;
}
.display .moving-text{
display:inline-block;
font-size:40px;
padding:25px;
color:green;
position:absolute;
-webkit-animation: leftright 5s infinite; /* Safari 4.0 - 8.0 */
animation: leftright 5s infinite;
}
#keyframes leftright {
0% {left: 0;}
100% {left: 100%;}
}
#keyframes rightleft {
0% {left: 100%;}
100% {left: 0;}
}
#keyframes both {
0% {left: 0;}
49% {left: 100%;}
100% {left: 0;}
}
You can change animation: leftright 5s infinite; with 'rightleft' or 'both'
This is JsFiddle here
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>
I'm hunting around for an endless jQuery "ticker"/slider that will work with images of various widths.
I've tried FlexSlider, and even spoken to the developers, but apparently it only works with items of a fixed width. This is a pretty common constraint, as the parent HTML element usually needs a predefined width.
I found a CSS only solution (http://jsfiddle.net/Hyg3C/4289/) but it's a bit of a hack because it only uses one very long background image (plus it jumps).
#images {
background: url(http://cl.ly/9BJG/collage.jpg);
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: slideshow 5s linear infinite;
-moz-animation: slideshow 5s linear infinite;
}
#-webkit-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
#moz-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
Is there a way to do this using lots of images of variable widths?
Is there a pure CSS way to move a div from one place to another and stop. What I have jumps back to original place.
#animate {
position: absolute;
top: 0px;
left: 0px;
animation: move 3s ease;
}
#keyframes move {
from { transform: translateX(0px); }
to { transform: translateX(500px); }
}
If I need JS for this, is there are way to condition on the end of the animation instead of moving it with timeout??
Try adding:
#animate {
// other styles...
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
You can see this working here.
Credit to this answer.