How to play different css animations one after another? - javascript

I'm trying to play different css animations one after another but I can't figure out how to.
Basically what I'm trying to do is play one Animation, have it on screen for 15 seconds, then play the next one, show it for 15 seconds and on to the next one and when the last one has been played, it should start again from the top.
Here's an example of the first one it should play, show for 15 seconds and then move on to the next one and do the same.
<style> #animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
</style>
<img id="animated-example" class="animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
And then run another one, show it for 15 seconds and move on.
<style> #animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
</style>
<img id="animated-example" class="animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

The only way to achieve that in pure CSS is to run all the animations at the same time and do some calculations:
the length of each animation should be the same and equal to the total length of desired animations (meaning if you want two 15-second animations, the CSS animations should be set to length of 30 seconds, no delays)
to control the start/end point of each animation, you need to modify the percentages accordingly - in the above case, it means that the first animation ends at 50% and that's when the second animation starts. Also, all in-between values need to be interpolated. It's easy for two animations, but you might need to use a calculator as the total number of animations increases. This is if we don't take the delays into account - the numbers change when we have a 15-second animation that will finish animation after 5 seconds, which now equals 33%, etc...
It will be more clear once you see it in action here:
.animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
animation-duration: 20s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
6% {
opacity: 1;
transform: translateX(30px);
}
8% {
transform: translateX(-10px);
}
10% {
transform: translateX(0);
}
40% {
opacity: 1;
transform: translateX(0);
}
42% {
opacity: 1;
transform: translateX(30px);
}
55% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
50% {
opacity: 0;
transform: translateY(-2000px);
}
56% {
opacity: 1;
transform: translateY(30px);
}
58% {
transform: translateY(-10px);
}
60% {
transform: translateY(0);
}
90% {
transform: translateY(0);
}
92% {
opacity: 1;
transform: translateY(30px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
<img class="animated-example animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
<img class="animated-example animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

Using animation-delay.
animation: a, b;
animation-duration: 2s, 2s;
animation-delay: 0s, 4s;
The animation b will start after 4s while animation a will start without any delay.

animation-delay would do exactly what you're looking for except for the fact that you want the animations to repeat after the last one has been completed; unfortunately there is (currently) no way to specify a delay between iterations of a looping animation.
You could, however, achieve what you're looking to do using a little bit of JavaScript, like the following. To add more animations, simply add their class names to the animations array at the start of the code.
var animations=["bounceInLeft","bounceInDown"],
count=animations.length,
classlist=document.querySelector("img").classList,
holder=document.createElement("div"),
style=window.getComputedStyle(holder),
delay=15,
current,wait,x;
holder.style.display="none";
document.body.appendChild(holder);
animate();
function animate(){
wait=0;
x=0;
while(x<count){
setTimeout(function(a){
classlist.remove(current);
classlist.add(a);
current=a;
},wait*1000,animations[x]);
holder.className=animations[x];
wait+=delay+parseInt(style.getPropertyValue("animation-duration"));
x++;
}
setTimeout(animate,wait*1000);
};
img{
animation-fill-mode:both;
height:200px;
width:300px;
}
.bounceInDown{
animation-duration:1s;
animation-name:bounceInDown;
}
.bounceInLeft{
animation-duration:2s;
animation-name:bounceInLeft;
}
#keyframes bounceInDown{
0%{
opacity:0;
transform:translateY(-2000px);
}
60%{
opacity:1;
transform:translateY(30px);
}
80%{
transform:translateY(-10px);
}
100%{
transform:translateY(0);
}
}
#keyframes bounceInLeft{
0%{
opacity:0;
transform:translateX(-2000px);
}
60%{
opacity:1;
transform:translateX(30px);
}
80%{
transform:translateX(-10px);
}
100%{
transform:translateX(0);
}
}
<img src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">

I have managed to achieve something similar by adapting this concept by Noah Addy: http://digitalfio.github.io/Stagger.css/
You will need to work on the timings a bit to get the 15sec delay you want, but other than that it should be fairly straightforward.

Related

Detect css animation stop

I have a spaceship object in my website that moves to left to right(end to the view port) in the screen.
I need to show another spaceship object moves right to left once that above mentioned spaceship object reach to end(screen view port).
The problem
I tried to give second spaceship object "animation delay" but it's not working as I wanted. Because browser width different from screen to screen.
Here is my code.
.spaceship-1 img {
width: 100px;
animation: spaceship-1 10s ease-in-out 1;
animation-fill-mode: forwards;
}
#-webkit-keyframes spaceship-1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100vw);
}
}
.spaceship-2 img {
width: 100px;
animation: spaceship-2 10s ease-in-out 1;
animation-fill-mode: forwards;
animation-delay: 5s;
position: absolute;
right: 0;
bottom: 15px;
}
#-webkit-keyframes spaceship-2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100vw);
}
}
<div class="spaceship-1">
<img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
<div class="spaceship-2">
<img src="http://i68.tinypic.com/2lsxjpx.png" alt="">
</div>
Here is the Jsfiddle Any ideas?
If you want the second animation to start right after the first one, you have to set an animation-delay equal to the animation-duration of the first one, witch is 10s.
And also you should make both of them absolute.
body{
background:#f6f6f6;
overflow-x:hidden;
}
.spaceship-1 img{
width:100px;
animation: spaceship-1 10s ease-in-out 1 ;
animation-fill-mode: forwards;
position:absolute;
left: 0;
top: 10px;
}
#-webkit-keyframes spaceship-1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(100vw - 100px)) ;
}
}
.spaceship-2 img{
width:100px;
animation: spaceship-2 10s ease-in-out 1 ;
animation-fill-mode: forwards;
animation-delay:10s;
position:absolute;
transform: rotate(180deg);
right: 0;
bottom: 10px;
}
#-webkit-keyframes spaceship-2 {
0% {
transform: translateX(0) rotate(180deg);
}
100% {
transform: translateX(calc(-100vw + 100px)) rotate(180deg);
}
}
<div class="spaceship-1">
<img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
<div class="spaceship-2">
<img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
The fiddle : https://jsfiddle.net/sph8f6ty/

