#keyframes animation not working in firefox 55.03 - css
I can't get this working with Firefox. I animated a menu item anchor that changes background-color, color and border. The animation works fine in MS IE, Chrome, Opera, but not Firefox.
This is my css #keyframes:
#-webkit-keyframes button-flash {
0% {background-color:rgba(255,85,51,0.9);color:#fff;}
40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
#keyframes button-flash {
0% {background-color:rgba(255,85,51,0.9);color:#fff;}
40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
This is my css element:
ul#main-menu > li#menu-item-22 > a,
ul#main-menu > li#menu-item-196 > a{
color:#fff !important;
background-color:rgba(255,85,51,0.9) !important;
border:1px dotted transparent !important;
-webkit-animation-name:button-flash;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count:infinite;
animation-name:button-flash;
animation-duration:1.5s;
animation-iteration-count:infinite;
}
Thank you. Lenny
Updated 9/22/17, 0913...
Here is NEW information I'd like to add to my problem description to clarify further...
This is a WordPress site with a child theme. My child theme's stylesheet includes both the #keyframes code and the css code for the elements on the page. In other words, I do not have a separate stylesheet for the animation code.
The #keyframes section in my child stylesheet is located immediately above the css code describing the anchor element's animation.
Following lanosmind's answer/reccomendation below, I inserted the #-moz-keyframes button-flash section above the #keyframes button-flash section so the animation would work on FireFox. Unfortunately, adding the #moz-keyframes-button-flash section did not help.
So now, my revised #keyframes code and css code for this anchor element looks like this:
#-webkit-keyframes button-flash {
0% {background-color:rgba(255,85,51,0.9);color:#fff;}
40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
#-moz-keyframes button-flash {
0% {background-color:rgba(255,85,51,0.9);color:#fff;}
40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
#keyframes button-flash {
0% {background-color:rgba(255,85,51,0.9);color:#fff;}
40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
ul#main-menu > li#menu-item-22 > a,
ul#main-menu > li#menu-item-196 > a{
color:#fff !important;
background-color:rgba(255,85,51,0.9) !important;
border:1px dotted transparent;
-webkit-animation-name:button-flash;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:button-flash;
-moz-animation-duration:1.5s;
-moz-animation-iteration-count:infinite;
animation-name:button-flash;
animation-duration:1.5s;
animation-iteration-count:infinite;
}
Can anyone suggest other things I can try to animate this anchor in Firefox?
Thank you very much.
you need to use #-moz-keyframes as well for cross browser support
I solved this problem which presented only in Firefox by:
(1) deleting the "default" element's background-color and color styles which allowed the same codes in the #-moz-keyframes section to be foremost, and
(2) moving the entire code section for this element down lower in the stylesheet.
Lenny
Related
Css combining multiple Hover Effects
What I'm trying to achieve is that when the div is hovered over the background-color fades-in, the rounded image scales in size and a text overlay appears over the image simultaneously. I'm close to achieving it as I have the background-color transition and image scaling working at the same time but I can only get the text overlay to trigger as when I hover over the image. Any help would be greatly appreciated. Demo in the comments.
You need to change your CSS to apply the hover animation when the .hvr-fade div is hovered instead of the .textfade div.
From
.textfade:hover {
opacity:1;
}
.textfade:hover h2 {
-moz-transform: translateY(40px);
-webkit-transform: translateY(40px);
transform: translateY(40px);
}
To
.hvr-fade:hover .textfade {
opacity:1;
}
.hvr-fade:hover .textfade h2 {
-moz-transform: translateY(40px);
-webkit-transform: translateY(40px);
transform: translateY(40px);
}
CodePen
CSS Change Text Color Randomly
I know how to make that with JS but in http://daneden.github.io/animate.css/ Animate.css text changes so smoothly and there's no JS on it! Can someone explain me? Thanks
h1 {
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
#-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(360deg);
}
}
for a markup like this
<h1>CHANGE COLOR TEXT</h1>
You can see an example here : http://jsfiddle.net/3oqep26z/
Modify the animation time for faster color changes
My guess is that it would be with CSS3 I found this online http://imajineweb.com/csstexthover
This is css3 features. Will work not everywhere
Set animation in some style:
-webkit-animation-duration: 10s;
Name it
-webkit-animation-name: colours;
And use in the way you need
#-webkit-keyframes colours {
0% {background-color: #39f;}
15% {background-color: #8bc5d1;}
30% {background-color: #f8cb4a;}
45% {background-color: #95b850;}
60% {background-color: #944893;}
75% {background-color: #c71f00;}
90% {background-color: #bdb280;}
100% {background-color: #39f;}
}
Example:
http://jsfiddle.net/gk37un0r/
CSS perspective with rotate & translate issue
I am attempting to make a type of CSS only slide transition from one content section to another. In order to do so in an interesting way, I use CSS's perspective and rotateX to in essence lay down the page content. I then am trying to slide the content out towards the bottom of the screen using translateY
Separately, both the translateY and the rotateX work perfectly, no matter what the perspective is. However, when combined, it only works with certain perspectives based on the window size and rotateY value
In this jsFiddle it works as I would like it to in the window sizes I have tried. The problem is that I would like the perspective value to be lower, around 250px, but I cannot do so without breaking the animation.
I tried using a higher rotateY degree instead of making the perspective lower but the same issue occurs
#keyframes slide {
0% { transform: perspective(450px); }
25% { transform: perspective(450px) rotateX(30deg); }
50%,100% { transform: perspective(450px) rotateX(30deg) translateY(100%); }
}
I have tested this on CSS Deck and jsFiddle both in FireFox and Chrome and it seems to be a consistent issue
Can anyone provide me with a reason why this is happening and offer a work around?
Try setting the perspective as a separate rule on a parent element (as opposed to being part of the transform in the animation).
.parent {
perspective: 250px;
}
#keyframes slide {
25% { transform: rotateX(30deg); }
50%, 100% { transform: rotateX(30deg) translateY(100%); }
}
Updated fiddle: http://jsfiddle.net/myajouri/DYpnU/
My reasoning:
The perspective does not change during the animation so there's no point in having it as part of the animation.
Since your elements occupy 100% of the parent's area, setting the perspective on the parent should produce the same result as setting it on the elements themselves (inside transform).
It seems to solve your problem (see fiddle above).
UPDATE: after more experimentation, I found that explicitly setting the translateY(0) initial value in the animation would solve the issue as well.
#keyframes slide {
0% { transform: perspective(150px); }
25% { transform: perspective(150px) rotateX(30deg) translateY(0); }
50%, 100% { transform: perspective(150px) rotateX(30deg) translateY(100%); }
}
Updated fiddle: http://jsfiddle.net/myajouri/YJS3v/
Only a slight improvement over myajouri answer.
At leats in Chrome, you can write
#-webkit-keyframes slide {
0% { -webkit-transform: perspective(50vh); }
10%,15% { -webkit-transform: perspective(50vh) rotateX(30deg) translateY(0%); }
50%,100% { -webkit-transform: perspective(50vh) rotateX(30deg) translateY(100%); }
}
Setting the perspective to the viewport height should make it more responsive that your current setting
demo
(Untested in other browsers)
CSS animate: span rotating
I'm totally stuck with this example of rotating span. http://jsfiddle.net/C94b8/1/ . What I want to do is rotate spin containing val from input but I just can't make it possible. Also tried changing span to display: inline-block. Didn't work either.
You need to set display to inline-block.
Also, Chrome doesn't support a un-prefixed transform yet. Instead, you need to use -webkit-transform. Firefox supports everything, so you don't have to worry there.
Also, you don't have to use 0% and 100%. If that's all you're using, you can use from and to.
One more thing: I think it's IE that doesn't support rotate. They want rotateZ. So I've changed it.
The finished product?
#-webkit-keyframes spin {
from {-webkit-transform: rotateZ(0deg);}
to {-webkit-transform: rotateZ(360deg);}
}
#keyframes spin {
from {transform: rotateZ(0deg);}
to {transform: rotateZ(360deg);}
}
header span {
display: inline-block;
/* All the rest of header span {} code goes here. I didn't copy it all. */
}
-webkit-transform how can I change rotate() while preserving translate3d()?
What I am looking to do is change the translate3d transform of an element while a css3 animation is running on the element. When I try to do this, however, it seems that the animation resets the transform every time right before updating the animation such that the translation is always (0,0,0). I wish to have the animation running and still be able to translate it with javascript such as:
element.style.webkitTransform='translate3d(100px, 30px, 0px)';
I know it would be possible by using a second containing div to set the translation on while the inner div runs the animation, but I would like to be able to just use one div if possible. Do you know how to achieve this?
This is my css as it stands:
.class{
width:32px;
height:32px;
position:absolute;
background: transparent url('./img/sprite.png');
background-size:100%;
-webkit-transform: translate3d(48px, 176px, 0px);
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 100ms;
-webkit-animation:spin .75s infinite linear;
}
#-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
You can concatenate several transformation functions with a space: -webkit-transform: translate3d(48px, 176px, 0px) rotateY(30deg) rotateX(10deg);