I want to flip an image instantly every 1000ms. I'm trying but the animation does what it's supposed to do (gradually flip the picture). If i can flip instantly the picture it will give the idea of a walking duck. I know I can use setInterval() but I'd rather do this in CSS only.
.duck {
position: absolute;
animation: flip-me;
animation-duration: 1000ms;
animation-direction: alternate;
animation-iteration-count: infinite;
}
#keyframes flip-me {
0% { transform: scaleX(1) }
100% { transform: scaleX(-1) }
}
You can consider steps()
img {
animation: flip-me 2s steps(1) infinite;
}
#keyframes flip-me {
50% { /*Pay attention: it's 50% not 100% !!*/
transform: scaleX(-1)
}
}
/*no need 0% or 100% state as they be set by default to scaleX(1)*/
<img src="https://picsum.photos/200/200?image=1069">
I have an animation that works fine on Firefox, Chrome but does not work on Safari and Edge.
The animation objects are contained in a svg file loaded with js.
The idea is that elements appear in succession at the center of screen and then move up to their intended final location.
An example of the css I use to achieve this is:
#-webkit-keyframes move-you {
0% {
opacity: 0;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
50% {
opacity: 1;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
100% {
opacity: 1;
-webkit-transform: translate(450px,222px);
transform: translate(450px,222px);
}
}
#keyframes move-you {
0% {
opacity: 0;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
50% {
opacity: 1;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
100% {
opacity: 1;
-webkit-transform: translate(450px,222px);
transform: translate(450px,222px);
}
}
.svgLoaded #you {
-webkit-animation: move-you 1s ease-in 3s;
animation: move-you 1s ease-in 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
So, this works fine on Firefox and Chrome but the translation does not happen in Safari and Edge. Not a massive problem if large screen are used as everything is still visible,
( you can see example here )
but it means that I cannot translate items to where I want them on a small screen.
I have been stack on this for more than a day, the only answer I found was about missing brackets but I checked my code and all brackets are balanced. Any help would be really appreciated.
I think this would probably work:
#-webkit-keyframes move-you {
0% {
opacity: 0;
-webkit-transform: translate(450px,400px);
}
50% {
opacity: 1;
-webkit-transform: translate(450px,400px);
}
100% {
opacity: 1;
-webkit-transform: translate(450px,222px);
}
}
#keyframes move-you {
0% {
opacity: 0;
transform: matrix(1,0,0, 1,0,0, 450, 400);
}
50% {
opacity: 1;
transform: translate(1,0,0, 1,0,0, 450, 400);
}
100% {
opacity: 1;
transform: translate(1,0,0, 1,0,0, 450, 222);
}
}
.svgLoaded #you {
-webkit-animation: move-you 1s ease-in 3s;
animation: move-you 1s ease-in 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
There are a lot of problems with animating SVGs on different browsers. They all work different.
Here are some of the problems with creating consistent animations with SVGs:
IE and Opera don't honor CSS transforms at all on SVG elements. Instead, you must assign the value to the transform attribute.
Firefox didn't honor %-based origins in early versions (in latest versions it does).
Zooming in Safari breaks the sync between %-based and px-based origins.
Firefox doesn't recognize keyword-based origins like "right bottom", and Safari alters them when the zoom is anything but 100%.
In all browsers, px-based origins are measured differently for SVG elements than other DOM elements (see below).
quotation of document on SVG transformations in css-tricks
I found that using libraries like TweenMax do a pretty good work with almost all the browsers.
Of course there are some specific ways you should animate some of the properties so that they can work on IE 11. Few of them:
- Circle radius
- transitions
You can check the tips and tricks for the tool in css-tricks:
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".
I'm trying to animate two images to a center point and then rotate them concurrently. I'm not sure how to transform the svgs before the animation begins. See the following model.
I need to do a transform: rotate(90deg) before the animation begins (on :hover). I can't seem to get the transform to take effect before the animation. See the following codepen:
See my codepen: http://codepen.io/himmel/pen/dPzVmg
instead of delaying the animation
.svg-container-burger {
-webkit-animation: rotateClockwise 1s linear;
-webkit-animation-delay: 1s;
}
and trying to rotate the objects before the animation, just extend the animation to the pause prior to it, and set the rotation in it
.svg-container-mouth {
-webkit-animation: rotateClockwise 2s linear;
}
#-webkit-keyframes rotateClockwise {
0% {
-webkit-transform: rotate(-90deg);
}
50% {
-webkit-transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
codepen
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!