I am trying to animate a div by adding a CSS class name to it on click of a button. But this works only for the first time. Next time I click the button and add the CSS class name, it doesn't animate the div. What am I doing wrong here?
<head>
<script>
function abc() {
document.getElementById("a").className = "";
document.getElementById("a").className = document.getElementById("a").className + " b";
}
</script>
<style>
#a {
width:100px;
height:100px;
background:red;
position:relative;
}
.b {
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:1;
animation-direction:alternate;
animation-play-state:running;
}
#keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div id="a" class="c"></div>
<button onclick="abc()">Click</button>
</body>
The classes on a given element are a set, so adding one that’s already there doesn’t change anything. This kind of animation would probably be better done using JavaScript. (In practice, CSS animation is like anything in CSS — it depends on state, not actions.)
Or am I misunderstanding? Is the problem that it doesn’t stop?
Since you’re using animations, it’s probably safe to assume classList support, so:
document.getElementById("a").classList.toggle("b");
Related
How to create a video file from animations that run in a div (or other DOM element) in Javascript. For example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 0s;
}
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
So, I want this animation to be saved in a file like .avi or .mp4, ... I did a lot of research and I didn't get a satisfactory solution. Just something like html2canvas() that seems to be just for print. PS: in Javascript (with any library, plugin?)
I want to display this light if a certain condition is true in javascript using an if statement. How can I add an external CSS class to a javascript if statement?
Here is my css code:
.beacon{
position:absolute;
background-color:#32CD32;
height:1.5em;
width:1.5em;
border-radius:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
}
.beacon:before{
position:absolute;
content:"";
height:1.5em;
width:1.5em;
left:0;
top:0;
background-color:transparent;
border-radius:50%;
box-shadow:0px 0px 2px 2px #32CD32;
-webkit-animation:active 2s infinite linear;
animation:active 2s infinite linear;
}
#-webkit-keyframes active{
0%{
-webkit-transform:scale(.1);
opacity:1;
}
70%{
-webkit-transform:scale(2.5);
opacity:0;
}
100%{
opacity:0;
}
}
#keyframes active{
0%{
transform:scale(.1);
opacity:1;
}
70%{
transform:scale(2.5);
opacity:0;
}
100%{
opacity:0;
}
}
this is the javascript code:
<div class="too white">
<script language="javascript">
url = "http://www.511virginia.org/"
ping = new XMLHttpRequest();
ping.onreadystatechange = function(){
if(ping.readyState == 4){
if(ping.status == 200){
document.write("Website is up");
}
else {
document.write("Website is down");
}
}
}
ping.open("GET", url, false);
ping.send();
</script>
</div>
It depends on any framework you're using. For example, if you're using jQuery then change a DOM element's CSS using .css(property, value). Angular has it's own methods. For raw DOM manipulation take a look at the w3c page on JavaScript HTML DOM - Changing CSS, which shows the following.
document.getElementById(id).style.property = new style
How to detect that the animation reached a specific keyframe? (For example 50% or 75%).
This is what I tried:
element.addEventListener("animationend", AnimationListener, false);
but it supports animationstart, animationiteration and animationend only.
http://jsfiddle.net/W3y7h/294/
Using the example Fiddle provided, what you're essentially looking to know is when the value of #sun element's bottom property is equal to 100px. You can do this by using getComputedStyle() to check that value, clearing the interval when it is equal to 100px and then executing whatever code you wish, like so:
var style=window.getComputedStyle(document.getElementById("sun")),
interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))===100){
clearInterval(interval);
console.log("50% reached");
}
},1);
#sun{
animation:sunrise 1s ease;
bottom:0;
background:#ff0;
border-radius:50%;
height:50px;
position:absolute;
width:50px;
}
#keyframes sunrise{
0%{
bottom:0;
left:0;
}
50%{
bottom:100px;
}
100%{
bottom:0;
left:400px;
}
}
<div id="sun"></div>
To check for multiple values, simply set a new interval. In the case of your example, the value of the bottom property should be 50px when the animation is 75% complete. That being said, it may not always be exactly 50px in every browser so, instead, given that we know the value of the bottom property will be decreasing at this point, instead check for it being less than or equal to 50:
var style=window.getComputedStyle(document.getElementById("sun")),
interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))===100){
clearInterval(interval);
console.log("50% reached");
interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))<=50){
clearInterval(interval);
console.log("75% reached");
}
},1);
}
},1);
#sun{
animation:sunrise 1s ease;
bottom:0;
background:#ff0;
border-radius:50%;
height:50px;
position:absolute;
width:50px;
}
#keyframes sunrise{
0%{
bottom:0;
left:0;
}
50%{
bottom:100px;
}
100%{
bottom:0;
left:400px;
}
}
<div id="sun"></div>
Loading animation should appear for one second and then hide. It's not hiding. I believe it's the JS that's failing (as this governs hide).
See: http://www.visionchurchnorth.org.nz/temp/index
Example of it working correctly: http://www.championfreight.co.nz/index
Html
<div id="backgroundcolor" style="position:fixed; width:100%; height:100%; left:0%; top:0%; z-index:1996">
<div id="followingBallsG" style="left:50%; margin-left:-50px; top:56%; z-index:1998">
<div id="followingBallsG_1" class="followingBallsG">
</div>
<div id="followingBallsG_2" class="followingBallsG">
</div>
<div id="followingBallsG_3" class="followingBallsG">
</div>
<div id="followingBallsG_4" class="followingBallsG">
</div>
</div>
</div>
CSS
#backgroundcolor{
background-color:white;
background-image:url('preno_logo_02_100_100.jpg');
background-position:center;
background-repeat:no-repeat;
}
#followingBallsG{
position:relative;
width:100px;
height:8px;
}
.followingBallsG{
background-color:#000000;
position:absolute;
top:0;
left:0;
width:8px;
height:8px;
-moz-border-radius:4px;
-moz-animation-name:bounce_followingBallsG;
-moz-animation-duration:1.4s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:4px;
-webkit-animation-name:bounce_followingBallsG;
-webkit-animation-duration:1.4s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:4px;
-ms-animation-name:bounce_followingBallsG;
-ms-animation-duration:1.4s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:4px;
-o-animation-name:bounce_followingBallsG;
-o-animation-duration:1.4s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:4px;
animation-name:bounce_followingBallsG;
animation-duration:1.4s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#followingBallsG_1{
-moz-animation-delay:0s;
}
#followingBallsG_1{
-webkit-animation-delay:0s;
}
#followingBallsG_1{
-ms-animation-delay:0s;
}
#followingBallsG_1{
-o-animation-delay:0s;
}
#followingBallsG_1{
animation-delay:0s;
}
#followingBallsG_2{
-moz-animation-delay:0.14s;
-webkit-animation-delay:0.14s;
-ms-animation-delay:0.14s;
-o-animation-delay:0.14s;
animation-delay:0.14s;
}
#followingBallsG_3{
-moz-animation-delay:0.28s;
-webkit-animation-delay:0.28s;
-ms-animation-delay:0.28s;
-o-animation-delay:0.28s;
animation-delay:0.28s;
}
#followingBallsG_4{
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#-moz-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-webkit-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-ms-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-o-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
JS
(function(){
var didDone = false;
function done() {
//Prevent multiple done calls.
if(!didDone)
{
didDone = true;
//Loading completion functionality here.
$('#followingBallsG').hide();
$('#backgroundcolor').hide();
}
}
//Variables to keep track of state.
var loaded = false;
var minDone = false;
//The minimum timeout.
setTimeout(function(){
mindone = true;
//If loaded, fire the done callback.
if(loaded)
{
done();
}
}, 1000);
//The maximum timeout.
setTimeout(function(){
//Max timeout fire done.
done();
}, 5000);
//Bind the load listener.
$(window).load(function(){
loaded = true;
//If minimum timeout done, fire the done callback.
if(minDone)
{
done();
}
});
})();
It seems that you forgot to link to jQuery in your HTML. Add the following to your HTML before you link to your page's JavaScript:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
No jquery so
$(window).load(function(){
//...
}
no done
Put simply, loading animation (with white background) should appear as the homepage loads. It should then disappear following loading completion. Working fine for Chrome, but not IE and Firefox (animation works but does not disappear, which may be JS related).
***EDIT - I've temporarily removed the html as the website is active and needed by our customers.
Take a look here: www.championfreight.co.nz
HTML
<div id="backgroundcolor" style="position:fixed; width:100%; height:100%; left:0%; top:0%; z-index:1997">
<div id="followingBallsG" style="left:50%; margin-left:-50px; top:50%; z-index:1998">
<div id="followingBallsG_1" class="followingBallsG">
</div>
<div id="followingBallsG_2" class="followingBallsG">
</div>
<div id="followingBallsG_3" class="followingBallsG">
</div>
<div id="followingBallsG_4" class="followingBallsG">
</div>
</div>
</div>
JS
window.onload = function()
{
document.getElementById("followingBallsG").style.visibility = "hidden"
document.getElementById("backgroundcolor").style.visibility = "hidden"
}
CSS
#backgroundcolor{
background-color:white
}
#followingBallsG{
position:relative;
width:100px;
height:8px;
}
.followingBallsG{
background-color:#000000;
position:absolute;
top:0;
left:0;
width:8px;
height:8px;
-moz-border-radius:4px;
-moz-animation-name:bounce_followingBallsG;
-moz-animation-duration:1.4s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:4px;
-webkit-animation-name:bounce_followingBallsG;
-webkit-animation-duration:1.4s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:4px;
-ms-animation-name:bounce_followingBallsG;
-ms-animation-duration:1.4s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:4px;
-o-animation-name:bounce_followingBallsG;
-o-animation-duration:1.4s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:4px;
animation-name:bounce_followingBallsG;
animation-duration:1.4s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#followingBallsG_1{
-moz-animation-delay:0s;
}
#followingBallsG_1{
-webkit-animation-delay:0s;
}
#followingBallsG_1{
-ms-animation-delay:0s;
}
#followingBallsG_1{
-o-animation-delay:0s;
}
#followingBallsG_1{
animation-delay:0s;
}
#followingBallsG_2{
-moz-animation-delay:0.14s;
-webkit-animation-delay:0.14s;
-ms-animation-delay:0.14s;
-o-animation-delay:0.14s;
animation-delay:0.14s;
}
#followingBallsG_3{
-moz-animation-delay:0.28s;
-webkit-animation-delay:0.28s;
-ms-animation-delay:0.28s;
-o-animation-delay:0.28s;
animation-delay:0.28s;
}
#followingBallsG_4{
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#-moz-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-webkit-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-ms-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-o-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
Ah! I get it. But that is likely to not work in Firefox because they turn off animations while "loading another page". The only way to have an animation working is to use AJAX to do the loading. That's a bit of work and you may have a problem with search engines if you do that because AJAX won't be run by search engines and you will not get any clicks from search engines, so bad idea...