Develop Reference

Css animation does not occur when removing and adding class without setTimeout

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>

CSS Text colour transition to multiple values

So I am trying to implement a hover state animation for some text on my portfolio website. In short, the text needs to animate from black or white ( can change ), to white, to blue.
I've tried using something like the following
#keyframes textAnimation {
0% {
color: inherit
}
50% {
color: white
}
100% {
color: blue
}
}
However, because it's a hover animation - if I stop hovering, the animation cuts and it reverts to its previous value. I have an accompanying animation ( Purely CSS ) to go along with the hover, so I need it to basically reverse the animation back to the original value.
I've also tried adding classes to the <span> using setTimeout... however this is quite an intensive page as it is, and from past experiences, mixing JS + CSS this way - and have the timings be perfect - is super hard on lower-end machines.
P.S I'm using React.js
Any thoughts would be greatly appreciated.

You can try gradient coloration with transiton:
.text {
background-image:
linear-gradient(to bottom, currentcolor , white, blue);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
background-size:100% 1000%;
background-position:top;
background-repeat:no-repeat;
font-size: 70px;
transition:1s all;
}
.text:hover {
background-position:bottom;
}
body {
background:pink;
}
<span class="text" style="color:red">Some text</span>
<span class="text" style="color:black">Some text</span>

Here the color changes from white to blue to black but you can use any colors. It's very difficult to reverse animations only by CSS so a little js help goes a long way. Hope that helps you!
let node = document.getElementsByClassName("notesColor1"); //returns an array of all matching elements
node[0].addEventListener("mouseover",function(){
node[0].classList.add("forward");
node[0].classList.remove("backward");
});
node[0].addEventListener("mouseout",function(){
node[0].classList.add("backward");
node[0].classList.remove("forward");
});
.notesColor1{
color:white;
background-color:grey;
font-size:2rem;
}
.forward{
animation:anim 1s ease forwards;
}
.backward{
animation:anim-reverse 1s ease;
}
#keyframes anim{
0%{
color:white;
}
50%{
color:blue;
}
100%{
color:black;
}
}
#keyframes anim-reverse{
0%{
color:black;
}
50%{
color:blue;
}
100%{
color:white;
}
}
<div class='notesColor1'>notest1</div>

You can add a simple js that on hover event check: if it has a class a remove it and add
class b else remove class b and add class a.

How to stop transforms in a CSS transition

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>

jumbotron color manipulation with Javascript

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>

How to set modifying color of the image in javascript?

I have created a small web page.
I need to create the logo while dynamically changing the color of the image.
I need something like this
I have got source from w3schools, but it doesn't seem useful to me.
I want to set the change of color dynamically for an infinite time.
Can anyone give a simple example?
Thanks.
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Standard syntax */
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
<div></div>

I made a JSFiddle
You can use:
div {
-webkit-animation example 10s infinite; /* Chrome, Safari, Opera */
animation: example 10s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
0% {background-color: red;}
16% {background-color: orange;}
32% {background-color: yellow;}
48% {background-color: green;}
64% {background-color: blue;}
80% {background-color: indigo;}
100% {background-color: violet;}
}
/* Standard syntax */
#keyframes example {
0% {background-color: red;}
16% {background-color: orange;}
32% {background-color: yellow;}
48% {background-color: green;}
64% {background-color: blue;}
80% {background-color: indigo;}
100% {background-color: violet;}
}
To make it even smoother you can end at red again, JSFiddle

can you try this one , if you run this javascript your div background randomly changed in a period of time
var period = 1000;
setInterval(ChangeBG, period);
function ChangeBG() {
document.getElementById("divID").style.backgroundColor =
rgb(GetRandomValidNumber(), GetRandomValidNumber(), GetRandomValidNumber());
}
function GetRandomValidNumber() {
return (Math.floor(Math.random() * 255) + 1);
}

Unfortunately CSS3 transitions don't work on img elements according the the W3C.
But there are workarounds for this limitation (e.g. using jQuery's .animate() method).
A possible workaround for you is to have your images in multiple colors already created (via some photo editing software like Photoshop), and then implement them in IMG or DIV elements overlapping each other.
Then, using javascript's setInterval method, you may toggle the opacity of those divs slowly to make each image gradually disappear and making the one underneath it become visible (and loop this process).
Something like the following (assuming we have three images):
$(function(){
var i = 3; //top most image's index (plus 1) | total number of images
setInterval(function(){
if(i === 1){
$('.logoImage:not(:first-child)').each(function(){
$(this).animate({
opacity: 1.0
}, 400, "swing");
});
//ensure that the loop goes on
i--;
return false;
}
//reset i
i = i > 1 ? i: 3;
$('.logoImage').eq(--i).animate({
opacity: 0.0
}, 400, "swing");
}, 1000);
});
Check this out on JSFiddle.