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>
Related
I have the following code:
#keyframes ball1 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(120px);
opacity: 0%;
}
}
#keyframes ball2 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(160px);
opacity: 0%;
}
}
#keyframes ball3 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(200px);
opacity: 0%;
}
}
#keyframes ball4 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(240px);
opacity: 0%;
}
}
.ball {
background: black;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 10px;
animation-duration: 1s;
animation-iteration-count: 1;
}
#ball-1 {
animation-name: ball1;
}
#ball-2 {
animation-name: ball2;
animation-delay: 1s;
}
#ball-3 {
animation-name: ball3;
animation-delay: 2s;
}
#ball-4 {
animation-name: ball4;
animation-delay: 3s;
}
<div class="ball" id="ball-1"></div>
<div class="ball" id="ball-2"></div>
<div class="ball" id="ball-3"></div>
<div class="ball" id="ball-4"></div>
I want to achieve to follow:
Sequence starts
Ball 1 animates once.
There is a delay of 1 second.
Ball 2 animates once.
There is a delay of 1 second.
Ball 3 animates once.
There is a delay of 1 second.
Ball 4 animates once.
There is a delay of 1 second.
The sequence restarts from step 1.
This is what I currently have, but I don't know how to loop this sequence, it only plays ones. Not sure if it's possible with only css. If not I'm fine with JS as well.
Example: https://jsfiddle.net/patxh1gn/
do you mean something like this?
#keyframes ball1 {
0%,
12.501% {
transform: translateX(0px);
opacity: 0%;
}
6.25%,
12.502%,
100% {
opacity: 100%;
}
12.5% {
transform: translateX(var(--right));
opacity: 0%;
}
}
.ball {
background: black;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 10px;
animation: ball1 8s infinite;
}
#ball-1 {
--right: 120px;
}
#ball-2 {
--right: 160px;
animation-delay: 2s;
}
#ball-3 {
--right: 200px;
animation-delay: 4s;
}
#ball-4 {
--right: 240px;
animation-delay: 6s;
}
<div class="ball" id="ball-1"></div>
<div class="ball" id="ball-2"></div>
<div class="ball" id="ball-3"></div>
<div class="ball" id="ball-4"></div>
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">
I just want to animate specific element when route page load complete. its not route page transition. i have tried many ways. its a progress bar animate percentage of dynamicly from data value. i have tried mount destroyed method for change class but its not working.
my requirement is i want to pass value from data and according to the value, the progress bar shour be animate when page load.
enter image description here
<div class="media-body">
<div class="progress">
<div class="progress-bar progress-bar-warning" v-bind:class="{rating: isAnimate}">
</div>
</div>
</div>
.mybar {
height: 5px;
overflow: hidden;
background-color: #C1C2C1;
box-shadow: none;
}
.myactivebar {
background-color: #B01058;
float: left;
box-shadow: none;
transition: width 1s ease;
height: 100%;
width: 40%;
}
.rating {
width:100%;
}
data() {
return {
isAnimate: false,
technologies:[
{
title:'Vue Js',
info:'progressive framework for building user interfaces.',
logo:'https://vuejs.org/images/logo.png',
rate:90
},
]
}
}
This is actually what I want.
enter image description here
and I got the solution below
#-moz-keyframes animate-bar {
0% { width: 0%; }
}
#-webkit-keyframes animate-bar {
0% { width: 0%; }
}
#-ms-keyframes animate-bar {
0% { width: 0%; }
}
#-o-keyframes animate-bar {
0% { width: 0%; }
}
#-keyframes animate-bar {
0% { width: 0%; }
}
.chart {
background-color: #DADADA;
height: 2px;
position: relative;
}
.chart .bar {
background-color: #3D98C6;
height: 100%;
-moz-animation: animate-bar 1.25s 1 linear;
-webkit-animation: animate-bar 1.25s 1 linear;
-ms-animation: animate-bar 1.25s 1 linear;
-o-animation: animate-bar 1.25s 1 linear;
animation: animate-bar 1.25s 1 linear;
}
<div class="chart">
<div class="bar" style="width:60%;"></div>
</div>
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>
I have an animation in CSS that spins an image around its centre. I want to be able to change animation-timing-function and -webkit-animation-timing-function etc. programmatically in JavaScript. Here is the code and what I have tried:
<div id="content"> <div id="container">
<div id="outerQ"></div> <div id="innerQ">
</div>
</div>
<div id="logo"></div>
<span id="sp"></span>
<input type="button" id="linear" value="Linear"/>
<input type="button" id="ease" value="Ease in and out"/>
</div>
SCRIPT :
<head>
<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script>
$(document).ready(function ()
{
$("#linear").click(function ()
{
$("#innerQ").css("-webkit-animation-timing-function", "linear");
});
$("#ease").click(function ()
{
$("#innerQ").css("-webkit-animation-timing-function", "ease-in-out");
});
});
</script>
CSS:
<style>
body
{
background: #018a9a;
margin: 20px;
}
#content
{
width: 566px;
height: 120px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -80px;
margin-left: -278px;
}
#outerQ
{
width: 96px;
height: 120px;
background-image: url('outerQ.png');
}
#innerQ
{
width: 96px;
height: 120px;
background-image: url('innerQ.png');
position: absolute;
left: 0;
top: 0;
}
#container
{
width: 96px;
height: 120px;
float: left;
}
#logo
{
width: 470px;
height: 120px;
background-image: url('LogoLarge.png');
float: left;
}
#sp
{
clear: both;
}
#keyframes spin
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin
{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spin
{
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#innerQ
{
/*IE 10*/
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 1.3s;
animation-play-state: running;
transform-origin: 48px 50.5px;
/*Chrome*/
-webkit-animation-name: spin;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1.3s;
-webkit-animation-play-state: running;
-webkit-transform-origin: 48px 50px;
/*Firefox*/
-moz-animation-name: spin;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1.3s;
-moz-animation-play-state: running;
-moz-transform-origin: 48px 50px;
}
</style>
</head>
<body>
HTML:
<input type="button" id="linear" value="Linear"/>
<input type="button" id="ease" value="Ease in and out"/>
</div>
</body>
I am using webkit here because I use Chrome, clicking the buttons do nothing. I also want to change 'animation-iteration-count' and 'animation-duration' but these don't work. The only one that does work is '-webkit-animation-play-state'. I have also tried:
$("#innerQ").style.WebkitAnimationTimingFunction = "ease-in-out";
That doesn't work too. Is there a way of changing these properties after the page has loaded? Thanks
function function_name() {
document.getElementById('innerQ"').className = "innerQ";
}
CSS
.innerQ
{
//you css code(put all timing stuff here!!!)
}
//Step 1--->Put you desired css animation in a css class
//Step 2--->add that css class with javascript(className)
//Step 3---->Call function animation on click of the button