I have a CSS animation inside of an application we're working on that was working before we started upgrading it to Windows 8.1. It is a relatively simple rotation transform that intended to make an image spin. The below is our CSS which seems valid and runs fine in IE11 with a test page.
.spinner img {
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
It turned out nothing was wrong with the animation declaration itself, as expected. We had just wrapped the keyframes definition inside of a media query. Apparently, even though the media query was valid and was being correctly applied, neither IE11 nor Windows 8.1 would render the animation.
Long story short, moving the keyframes definition outside of the media query resolved the issue.
Related
I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
I'm using a basic CSS loading indicator, based on the one from w3schools. It works great except when using IE 10, where it jumps around.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader
Does anyone know of a workaround for IE10?
.loader {
...
border-radius: 50%;
animation: spin 2s linear infinite;
...
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
I made a test with Document mode using developer tools in IE11.
I notice that it shows the result correctly but it also shows a popup to allow block content.
If you allow it then code get break.
with other older versions of IE it not showing any pop up but also not working.
Below is my testing result.
So You can try to make a test without allowing content to check whether it is working with IE10 or not.
I want change content in class .glyphicon-volume-down:before (class icon in bootstrap) but only work on Google Chrome.
My keyframes don't change the content attribute but it is changing the color.
I don't know what I am missing? I don't want use JavaScript.
Here is my code :
.glyphicon-volume-down:before{
/*name keyframes is w-spin*/
animation-name:w-volume;
/*time animation done is 2s*/
animation-duration: 2s;
/*delay time when start animation is 0s*/
animation-delay: 0s;
/*loop animation forever*/
animation-iteration-count:infinite;
/*effect animation run with the same speed from start to end*/
animation-timing-function:linear;
/*default pause animation*/
/*animation-play-state:paused;*/
/*repeat*/
animation-direction: alternate;
-webkit-animation-name: w-volume;
-webkit-animation-duration: 2s;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
/*-webkit-animation-play-state:paused;*/
-webkit-animation-direction: alternate;
}
#-webkit-keyframes w-volume {
0% {
content:"text1";
color:yellow;
}
100% {
content:"text2";
color: red;
}
}
#keyframes w-volume {
0% {
content:"text1";
color:yellow;
}
100% {
content:"text2";
color: red;
}
}
The animation of content property does not work in Firefox because it is not an animatable property and as per the working draft of the W3C specs any property that is not animatable will be ignored.
Quoting the W3C Spec: (emphasis is mine)
The keyframe declaration block for a keyframe rule consists of properties and values. Properties that are unable to be animated are ignored in these rules, with the exception of ‘animation-timing-function’
The above extract would imply that the behavior in Firefox is correct whereas the one in Chrome isn't but as BoltClock points out in this answer, the spec's editor's draft has been updated and the updated text seems to imply that Chrome's behavior is the correct one. Maybe Firefox will change the behavior someday but since this spec has not reached maturity, it may take time.
The keyframe declaration block for a keyframe rule consists of properties and values. The properties defined by this specification are ignored in these rules, with the exception of animation-timing-function
I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
I'm using SASS so my CSS syntax looks weird, but anyway, the problem is, that my rotate animation starts well on chrome and firefox, but works only partially on Safari. To be specific, rotateY, scale, skew work normally, but rotate and translateX don't. What is more importat, after I go to another tab and then go back in Safari - suddenly it works as expected.
This is the animation in Safari (before switching tabs):
Safari
Instead of that:
Chrome
Basically, all images appear in the center, and only scale and rotateY animation works, but translate and rotate transitions don't.
To keep it simple this is only the part of the code I use for Safari:
#mixin orbit ($name,$time,$modifier,$skewX,$skewY,$perspective,$rotateY,$startScale,$middleScale){
#at-root (without: media) {
#-webkit-keyframes myOrbit_#{$name} {
from { -webkit-transform: rotate($modifier+deg) translateX(150%) rotate($modifier+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY(0deg) scale($startScale,$startScale); }
50% { -webkit-transform: rotate($modifier+(-180)+deg) translateX(150%) rotate($modifier+180+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY/2+deg) scale($middleScale,$middleScale); }
to { -webkit-transform: rotate($modifier+(-360)+deg) translateX(150%) rotate($modifier+360+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY+deg) scale($startScale,$startScale); }
}
-webkit-animation: myOrbit_#{$name} $time+s linear infinite;
}
I've noticed that when I defined the animation with
-webkit-animation-play-state: paused;
then the "satellites" were positioned properly. So the solution was to start the animation with time offset. In my case this helped:
-webkit-animation-delay: 5ms;
One tricky thing was that I had to put it after other -moz- -o- and "regular" animation properties, otherwise is didn't work, like if it was overwritten.