How can I play a keyframe animation on click?

How can I play a keyframe animation on click? - javascript

I want to create a keyframe Animation each time when I click at the box. But when I click onto the box the animation just works one time. I want that the animation works everytime when I click onto the box.
Any help?
Thanks!
$(document).ready(function(){
$("#rocketstart").click(function(){
$(".rocket").css("animation-play-state", "running");
});
});
.rocket {
background-color: red;
width: 550px;
height: 300px;
cursor: pointer;
background-repeat: no-repeat;
margin-right: -340px;
margin-bottom: -110px;
animation-name: rocket;
animation-duration: 1s;
animation-play-state: paused;
}
#keyframes rocket {
0% { transform:translate(0) }
100% { transform:translate(0, -50%) }
70% { opacity:1; }
100% { opacity:0; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='rocket' id="rocketstart" title="rocketup">

Instead of changing the state of animation, move the animation property into a new class and remove that class at the end of animation:
$(document).ready(function(){
$("#rocketstart").click(function(){
$(".rocket").addClass("animated");
});
$('.rocket').on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
$(this).removeClass("animated");
});
});
.rocket {
background-color: red;
width: 550px;
height: 300px;
cursor: pointer;
background-repeat: no-repeat;
margin-right: -340px;
margin-bottom: -110px;
}
.animated{
animation-name: rocket;
animation-duration: 1s;
}
#keyframes rocket {
0% { transform:translate(0) }
100% { transform:translate(0, -50%) }
70% { opacity:1; }
100% { opacity:0; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='rocket' id="rocketstart" title="rocketup">

Related

Trigger animation on page load

I have a code that triggers an animation on some elements when they're hovered by adding a second css class on them, and once it's done, this class is removed so it becomes static again. I don't know how to make the animation happen every time the page is loaded tho, I tried adding a "window.load" function but it didn't work out. I'd appreciate if someone could shed me a light on it.
Here's the snippet: https://jsfiddle.net/6fmno8vb/1/
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>
Thanks!

I will give two solutions.
Wrap event mouseenter with a window load event.
$(window).on('load', function() {
...
$(".main-logo").trigger("mouseenter");
});
$(window).on("load", function () {
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
$(".main-logo").trigger("mouseenter");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>
If you trigger a mouse event immediately after the page is launched, then it does not always look efficient. I advise you to wrap the event mouseenter call in setTimeout(), specifying any appropriate value for the delay.
setTimeout(function () {
$(".main-logo").trigger("mouseenter");
}, 1000);
setTimeout(function () {
$(".main-logo").trigger("mouseenter");
}, 1000);
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>

Dear according to your question you want the animation to be loaded on page load, so I have added document. ready function and also your old function is also there, so both functionalities on hover and on page is load is available
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(document).ready(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>

Load each progress bar from 0 to its value in multiple progress bar animation

I am trying to add animation in grouped progress bar that will load each progress bar from 0 to its value. e.g in my sample code below I want to first load red progress bar then load the green progress bar. How can I do that?
Please check the code in this jsfiddle.
html:
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
css:
.progress-bar-outer {
width: 300px;
height: 40px;
flex: auto;
display: flex;
flex-direction: row;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
height: 100%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 50%;
height: 100%;
background-color: green;
}
.progress-bar-outer div {
animation:loadbar 3s;
-webkit-animation:loadbar 3s;
}
#keyframes loadbar {
0% {width: 0%;left:0;right:0}
}

I would transition transform instead for better performance. Use translateX(-100%) with opacity: 0 to move them to their default, hidden position, then animate to translateX(0); opacity: 1; to put them in place. And just add an animation-delay to the green bar that matches the animation-duration
I made the bars semi-opaque to show when the animations fire.
.progress-bar-outer {
width: 300px;
height: 40px;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
display: flex;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: green;
}
.progress-bar-outer div {
transform: translateX(-100%);
animation: loadbar 3s forwards;
-webkit-animation: loadbar 3s forwards;
opacity: 0;
}
.progress-bar-outer .progress-bar-inner2 {
animation-delay: 3s;
}
#keyframes loadbar {
0% {
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>

Modified Michael Coker's answer to better reflect my interpretation of what you're asking for.
.progress-bar-outer {
width: 300px;
height: 40px;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
position: relative;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: red;
z-index: 1;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: green;
z-index: 2;
}
.progress-bar-outer div {
position: absolute;
top: 0; bottom: 0;
transform: translateX(-100%);
animation: loadbar 3s linear;
-webkit-animation: loadbar 3s linear;
opacity: 1;
}
.progress-bar-outer .progress-bar-inner2 {
animation-delay: 3s;
}
#keyframes loadbar {
100% {
transform: translateX(0);
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>

Apply Transition to inner classes, add delays to secondary inner and use opacity to hide the element before transition begins.
.progress-bar-inner {
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
.progress-bar-inner2 {
-webkit-animation: loadbar 2s ease 2s forwards;
animation: loadbar 2s ease 2s forwards
animation-delay: 2s;
-webkit-animation-delay: 2s;
opacity:0;
}
#keyframes loadbar {
0% { width: 0%;left:0;right:0}
1% { opacity: 1}
100% { opacity: 1}
}
See working example:
https://jsfiddle.net/dfkLexuv/10/

Move element out of screen and then back with CSS animation

In the following example the goal is to control the element position with smooth slideIn/Out animation. The problem is when the new class is added it overwrites the first one and the second part of animation begins with the reset of element position to 0 and then slidesIn again.
The following snippet will show better what I've tried to explain.
$('.trigger').click(function() {
if (!$('.target').hasClass('hide')) {
$('.target').addClass('hide')
} else {
$('.target').addClass('show')
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
animation-delay: .2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>

If you remove the animation-delay attribute you have in the .show css that should prevent the visible 0.2s reset, as below
$('.trigger').click(function() {
var target = $('.target');
if (!target.hasClass('hide')) {
target.removeClass('show');
target.addClass('hide');
} else {
target.removeClass('hide');
target.addClass('show');
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0vw);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>

$('.trigger').click(function() {
if (!$('.target').hasClass('hide')) {
$('.target').addClass('hide')
} else {
$('.target').css({"transform":"translate(120vw)"});
$('.target').addClass('show')
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
animation-delay: .2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>

How to hide div under another during CSS3 animation

The CSS code :
.mainDiv{
width: 600px;
height: 600px;
background-color: blue;
}
.innerDiv{
width: 400px;
margin: auto;
height: 400px;
background-color: green;
}
.innerDiv div{
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
}
.removing{
-webkit-animation: slideout 1s;
animation: slideout 1s;
}
#-webkit-keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
#keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
Here is a jsFiddle of the problem.
What i would like it to do is this :
When the first red block moves outside of the green block, i would like it to be behind the blue block instead of in front of it.

add the line: overflow:hidden; to your .innerDiv css rule

Use z-index.
Example:
#somethingBehind {
z-index: 1;
}
#somethingAtTheFront {
z-index: 2;
}

Loading CSS3 when page loads

I have the following HTML code. I have applied some animations to the logo using CSS3 and it's working as I wanted. Now the animation works when we hover on the logo. I want the animation to work automatically when the page loads.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>After Quote</title>
<style type="text/css">
.container {
background: none repeat scroll 0 0 #1180AE;
height: 340px;
margin: 0 auto;
padding-top: 50px;
width: 215px;
background: url(container.jpg) no-repeat;
}
.content {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 8px;
height: 200px;
margin: 0 auto;
padding-top: 115px;
width: 194px;
}
.logo:hover {
border-radius: 50%;
transform: rotate(720deg);
}
.logo {
height: 80px;
margin: 0 auto;
transition: all 1s ease 0s;
width: 80px;
}
.logo img {
border-radius: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="logo"> <img src="logo.jpg" alt="logo" /> </div>
<!--logo-->
</div>
<!--content-->
</div>
<!--container-->
</body>
</html>

There are multiple ways how you can achieve this:
The first one is to add a class to the logo after pageload with JavaScript. You need to do this, because CSS transitions only react on changes like classlist changes, hover etc., but can not start by itself.
The second way is to use CSS keyframe animations, which I believe is more what you want. You can learn about it here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

#-webkit-keyframes anm {
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(180deg);}
50% {-webkit-transform: rotate(360deg);}
75% {-webkit-transform: rotate(540deg);}
100% {-webkit-transform: rotate(720deg);}
}
#keyframes anm {
0% {transform: rotate(0deg);}
25% {transform: rotate(180deg);}
50% {transform: rotate(360deg);}
75% {transform: rotate(540deg);}
100% {transform: rotate(720deg);}
}
.logo img {
height: 80px;
border-radius: 15px;
-webkit-animation: anm 1s;
animation: anm 1s;
}
.logo img:hover {
border-radius: 50%;
transition: all 1s ease 0s;
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}

It won't unless you use #keyframes CSS animations. you can use like mentioned below..
and use animation-rotate class in your img tag. Here is the Demo.
.animation-rotate {
margin:auto;
-webkit-animation:coinflip 2s infinite linear;
animation:coinflip 2s infinite linear;
-moz-animation:coinflip 2s infinite linear;
}
#-webkit-keyframes coinflip {
0% {
-webkit-transform:rotateY(-1deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}
#-moz-keyframes coinflip {
0% {
-moz-transform:rotateY(-1deg);
}
100% {
-moz-transform:rotateY(360deg);
}
}
#keyframes coinflip {
0% {
transform:rotateY(0deg);
}
100% {
transform:rotateY(360deg);
}
}

Develop Reference

JavaScript is the programming language of the Web.

How can I play a keyframe animation on click? - javascript

Related

Trigger animation on page load

Load each progress bar from 0 to its value in multiple progress bar animation

Move element out of screen and then back with CSS animation

How to hide div under another during CSS3 animation

Loading CSS3 when page loads

Categories

Resources