This has really been killing me, not sure what the issue is because I have all the -moz- options.
Animation works fine in webkit but not Firefox.
Here's my CSS:
#-webkit-keyframes flip {
from {
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
to {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
}
#keyframes flip {
0% {
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
100% {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
}
.jig-loaded img {
-webkit-animation: flip 1.0s !important;
animation: flip 1.0s !important;
-moz-animation: flip 10.0s !important;
}
Thanks so much!
#user3154772: As per my understanding. I have resolve below code.Please check and try it.
#-webkit-keyframes flip {
from {
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
to {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
}
#-moz-keyframes flip {
from {
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
to {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
}
#keyframes flip {
0% {
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
100% {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
}
.jig-loaded img {
-webkit-animation: flip 1.0s !important;
animation: flip 1.0s !important;
-moz-animation: flip 10.0s !important;
}
Related
Demo:
http://www.suanle.lol/move.php
In the animation demo you can see that when the egg just at the point of bouncing back, it flashes out for a second then flashed in. This makes the animation broken. So I wondered why this is happening and how I could fix it?
If you want to check the Gif:
Actually not just limited to the .gif, the problem occurs for any format of picture.
code is below:
#egg {
z-index: 2;
margin-left: 50px;
/*display: none;*/
position: absolute;
animation-duration: 6.4s;
animation-name: slide;
animation-iteration-count: infinite;
/*animation: pulse 5s infinite;*/
}
#keyframes slide {
0% {
margin-left: 10px;
/*width: 300%; */
}
49% {
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
filter: FlipH;
-ms-filter: "FlipH";
}
50% {
margin-left: 350px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
100% {
margin-left: 10px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
}
<img id="egg" src="http://i.stack.imgur.com/Ke7wO.gif">
Ok , This looks much better, changed 49% to 49.9% and it enhanced it a bit, the problem was this 1% of the 6.4s duration of animation is still noticeable which makes it "flashes".
by reducing this difference from 1% to 0.1% the period needed to transform from scaleX(1) to scaleX(-1) is not noticeable
jsFiddle
#container {
position: absolute;
background-color: rgb(231, 143, 128);
width: 310px;
height: 42px;
margin-left: 50px;
z-index: 1;
}
#egg {
z-index: 2;
margin-left: 50px;
/*display: none;*/
position: absolute;
animation-duration: 6.4s;
animation-name: slide;
animation-iteration-count: infinite;
/*animation: pulse 5s infinite;*/
}
#keyframes slide {
0% {
margin-left: 10px;
/*width: 300%; */
}
49.9% {
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
filter: FlipH;
-ms-filter: "FlipH";
}
50% {
margin-left: 350px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
100% {
margin-left: 10px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
}
<img id="egg" src="http://i.stack.imgur.com/Ke7wO.gif">
I currently have a picture that is rotating and scaling using keyframes, but my problem is that after every iteration it reverses rotation direction. How do I stop this from happening so that the rotating is smooth in one direction? JSFiddle. See full webpage HTML here:
<html class="fourzerofour">
<head>
<!-- Hey, look at you, you know how to view the source code, well done! Here's a unicode cookie: 🍪-->
<meta charset="UTF-8">
<title>Egrodo | 404</title>
<link rel="stylesheet" type="text/css" href="../CSS/error404.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="../CSS/materialize.css" />
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link rel='shortcut icon' href='../favicon.ico' type='image/x-icon'/ >
</head>
<body class="fourzerofour">
<section class="fourzerofour">
<p class="fourzerofour">
404 - What have you done?!?
</p>
<img draggable="false" class="rotating fourzerofour" src="https://i.imgur.com/n5SVALx.png">
</section>
</body>
</html>
and my full page CSS here:
body {
font-family: 'Raleway', sans-serif;
}
p.fourzerofour {
font-size: 2.4em;
color: white;
display: block;
margin-top: -2em;
margin-bottom: 2em;
}
body.fourzerofour {
height: 100%;
background-color: darkgrey;
}
section.fourzerofour {
position: relative;
height: 100%;
text-align: center;
margin-top: 23%;
}
.rotating {
-webkit-animation: rotating 3s linear infinite;
-moz-animation: rotating 3s linear infinite;
-ms-animation: rotating 3s linear infinite;
-o-animation: rotating 3s linear infinite;
animation: rotating 3s linear infinite;
animation-direction: alternate;
width: 10em;
}
p.fourzerofour + .rotating:active {
-webkit-filter: invert(1);
}
#-webkit-keyframes rotating /* Safari and Chrome */ {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
50% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1):
}
100% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
}
#keyframes rotating {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
50% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) sscale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
100% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
}
Get rid of the infinite line and remove the 50% keyframe styles as well as this is the middle of the animation. Instead give the 100% the final animation styles you would like: JS Fiddle
Appending infinite on the animation will have it continually loop.
.rotating {
-webkit-animation: rotating 3s linear;
-moz-animation: rotating 3s linear;
-ms-animation: rotating 3s linear;
-o-animation: rotating 3s linear;
animation: rotating 3s linear;
animation-direction: alternate;
width: 10em;
}
p.fourzerofour + .rotating:active {
-webkit-filter: invert(1);
}
#-webkit-keyframes rotating /* Safari and Chrome */ {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
100% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1):
}
}
#keyframes rotating {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
100% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) sscale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
And if I misunderstood the desired effect and you want it to continually loop in one direction, see #maioman answer
if you remove animation-direction:alternate it should be fine;
fiddle
moreover I adjusted rotation in fiddle
It has animation: rotating 3s linear infinite, where infinite is the transition-duration and here rotating is the transition i.e. why it keeps repeating its animation, removing that will do the trick for you.
Here the JSFiddle.
Hi here's my code in JSFiddle
http://jsfiddle.net/qnbxaLwh/
Here's the simple HTML
<span class="arrow">xssss</span>
Here's my CSS
.arrow {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right:10px;
bottom: 5%;
left: 0;
right: 0;
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
-o-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
I've been trying for hours but I don't understand why it's not working on firefox. I tried rearranging and googling some stuffs but nothing works.
change position:relative; to position:absolute;
working fiddle -> http://jsfiddle.net/qnbxaLwh/1/
you can remove keyframe for firefox, firefox no longer uses for 2 years ago.
If you need to use position relative, try using some tools like this -> https://coveloping.com/tools/css-animation-generator
According to the code that they use (working crossbrowser) you're using wrong prefix for you animations (-moz-animation-name, for example...)
Please update css
.arrow {
position: absolute;
margin-left: auto;
margin-right: auto;
padding-right:10px;
bottom: 5%;
left: 0;
right: 0;
top: 0;
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
-o-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
My code doesnt work in Firefox and I dont know why. Any advices? It works fine in Chrome, IE and Opera. I tried almost all prefixes combinations but still it wont work. Is it possible that something is wrong with my PC or Firefox browser?
.span-accent {
color: rgb(60, 185, 120);
-webkit-animation: breath 2s infinite;
-moz-animation: breath 2s infinite;
animation: breath 2s infinite;
}
#-webkit-keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes breath {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
25% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-moz-transform: scale(1);
transform: scale(1);
}
75% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
<h1>LAKA</h1>
<h2>architecture that <span class="span-accent">reacts.</span></h2>
Ok guys, I found it.
Problem is in <span> element. For some reason Firefox doesnt animate inline elements.
So what I did is change a <span> atribute to display: inline-block.
It just wont work strictly for any inline element.
Here is the standard CSS I am trying to produce but want to use a LESS Mixin to do the work. You can check the working demo with pure css here
Pure CSS
#keyframes rotate {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#keyframes rotate-fix {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
I'm using the same mixin as in the following post which is shown below.
.keyframes(#name, #frames) {
#-webkit-keyframes #name { #frames(); }
#-moz-keyframes #name { #frames(); }
#-ms-keyframes #name { #frames(); }
#-o-keyframes #name { #frames(); }
#keyframes #name { #frames(); }
}
I am using it like this:
.keyframes(rotate, {
0%{
.transform(rotate(0)); // This is transform mixin from LESSHat
}
100%{
.transform(rotate(180));
}
});
.keyframes(rotate-fix, {
0%{
.transform(rotate(0));
}
100%{
.transform(rotate(360));
}
});
However, it's not working. The animation of the button won't rotate. The code works fine when not including it as a mixin. Can anybody tell me what I'm missing here?
The generated CSS looks like this:
#-moz-keyframes rotate {
.....
}
#-o-keyframes rotate {
.....
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#-moz-keyframes rotate-fix {
.....
}
#-o-keyframes rotate-fix {
.....
}
#-webkit-keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Be sure to interpolate
like this:
.keyframes(~'<keyframes-name>, <keyframes-definition>')
and take a look at Less Hat docs keyframes section.