When class .is-animated is added to the .box element it does a simple animation of changing background.
I want it to do this simple animation let's say every 2 seconds. The issue is that if it already has the .is-animated class and i remove and then add it again the animation does not happen except if i put the addition inside a setTimeout function. Why is this happening? Is the use of setTimeout mandatory in such situation?
JSFIDDLE
HTML
<div class="box box_one"></div>
<div class="box box_two"></div>
CSS
.box {
display: inline-block;
height: 50px;
width: 50px;
background: red;
}
.box.is-animated {animation: changebg 1s ease;}
.box_two { margin-left: 50px;}
#keyframes changebg {
0% {background: red;}
75% {background: green;}
100% {background: red;}
}
JS
var box_one = document.querySelector('.box_one');
setInterval(function() {
box_one.classList.remove('is-animated');
box_one.classList.add('is-animated');
}, 2000);
var box_two = document.querySelector('.box_two');
setInterval(function() {
box_two.classList.remove('is-animated');
setTimeout(function() {
box_two.classList.add('is-animated');
}, 100);
}, 2000);
You don't need js for this, just add "infinite" to the animation property.
As for the question itself, like Niet the Dark Absol pointed out, if you add and remove a class in the same iteration css never computes it, you would need to use a timeout indeed.
.box {
display: inline-block;
height: 50px;
width: 50px;
background: red;
}
.box.is-animated {animation: changebg 2s ease infinite;}
.box_two { margin-left: 50px;}
#keyframes changebg {
0% {background: red;}
50% {background: green;}
100% {background: red;}
}
<div class="box box_one"></div>
<div class="box box_two is-animated"></div>
Related
I was searching a while but didn't found a post about this: I'm using jQuery fadeOut() to animate an element.
I want to fade out the element with a scale of 1.75 (175%) by using jQuery's fadeOut() function. At the moment it's a common fade out animation, but I'd like that the fade out animation scales out (element inflates).
I've made an example (the lightblue element) with a CSS animation using keyframes. I would like to solve the animation with fadeOut() (maybe you have to scroll down the snippet to see the example), is this possible? I hope this is clear enough.
$('.hide').click(function() {
$('.animate').fadeOut(500);
});
$('.show').click(function() {
$('.animate').fadeIn(500);
});
.animate {
width: 150px;
height: 150px;
background-color: lightcoral;
margin-top: 20px;
}
.animate--css {
background-color: lightblue;
}
.animate--css {
width: 150px;
height: 150px;
background-color: lightblue;
margin-top: 20px;
animation: zoomOut 1s infinite;
}
#keyframes zoomOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.75);
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hide">Fade out</button>
<button class="show">Fade in</button>
<div class="animate"></div>
<div class="animate--css"></div>
You can use start to apply a CSS before fading the element:
$('.hide').click(function() {
$('.animate').fadeOut({'start':function() {$(this).css('transform','scale(1.75)') },'duration':500});
});
$('.show').click(function() {
$('.animate').fadeIn({'start':function() {$(this).css('transform','scale(1)') },'duration':500});
});
.animate {
width: 150px;
height: 150px;
background-color: lightcoral;
margin-top: 20px;
transition:0.5s all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hide">Fade out</button>
<button class="show">Fade in</button>
<div class="animate"></div>
I have set a CSS transition like
transition: all 2s
Then I apply a CSS to change the transform like:
transform: rotate(20deg);
Transition starts.
I want to stop it midway and have it stay there so I can then apply some other JS on it that is application dependent... what that is post-pausing is irrelevant to the question To test, I use:
setTimeout(function() {
...
}, 1000);
One crude way to stop the transition is to set CSS display to 'none'.
Setting transform to 'none' or empty string does not work. The transition goes to the end for transform. Another trick of resetting the CSS to the current one, works for other properties but not for transforms. Setting transition property to none or empty string also does not stop the transition's transform.
Surely there must be some way.
Any suggestion? Preferrably in JQuery
I do not want to use animation.
Why not using animation where you can easily manage the state:
$('button').eq(0).click(function() {
$('.box').css('animation-play-state', 'paused');
});
$('button').eq(1).click(function() {
$('.box').css('animation', 'none');
});
.box {
margin: 50px;
width: 100px;
height: 100px;
background: red;
display:inline-block;
vertical-align:top;
animation: anime 10s forwards;
}
#keyframes anime {
to {
transform: rotate(180deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button>Stop</button>
<button>Reset</button>
UPDATE
Here is a way that you can try with transition:
$('button').eq(0).click(function() {
$('.box').addClass('rotate');
});
$('button').eq(1).click(function() {
var e = $('.box').css('transform'); // get the current state
$('.box').css('transform', e); //apply inline style to override the one defined in the class
});
.box {
margin: 50px;
width: 100px;
height: 100px;
background: red;
display:inline-block;
vertical-align:top;
transition: all 10s;
}
.rotate {
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button>start</button>
<button>stop</button>
i have a problem with javascript.I want to control the jumbotron color and set it every 3 seconds to a random one.The problem here is that i don't know how to manipulate CSS with JavaScript, as i am pretty new to javascript.
I saw some other solutions and some other threads but it did not work.(I don't know if i did anything wrong).
I have no js code written right now as i deleted everything that did not work.
.jumbotron {
background-color: #f14444 !important;
}
/*Without the !important rule it won't change color!*/
If you have any threads that you think i haven't checked i would be happy to check them but im confident enough to say that i've seen them already.
Thanks for your time anyways!
To change the background color, simply select the element and the set the property:
setTimeout(() => {
document.querySelector('.jumbotron').style.backgroundColor = '#f14444';
}, 1000);
.jumbotron {
height: 300px;
width: 300px;
background-color: black;
}
<div class="jumbotron"></div>
Note that above will select the first found element with the given class, so if you need to target a specific element, consider giving it an id and select it as #Phil shows above.
Html elements in the DOM have a style property.
document.getElementById('something').style.backgroundColor = '#ccc'
Note that hyphenated properties like background-color in CSS are typically camel-case (backgroundColor) in Javascript.
Also you can achieve it with keyframe animation
Here is a tutorial how to get random color
#-webkit-keyframes changeColors {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
#-moz-keyframes changeColors {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
#-ms-keyframes changeColors {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
.jumbotron {
-webkit-animation: changeColors 3s infinite;
-moz-animation: changeColors 3s infinite;
-ms-animation: changeColors 3s infinite;
background-color: #f14444;
}
<div class="jumbotron">
Some text here
</div>
Is it possible to CSS animate a div's left property resulting in a div that's floated next to it moving the same incremental amount automatically?
I've produced some jsfiddle code that demonstrates my question not working the way I would like it to. Click on the red square to see it animate, albeit over the top of the blue square.
I would like #block1 to be able to in effect push #block2 by animating the CSS property 'left' of block1.
CSS:
* {
margin:0;
padding:0;
}
.red {
float: left;
position: relative;
width:100px;
height:100px;
background-color: #F00;
}
.blue {
float: left;
width:100px;
height:100px;
background-color: #00F;
}
.animateMenu {
-webkit-animation: myfirst 0.5s forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst {
from {left: 0px;}
to {left: 100px;}
}
HTML
<div id="block1" class="red"></div>
<div id="block2" class="blue"></div>
Javascript
$("#block1").on( { "mousedown" : onInteraction } );
function onInteraction(e) {
$("#block1").removeClass("animateMenu").addClass("animateMenu");
}
http://jsfiddle.net/6edgsanb/
Many thanks for any help in advance.
Instead of animating left, animate margin-left. Here's a modified fiddle.
I change the background color of the table (from lightgrey to lightgreen and back) for X seconds with CSS3 animation:
#keyframes change {
0% {background-color: lightgreen;}
99% {background-color: lightgreen;}
100% {background-color: lightgrey;}
}
the HTML code:
<tr style='background-color: lightgrey; animation: change Xs linear 5s;'>
Now I need to override the CSS animation and change the background color of the table (at any moment) to red when I click on it (and come back to lightgrey when re-click stopping the animation).
I simply try to add this code but the CSS animation always overrides the Javascript onclick command:
onclick="this.style.animationPlayState='paused'; this.style.backgroundColor='red';"
Any suggestions? Do you think it's better to do all this in Javascript?
You might want to defer that to CSS classes and selectors:
/* Skipping the -webkit prefix needed by chrome for sake of brevity */
.animated:not(.clicked) {
animation: change linear 5s;
}
#keyframes change {
0% { background-color: lightgreen; }
99% { background-color: lightgreen; }
100% { background-color: lightgrey; }
}
.clicked {
background-color: red;
}
Then, just add the clicked class when the row is clicked:
// Using jQuery for simplicity
$("table").on("click", "tr", function() {
$(this).addClass("clicked");
});
Working example: http://jsbin.com/IQaRUZa/1/edit
The solution adopted (solved with "!important" CSS3 element):
HTML code:
<tr id="1" style='background-color: lightgrey; animation: change_visite 3s linear 3s;' onclick="change(document.getElementById('1'));">
CSS code:
#keyframes change_visite {
0% {background-color: lightgreen;}
99% {background-color: lightgreen;}
100% {background-color: lightgrey;}
}
.evidenziato {
background-color: coral !important;
}
JS code:
function change(classe){
if(classe.className === "evidenziato"){
classe.className='';
} else {
classe.className='evidenziato';
}
}
Working example here: http://jsbin.com/ENAqocUb/1/edit?html,css,js,output