In rotate animation, works in Chrome but not in Firefox. Why?
#-moz-keyframes rotate {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#example {
background: red;
width: 100px;
height: 100px;
-moz-animation: rotate 20s linear 0 infinite;
-webkit-animation: rotate 20s linear 0 infinite;
}
http://jsfiddle.net/WsWWY/
Current Firefox implementations fail unless time values of 0 have units. Use 0s or 0ms.
http://jsfiddle.net/WsWWY/1/
Note: The W3C explicitly allows for the number 0, without units, to be a length value, but it says no such thing for other values. Personally, I hope this changes, but for the time being the Firefox behavior is not incorrect.
Related
I've been stuck on this problem for 3 days and have scoured the Internet for a solution, but haven't been able to find one that works yet.
I have an animation of a cartoon rocket flying across a screen. The rocket has 4 chained keyframe animations applied to it:
1.) "launch" moves the rocket from off the left side of the screen, across to the right
2.) "rightself" rotates the rocket so it's pointing up
3.) "descend" moves the rocket down towards a planet
4.) "shrink" makes the rocket smaller as it approaches the planet's surface
I can't add a video here, but here are links to how it should and shouldn't look:
How it should look:
https://twitter.com/planet_katie/status/1415739110505996291
How it's glitching on all iOS browsers and desktop Safari:
https://twitter.com/planet_katie/status/1418312787906998275
Game Link, if you want to try yourself: http://www.codeeverydamnday.com/projects/rocketblaster/index.html
The rocket animation runs smoothly on desktop Chrome and Firefox, but glitches in Safari. It also runs smoothly on Android phones, but again glitches on every browser I've tried on an iPhone. The iPhone emulator in Chrome's dev tools shows it running smoothly as well, so I'm not sure why it's not translating to the iPhone itself.
Things I have tried:
Changing my svg images to png's, as I read that sometimes svg's behave unexpectedly
Added all of the proper -webkit- prefixes
Condensing the 4 animations into 1
Using the longhand format when adding my CSS animation on my element (animation-name, animation-duration, animation-iteration-count, etc) instead of the shorthand format
Including both the 0% and 100% keyframes for each animation
Adding a 0.01 second delay to the first animation (read somewhere that this helped someone else)
So far, no luck. Anyone able to take a look at my code and see if I'm missing anything? Note: I have removed the -moz-, -ms- and -o- prefixes for brevity, but they are in my code as well.
#rocketfire {
background-color: red;
position: absolute;
top: 100px;
left: -320px;
height: 200px;
-webkit-animation: launch 4s ease-in-out 0.01s 1 forwards,
rightself 2s ease-in-out 3.5s 1 forwards,
shrink 3.5s ease-in-out 4s 1 forwards, descend 4s ease-in-out 5s 1 forwards;
animation: launch 4s ease-in-out 1 forwards,
rightself 2s ease-in-out 3.5s 1 forwards,
shrink 3.5s ease-in-out 4s 1 forwards, descend 4s ease-in-out 5s 1 forwards;
}
#-webkit-keyframes launch {
0% {
-webkit-transform: translateX(-0px);
}
100% {
-webkit-transform: translateX(1050px);
}
}
#keyframes launch {
0% {
transform: translateX(-320px);
}
100% {
transform: translateX(1050px);
}
}
#-webkit-keyframes rightself {
0% {
-webkit-transform: translateX(1050px) rotate(0deg);
}
100% {
-webkit-transform: translateX(1050px) rotate(-82deg);
}
}
#keyframes rightself {
100% {
transform: translateX(1050px) rotate(-82deg);
}
}
#-webkit-keyframes descend {
0% {
-webkit-top: 0px;
}
100% {
-webkit-top: 270px;
}
}
#keyframes descend {
100% {
top: 270px;
}
}
#-webkit-keyframes shrink {
0% {
-webkit-transform: translateX(1050px) rotate(-82deg) scale(1);
}
100% {
-webkit-transform: translateX(1050px) rotate(-82deg) scale(0.5);
}
}
#keyframes shrink {
100% {
transform: translateX(1050px) rotate(-82deg) scale(0.5);
}
}
<img id="rocketfire" src="images/rocketfireright.png" />
I think you shouldn’t need the -webkit versions of the animations, so removing those will make the CSS easier to debug. I found a couple of inconsistencies and missing values. Cleaned up, the CSS looks like the following:
#rocketfire {
background-color: red;
position: absolute;
top: 100px;
left: -320px;
height: 200px;
animation: launch 4s ease-in-out 1 forwards,
rightself 2s ease-in-out 3.5s 1 forwards,
shrink 3.5s ease-in-out 4s 1 forwards,
descend 4s ease-in-out 5s 1 forwards;
}
#keyframes launch {
0% {
transform: translateX(-320px);
}
100% {
transform: translateX(1050px);
}
}
#keyframes rightself {
0% {
transform: translateX(1050px) rotate(0deg);
}
100% {
transform: translateX(1050px) rotate(-82deg);
}
}
#keyframes descend {
0% {
top: 0px;
}
100% {
top: 270px;
}
}
#keyframes shrink {
0% {
transform: translateX(1050px) rotate(-82deg) scale(1);
}
100% {
transform: translateX(1050px) rotate(-82deg) scale(0.5);
}
}
Try that and see if it fixes it!
What ultimately worked for me was combining the four animations into one, like this:
#keyframes launch {
30% {transform: translateX(1050px) rotate(0);}
50% {transform: translateX(1050px) scale(1) rotate(-82deg); top: 100px;}
80% {transform: translateX(1050px) scale(0.5) rotate(-82deg);}
100% {transform: translateX(1050px) scale(0.5) rotate(-82deg); top: 270px;}
}
Seems like Safari had a problem trying to run multiple keyframes animations at once.
This question already has answers here:
Stopping a CSS animation but letting its current iteration finish
(3 answers)
Closed 3 years ago.
I am using css keyframes animation to make a ring rotate around an image. And the design is something like this:
And for this target, I use this css styling:
.upload-logo {
width: 150px;
height: 150px;
position: relative;
cursor: pointer;
.rings {
border-right: 12px solid #a3a1fb;
border-left: 12px solid #edecfe;
border-radius: 50%;
border-top: 12px solid #a3a1fb;
border-bottom: 12px solid #edecfe;
width: 100%;
height: 100%;
#-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
&.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
}
This way, the ring, rotates around the circle inside, while the ring has class rotating. When I start the rotation everything is right, now the question is:
How to break the infinite animation, but let the current cycle to complete.
By now, I am removing the rotating class and the ring suddenly rolls back to its initial state which is bad indeed. I want just remove the infinite descriptor from animation params, to let it finish your job and stop please.
UPDATE
I have tested a way but it is not complete. The solution is to add another class to the element for example named stop. And then for this class I have written these styling:
.stop{
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
}
Now, if the job finishes in the middle of first round, it works fine and it finishes by completing the round, but if in the later rounds, it will break again suddenly.
There is no way without javascript.You need to use "animationiteration" event to remove the "rotating" class. so whenever you decide to set the current iteration the last one, add a "on" or "one" EventHandler to your element and inside the listener remove animation class.
this should do the job :
$(".rings").one('animationiteration', function() {
$(this).removeClass("rotating");
});
If you don't want to revert to the initial state, then can pause the animation by adding the following css and add this class to your element
.paused {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
Is there a way to pulsate opacity from 0 to 1 (repeat) slowly with a CSS3 keyframes transformation, infinitely? Or does this require jQuery or Javascript with a transition opacity inside a class that is toggled on an interval?
I'm trying to work it into my orbit transformations (below). (I'm working on a live wallpaper background effect with multiple opaque images floating in a sidebar image on an installer application I'm building in Objective C.)
.orbit1
{
animation: myOrbit 200s linear infinite;
}
.orbit2
{
animation: myOrbit2 200s linear infinite;
}
#keyframes myOrbit1
{
from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}
#keyframes myOrbit2
{
from { transform: rotate(360deg) translateX(250px) rotate(-360deg) }
to { transform: rotate(0deg) translateX(250px) rotate(0deg) }
}
You can do it by adding multiple animations to the element, for example:
.orbit1
{
/* added for example reasons */
position :absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
background: red;
/* ---------- */
animation: myOrbit1 20s linear infinite, Pulsate 4s linear infinite;
}
#keyframes myOrbit1
{
from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}
#keyframes Pulsate {
from { opacity: 1; }
50% { opacity: 0; }
to { opacity: 1; }
}
<div class="orbit1"></div>
I'ved modified some of your parameters (like the speed of the animation and the opacity minimum) and added some spoof styling for the element for the purpose of the example.
Edit
I had originally thought that the multiple rotate() declarations were in error, but #vals informed me why it was there (to create a counter rotation on the object). I've updated the answer, and learned something new.
I have a background image that has an arrow that points to the right. When a user clicks on the button, the selected state changes the arrow to point down (using a different background position in my image sprite).
Is there anyway to animate this using CSS3 so once the button is clicked and jQuery assigns it a "selected" class, it will rotate in an animation (only 90 degrees) from the right to down? (preferably using the single image/position with the arrow that points to the right)
I'm unsure as to whether transform or key animation frames need to be used.
you could use the ::after (or ::before) pseudo-element, to generate the animation
div /*some irrelevant css */
{
background:-webkit-linear-gradient(top,orange,orangered);
background:-moz-linear-gradient(top,orange,orangered);
float:left;padding:10px 20px;color:white;text-shadow:0 1px black;
font-size:20px;font-family:sans-serif;border:1px orangered solid;
border-radius:5px;cursor:pointer;
}
/* element to animate */
div::after /* you will use for example "a::after" */
{
content:' ►'; /* instead of content you could use a bgimage here */
float:right;
margin:0 0 0 10px;
-moz-transition:0.5s all;
-webkit-transition:0.5s all;
}
/* actual animation */
div:hover::after /* you will use for example "a.selected::after" */
{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
HTML:
<div>Test button</div>
in your case you will use element.selected class instead of
jsfiddle demo: http://jsfiddle.net/p8kkf/
hope this helps
Here is a rotating css class that I have used to spin a background image:
.rotating {
-webkit-animation: rotating-function 1.25s linear infinite;
-moz-animation: rotating-function 1.25s linear infinite;
-ms-animation: rotating-function 1.25s linear infinite;
-o-animation: rotating-function 1.25s linear infinite;
animation: rotating-function 1.25s linear infinite;
}
#-webkit-keyframes rotating-function {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotating-function {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-ms-keyframes rotating-function {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-o-keyframes rotating-function {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotating-function {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
I have a bit of CSS3 animation which works perfectly in all the browser which support CSS3 except safari. Weird isn't it? Ok here's my code:
HTML
<div class="right">
<div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>
CSS
.landing .board .right {
width: 291px;
height: 279px;
background: url('../images/landing/key-pnl.png');
bottom: 16px;
right: 250px;
position: absolute;
}
.landing .board .right .key-arm {
position: absolute;
left: 44px;
top: 18px;
width: 41px;
height: 120px;
}
/*=== Key Arm Animation ===*/
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes keyarm {
0% { -moz-transform: rotate(0deg); }
5% { -moz-transform: rotate(-14deg); }
10% { -moz-transform: rotate(0deg); }
}
#-ms-keyframes keyarm {
0% { -ms-transform: rotate(0deg); }
5% { -ms-transform: rotate(-14deg); }
10% { -ms-transform: rotate(0deg); }
}
#-o-keyframes keyarm {
0% { -o-transform: rotate(0deg); }
5% { -o-transform: rotate(-14deg); }
10% { -o-transform: rotate(0deg); }
}
#keyframes keyarm{
0% { transform: rotate(0deg); }
5% { transform: rotate(-14deg); }
10% { transform: rotate(0deg); }
}
.right .key-arm{
-webkit-transform-origin: 12px 105px;
-moz-transform-origin: 12px 105px;
-ms-transform-origin: 12px 105px;
-o-transform-origin: 12px 105px;
transform-origin: 12px 105px;
-webkit-animation: keyarm 8s ease-in-out 0s infinite;
-moz-animation: keyarm 8s ease-in-out 4s infinite;
-ms-animation: keyarm 8s ease-in-out 4s infinite;
-o-animation: keyarm 8s ease-in-out 4s infinite;
animation: keyarm 8s ease-in-out 0s infinite;
}
Ok this doesn't work in Safari as I said, there's no movement whatsoever.
Also, still and only in Safari, the key-arm div shows only if you resize the screen! It's there in the DOM but for some reason it doesn't show up!
What am I doing wrong?
Thanks
Mauro
UPDATE: Ok from your answers I got that #keyframes is not supported on Safari 4. It's strange because on the same page I have an animation that works using #keyframes!
here's the CSS code:
.board .rays{
background: url("../images/landing/rays.gif") no-repeat 0 0 red;
height: 381px;
left: 251px;
opacity: 1;
top: 80px;
width: 408px;
position: absolute;
}
.board .bottle{
background: url("../images/landing/bottle.gif") no-repeat 0 0 lime;
bottom: 30px;
height: 405px;
left: 276px;
width: 357px;
z-index: 1;
position:absolute;
}
/*=== Rays Animation ===*/
#-webkit-keyframes rays{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-moz-keyframes rays{
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
.board .rays{
-webkit-animation: rays 40s linear 0s infinite;
-moz-animation: rays 40s linear 0s infinite;
animation: rays 40s linear 0s infinite;
}
And the html:
<div class="board">
<div class="rays"></div>
<div class="bottle"></div>
</div>
Try it yourself in jsFiddle (if you have Safari 4) and you'll see
Found the solution. In Safari when you use Keyframes you need to use the whole percentage:
this won't work:
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
this will:
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}
Don't know why but that's the way Safari works! :)
I was having troubles with CSS3 animation working in Safari 6, but not in Safari 4 (4.0.5).
It appears that the shorthand notation will not work in Safari 4.
So this won't work :
-webkit-animation: rays 40s linear forwards;
But this will work :
-webkit-animation-name: rays;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
In situations where you're trying to animate transform on something as soon as it's injected into the DOM, I've had to add a very brief delay, like this:
animation: rays 40s linear 0.01s infinite;
I struggled with an animation working in Safari 14 (14.1.2), but not in Safari 15, and thought I'd add my findings here.
This css is part of the scrolling text loop here.
#banner-loop {
white-space: nowrap;
animation: loop-anim 5s linear infinite;
}
#keyframes loop-anim {
0% { margin-left: 0; }
100% { margin-left: -50%; }
}
I noticed that the animation "played", but didn't animate.
I tried the solutions from the other answers here, but nothing worked (including having the -webkit prefix). In the end the problem was solved by changing the start keyframe value to 0% instead of 0.
It looks like Safari can't handle the unit-less 0 shorthand in this case.
Try force quitting Safari and/or rebooting your phone (assuming you're on a phone).
Just had animations fail in Safari 15 for no apparent reason - very simple ones such as opacity and simple keyframes.
I noticed my phone was doing that thing where the white homescreen indicator gets permanently stuck on the long side of the phone even when holding it vertically. A reboot is usually needed to fix that.
Turns out rebooting also fixed the animations in Safari.
Another thing to remember with Safari is that low battery mode can affect animations and make them less smooth (and prevent muted autoplay videos from auto playing).
#-webkit-keyframes { <- let this symbol to the same line
} - >
This works on iphone 3 ios 6.1.6
with -webkit- prefix on transform and animation