Safari is not stopping the CSS3 animation

my target is to animate a loading spinner. After a ajax call is finished the spinner should finish the last rotation but stop than. In FF, Chrome and Opera it is working fine with just adding a class with
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
but in Safari (11.1.2) it is still running.
I think it is just something small to change but I don't find it. My idea is that safari doesn't let me change the animation while running so I can't change.
Code:
function stop()
{
document.getElementById("box").classList.add("stop");
}
CSS:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: animationRotateFrames linear 2s;
animation: animationRotateFrames linear 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.stop
{
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
}
button
{
margin-top: 40px;
padding: 20px;
}
#-moz-keyframes animationRotateFrames{
0% {
-moz-transform: rotate(0deg) ;
}
100% {
-moz-transform: rotate(359deg) ;
}
}
#-webkit-keyframes animationRotateFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(359deg) ;
}
}
#keyframes animationRotateFrames{
0% {
transform: rotate(0deg) ;
}
100% {
transform: rotate(359deg) ;
}
}
HTML
<div id="box"></div>
<button onclick="stop()">Stop</button>
Just as a demo:
JSFiddle

How to make preload animation disappear in 3s in Javascript

I have this preload animation that I want to incorporate into my website. All I want to do is play the animation for 3 seconds upon the page loading and then make it fade out. I've already successfully made it fade out by assigning transition property to CSS. All I need is the piece of code that delays it for 3s. I know it's something to do with the setTimeout() method but I think I'm not using it right.
This is what I've got so far:
<div class="spinner-wrapper" id="fds">
<div class="spinner"></div>
</div>
<script>
var preloader = document.getElementById("fds");
function fadeOut() {
preloader.style.opacity = "0.0";
setTimeout(fadeOut(), 5000);
}
</script>
I know the CSS is somewhat irrelevant but anyway, here it is:
.spinner-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ff6347;
z-index: 999999;
transition: 2s;
}
.spinner {
width: 40px;
height: 40px;
background-color: #333;
position: absolute;
top: 48%;
left: 48%;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
All I need is the piece of code that delays it for 3s
Set animation-delay to 3s at CSS

Seamlessly transition back and forth with only one animation class?

I want to use one class to trigger an animation, and upon removal of that class redo that animation in reverse.
It's hard to visualize, so I've created a CodePen of where I'm at currently.
You'll notice that when .zoom is removed from #box, the #box just vanishes. It doesn't do the animation in reverse, which is ultimately the goal.
How can I seamlessly transition back and forth, with only one animation class? Normally I might use transitions, but you can't transition with transforms.
Try adding .zoomout class , css animations , utilizing .removeClass() , second class at .toggleClass()
window.onclick = function() {
if (!$("#box").is(".zoom")) {
$("#box").removeClass("zoomout")
.toggleClass("zoom");
} else {
$("#box").toggleClass("zoom zoomout");
}
};
#box {
width: 256px;
height: 256px;
background: black;
opacity: 0;
display: block;
transform: scale(1.15, 1.15);
margin: 16px 0px;
}
.zoom {
animation: zoom 500ms;
animation-fill-mode: both;
-moz-animation: zoom 500ms;
-moz-animation-fill-mode: both;
-webkit-animation: zoom 500ms;
-webkit-animation-fill-mode: both;
}
.zoomout {
animation: zoomout 500ms;
animation-fill-mode: both;
-moz-animation: zoomout 500ms;
-moz-animation-fill-mode: both;
-webkit-animation: zoomout 500ms;
-webkit-animation-fill-mode: both;
}
#keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#-moz-keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#-webkit-keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
#-moz-keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
#-webkit-keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
body {
margin: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
-moz-transform: translate(-50%, -60%);
-webkit-transform: translate(-50%, -60%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="box"></div>
Click the document to toggle the box.
codepen http://codepen.io/anon/pen/vOxxKE

My javascript call is being ignored but why?

To break down what im trying to achieve. As you scroll down to a certain div the animation is called and takes place. The CSS is working fine so it slides in nicely as it should. The js is being ignored no matter where I place it so the trigger happens as the page loads and not when it hits the div.
So here is my code...
<script>
$(window).scroll(function() {
$('#thedevimage').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+1) {
$(this).addClass("slideRight");
}
});
});
</script>
Here is the html...
<div class="thedev">
<div class="left">
<div id="thedevimage" class="slideRight"><img src="images/xcode.png" style="width:100%;" /></div>
</div></div>
And the CSS...
#thedevimage{
width: 80%;
visibility: hidden;
}
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}

Categories