I am using following css3 code for a 2d 360 degrees animation. It works for all browsers (except of course ie version < 10) but i cannot make it work for webkit. As you can see here the live example http://www.franksdonuts.gr/mainpage/ webkit (chrome, safari) fails. My code is the following :
#keyframes spinner {
0% {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}
.spinner {
-webkit-animation: spinner 10s infinite linear;
-moz-animation: spinner 10s infinite linear;
-ms-animation: spinner 10s infinite linear;
-o-animation: spinner 10s infinite linear;
animation: spinner 10s infinite linear;
}
Is there a better solution to achieve this 2d rotation with ie9 too?
You should use proprietary keyframes tag.
#-moz-keyframes
#-webkit-keyframes
#-o-keyframes
Have you look into Greensock JS? It's pretty amazing and so convenient.
http://www.greensock.com/get-started-js/
Enjoy!
Related
I thought I'd try out a basic bouncing icon, but I'm not seeing any bounce, and I'm stumpted as to why (are there any features in chrome/FF dev tools specifically for css animations?). I've declared keyframes for each browser prefix, and done:
animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-o-animation: bounce 2s infinite;
What else am I missing? Here's the fiddle: https://jsfiddle.net/p0n5dL59/
The animation properties you defined in your #keyframes need to go on the element the animation applies to instead. Then the #keyframes needs to define what happens in the animation, like
#keyframes animation-name {
to {
color: red;
}
}
Here's a reference https://css-tricks.com/snippets/css/keyframe-animation-syntax/
I am trying to make a similar example like https://css-tricks.com/svg-line-animation-works but I would like it to rotate infinite.
#path1 {
stroke-dasharray: 170;
-webkit-animation: animate1 5s infinite; /* Chrome, Safari, Opera */
animation: animate1 5s infinite;
}
#keyframes animate1 {
to {
stroke-dashoffset: 1000;
}
}
#-webkit-keyframes animate1 {
to {
stroke-dashoffset: 1000;
}
}
I made an example http://jsfiddle.net/46cmu71t/. I put the code to do this infinite but it slow down and then start again. Is there any way to make it rotate without losing speed?
Very easy to do, add the linear method to the transition line:
#path1 {
stroke-dasharray: 170;
-webkit-animation: animate1 5s infinite linear; /* Chrome, Safari, Opera */
animation: animate1 5s infinite linear;
}
More about CSS transition timing
More about CSS transitions
JSFiddle Demo
Might want to read up a bit more on CSS Animations. The property you’re looking for is called a timing function. By default an animation is set to ease-out, and you should be using linear instead. E.g.
#path1 {
stroke-dasharray: 170;
-webkit-animation: animate1 5s infinite linear; /* Chrome, Safari, Opera */
animation: animate1 5s infinite linear;
}
Updated fiddle: http://jsfiddle.net/mfgmxhqm/
I've just set up a few css animations and everything is running smoothly in Chrome and Safari however Firefox doesn't appear to be playing nice.
The following code:
#clock-animation .hour {
-webkit-animation: anti-spin 30s infinite;
animation: anti-spin 30s infinte;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
Appears to be displaying as:
#clock-animation .hour {
transform-origin: 50% 50% 0;
}
When viewed in Firebug and consequently the animation isn't playing.
I'm a tad confused as to why this is and nothing appears to be fixing it.
Here are the keyframes used too:
#-webkit-keyframes anti-spin {
100% {
-webkit-transform: rotate(-360deg);
}
}
#keyframes anti-spin {
100% {
transform: rotate(-360deg);
}
}
According to http://shouldiprefix.com/ the -moz prefix isn't needed for keyframes, animation or transform. Nor is the -webkit which is only needed for Chrome and Safari. Any help would be great.
Edit: Just to mention that the IDs and classes are part of an inline SVG file. I'm not sure if that is relevant or not?
Edit: Heres a link to a demo https://jsfiddle.net/0Lha6dfg/ (Works fine in Chrome / Safari but not in FF (36.0.1))
Make sure to write out your animation shorthand property in full, do not skip properties. Shorthand format from w3 specs:
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Becomes:
div {
animation: example 5s linear 2s infinite alternate;
}
So in your example add the animation-delay:
animation: anti-spin 30s linear infinite;
Should be:
animation: anti-spin 30s linear 0s infinite;
Also watch out for typos, in some places you have "infinte" instead of "infinite".
When scaling an SVG image using CSS scale transform, the image gets blurred under Chrome or Safari?
Here is a bit of my code:
#logo {
animation: cssAnimation 120s infinite;
-webkit-animation: cssAnimation 120s infinite;
-moz-animation: cssAnimation 120s infinite;
}
#keyframes cssAnimation {
0% { transform: scale(1) }
50% { transform: scale(2) }
100% { transform: scale(1); }
}
Many thanks for any help!
Raphaël
Thanks a lot War10ck! This article helped me: when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I'm animating an element with a border
Using scale3d instead of scale, not going over 1, made the trick!
I'm playing with some css transitions and setting a different animation-delay for dynamic elements so the css animations are staggered on the page.
Here is the animation
-webkit-animation: bounceInLeft .5s ease-in 0s backwards;
-moz-animation: bounceInLeft .5s ease-in 0s backwards;
animation: bounceInLeft .5s ease-in 0s backwards;
The actual animation is working fine on both ff and chrome but on firefox the animations are correctly delayed in intervals whereas on chrome all the animations happen instantly.
Here is the inline code. This works correctly on firefox
style="animation-delay: 1s;"
This does not work on chrome
style="-webkit-animation-delay: 1s;"
I have specified a delay in the animation rule but I thought that placing one inline would override it, which it does on firefox. Any ideas? Thanks
I just created a jsfiddle replicating you situation and it seems to be honoring the inline delay in chrome for me. Perhaps there is an issue elsewhere. Check out this fiddle, maybe it will help illuminate a separate issue. http://jsfiddle.net/vFKuu/
HTML
<div id="some-div" style="animation-delay: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s;">Hi</div>
Javascript
#some-div
{
width:100px;
height:20px;
background:#f00;
font-family:Arial;
-webkit-animation: cssAnimation .5s ease-in 0s backwards;
-moz-animation: cssAnimation .5s ease-in 0s backwards;
-o-animation: cssAnimation .5s ease-in 0s backwards;
animation: cssAnimation .5s ease-in 0s backwards;
}
#keyframes cssAnimation {
from { transform: translate(50px); }
to { transform: translate(0px); }
}
#-webkit-keyframes cssAnimation {
from { -webkit-transform: translate(50px); }
to { -webkit-transform: translate(0px); }
}
#-moz-keyframes cssAnimation {
from { -moz-transform:translate(50px); }
to { -moz-transform: translate(0px); }
}
#-o-keyframes cssAnimation
{
from { -o-transform: translate(50px); }
to { -o-transform: translate(0px); }
}
I've found something weird. For some reason the only way the inline would override the style rule in chrome is if the animation-delay is a value that is not 0.
It works fine in firefox if the value is 0 just not chrome. I fixed it by changing the initial value of the delay to 1s then overriding it using inline styles.