I need help increasing svg image size on hover at countrymusicfy.com
I tried different variations on the CSS below:
img:hover {
transform: scale (1.5);
}
Try removing the space between the scale(1.5)
so code should look like:
img:hover{
transform: scale(1.5);
}
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
I'm trying to animate an element back and forth, with a flip at each end. I'm using a CSS animation with scaleX(-1) at the end. It works fine in everything but IE, where it's shooting the element all the way off the page, then sliding it back into position.
#keyframes moveAndFlip {
48% {
transform: translateX(12vh) scaleX(1);
}
50% {
transform: translateX(12vh) scaleX(-1);
}
98% {
transform: translateX(0) scaleX(-1);
}
}
http://jsfiddle.net/pq9yqscy/2/
Is this a known issue in IE? Another way to tackle it?
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)
I have an animation for a div with two semi-transparent backgrounds:
/* The animated background DIV. */
#-webkit-keyframes wind /*Keyframes*/
{
0%
{
background-position: 0px 0px, 0px 0px;
}
100%
{
background-position: 370px 370px, 424px 242px;
}
}
Have you noticed the comma? It's because I use
#animatedBkg
{
background-image: url('1.png'), url('2.png');
}
Both files contain alpha channel.
Now, I want to accelerate this code on iPhone. So, I've replaced CPU loader background-position with -webkit-transform: translate():
/* The animated background DIV. */
#-webkit-keyframes wind /*Keyframes*/
{
0%
{
-webkit-transform: translate(0px, 0px), translate(0px, 0px);
}
100%
{
-webkit-transform: translate(370px, 370px), translate(424px, 242px);
}
}
It doesn't work at all. But if I remove the comma, both bkg layers are moving synchronously (it seems only the first translate() works), but MUCH smoother. Actually, speed difference is so huge I just can't return to background-image.
Are there other options except making two divs: #animatedBkg1 and #animatedBkg2?
Regards,
Well, since translating is moving an object, and background-position is an object property, it looks like 2 divs are required. This means #animatedBkg1 and #animatedBkg2.