element style has different value from computed style - css

I came across a puzzling issue, where the computed style of an attribute has a different value than the element's style.
A few words first to describe my situation
I am animating the background-color property of an element and when the animation ends,
I retrieve the computed bgcolor value and apply it to the element's style. This works fine
However, if I try now to alter the bgcolor nothing happens, although the value is indeed set on the element, as the developer tools report.
At this point if you toggle (through the browser's developer tools) between style and computed style, there is a discrepancy between what the 2 report, with the computed style taking precedence of course.
I have created a test script on fiddle that depicts the situation
http://jsfiddle.net/d2S3d/14/
Attaching also some sample css cause stackoverflow does not let me to submit the post without it
.animate{
animation-name: bg_kf;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: normal;
-webkit-animation-name: bg_kf;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-direction: normal;
-moz-animation-name: bg_kf;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-moz-animation-direction: normal;
-o-animation-name: bg_kf;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 0s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode: forwards;
-o-animation-direction: normal;
}
#keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:red}
}
#-moz-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:red}
}
#-webkit-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:rgba(255, 140, 74, 0.16)}
}
#-o-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:rgba(255, 140, 74, 0.16)}
}
Any help appreciated
regards

The problem here is that the animation properties you have defined in .animate keep the background color red, regardless of what the actual inline style rule specifies. This is why toggling the inline style doesn't seem to have any effect.
If you were to remove the .animate class right after you apply the inline style, everything will once again be back to normal:
$("#sample").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
var computedBg = $(this).css('background-color');
$(this).css('background-color', computedBg);
$(this).removeClass('animate');
});
Here is a demonstration (try clicking the button after the animation has completed): http://jsfiddle.net/vcfDj/

You've set animation-fill-mode "forwards". The effect of that is to hold the animated CSS properties at the values they were when the animation ended (regardless of other style settings). Setting it to "none" will fix your problem!

Related

What does animation:none do exactly?

I've got an HTML element here with this starting style:
transition: transform 2s;
First, it is animated (it rotatesX) via a class that is added on click. On the next click, another class is added that adds a transform3d that should move the element vertically and this should take 2 seconds as per the rule above.
The transform3d doesn't take effect unless I add this rule to the element: animation: none as well. I am confused on what animation: none actually does. Are there complications with transforming an element that has had an animation applied to it?
animation: none sets all animate-* properties to their initial value:
animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
The problem is that your element has an animation which affects its transform property. Therefore, when you modify its static transform, you don't see the change because it's overridden by the animation.
Then, if you remove the animation, you see the change in transform.
This is unrelated to transforms, it would happen with any property, like color:
div {
animation: color-anim 1s infinite;
}
#keyframes color-anim {
from { color: red }
to { color: blue }
}
<div>Lorem ipsum</div>
<button onclick="document.querySelector('div').style.color = '#fff'">Make white</button>
<button onclick="document.querySelector('div').style.animation = 'none'">Remove animation</button>

animation-x invalid property value

I am trying to create an animation but when I use the following css:
.drop.animation {
animation-name: ripple;
animation-duration: 0.65s;
animation-timing-function: linear;
}
I get an error in the chrome developer tools that states beside an orange triangle with an exclamation mark that all of those are "invalid property values".
What are the proper values? I am trying to use these values.
As soon as you are in Chrome, you would use the -webkit- prefix for those values:
.drop.animation {
-webkit-animation-name: ripple;
-webkit-animation-duration: 0.65s;
-webkit-animation-timing-function: linear;
}
Also there was a typo in the last property.

CSS3 animation using keyframes alternate not firing

I am trying to achieve a dead simple animation using rotations and keyframes, the animation is fired when the user hovers an element.
The problem is that when the user stops hovering the element the animation is not fired backwards
A live demo of my problem http://jsfiddle.net/9eWhC/
Κeep in mind that the animations declaration has been added to the hover event
.b:hover {
z-index:900;
-webkit-transform:rotateX(-180deg);
-moz-transform:rotateX(-180deg);
-webkit-animation-name: spinz;
-moz-animation-name: spinz;
-ms-animation-name: spinz;
-o-animation-name: spinz;
animation-name: spinz;
animation-direction: alternate;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-ms-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}
alternate cannot help you here - you need to play the animation at least twice for the same state, either normal (.b) or hover (.b:hover)to notice the effect of alternate. What you need to do in order to have the same animation reverset when hovering off is set that same animation on the normal state (.b) as well, but with an animation-direction of reverse.
modified fiddle

transform scale element when keyframe animation applied to it

I have an element that has css3 animation with keyframes applied to it but still I want to scale this element. But it seems that because transform translate is already applied in the animation transform scale is not working
e.g.: let say I have 4 clouds (div elements) moving from right to left, I want those clouds to be different scales
.x1 {
-webkit-animation-name: moveclouds;
-moz-animation-name: moveclouds;
animation-name: moveclouds;
-webkit-animation-duration: 170s;
-moz-animation-duration: 170s;
animation-duration: 170s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: scale(0.79);
-moz-transform: scale(0.79);
-ms-transform: scale(0.79);
-o-transform: scale(0.79);
transform: scale(0.79);
}
.x2{ ...}
.x3{...}
.x4{...}
#keyframes moveclouds {
from {
transform: translateX(2400px);
/* note: I'm using vendor prefixes, I just want to simplified it here */
}
to {
transform: translateX(-200px);
}
}
animation works well, scale not
question: anyone got an ide how to enforce the scale ?
I'm using this example http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background but tweeking it a bit (see the keyframe difference)
When setting a CSS property, you must set the complete value for the property. So in your example you are wanting to set the TRANSFORM property with multiple types of transforms (translateX and scale). You must set ALL transforms on a single property. Remove the current SCALE styles, and do the following (with vendor prefixes). Yes... you will have duplication. This is a shortcoming of complex CSS3 property values.
#keyframes moveclouds {
from {
transform: translateX(2400px) scale(0.79);
/* note: I'm using vendor prefixes, I just want to simplified it here */
}
to {
transform: translateX(-200px) scale(0.79);
}
}
To expand on this more, if you had an element with multiple background images:
.some-div {
background-image: url("img1.png"), url("img2.png");
}
and you wanted to change img2.png to img3.png on hover, you would have to:
.some-div:hover {
background-image: url("img1.png"), url("img3.png");
}

-webkit-animation-fill-mode in safari

i am using keyframes to scale an element on my webpage. The problem is that the animation is running perfectly in chrome but its not running in safari. I am providing values at 0% , 80% and 100% in keyframes and everytime the animation ends it goes back to the properties defined at 80% and not 100%. i also used fill-mode to stop animation at last frame but still got no solution.
#-webkit-keyframes leftpageanim {
0%{ -webkit-transform:scale(1);
bottom:-26px;
}
80%{
-webkit-transform:scale(1.8) ; bottom:140px;
}
100%
{
-webkit-transform:scale(1.7); bottom:120px; }
}
after the animation ends its again reverting back to properties of 80%
I did some changes in the code. Look at this jsfiddle. The animation now stops at 100%. That's what you wanted, right?
from:
.animator {
-webkit-animation-name: leftpageanim;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 5s;
to:
.animator {
-webkit-animation: leftpageanim 5.0s ease-in-out forwards;
-webkit-animation-iteration-count: 1;

Resources