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. */
}
Related
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
If i'm using #keyframes to perform a transform animation, how would I lay out my prefixes?
If i have the following:
#keyframes animation {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
Do i then need to add all my transform prefixes to each keyframe declaration? EG:
#keyframes animation {
0% {
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#-webkit-keyframes animation {
0% {
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
}
Does this work? If this the best way to do this or is there a shorthand / quicker way? I'd imagine this way will look bulky and horrible very quickly with even mildly complex animations.
In general, prefixes are a mess especially when it comes to CSS animations and transforms. I have a comprehensive guide to managing prefixes for these two features which you can find here.
What you have certainly works, but it's unnecessary:
Browsers other than IE aren't going to recognize the -ms-transform declaration anyway, and the versions of IE that support CSS animations out of the box also support unprefixed transform.
This means the -ms-transform simply isn't needed, at all. You should remove all instances of it. You only really need it outside of CSS animations where you want the transforms to work statically in IE9. See the link above for details.
Animations and transforms were unprefixed in WebKit only very recently. However, versions of WebKit that support #keyframes unprefixed also support transforms unprefixed. You can remove the -webkit-transform declarations from your #keyframes rule.
I wouldn't touch the unprefixed transform declarations in both rules. Transforms were unprefixed slightly earlier than animations, so some WebKit versions that require #-webkit-keyframes do support unprefixed transforms.
Also, the unprefixed rule should come last. This applies both to properties (like transform) and to at-rules (like #keyframes). Here's your CSS with the above optimizations:
#-webkit-keyframes animation {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#keyframes animation {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
On a Mac, if you hold the Shift key and perform an action that involves animation, it will slow down the animation. For example, hold Shift and minimise a window. This effect is described in various places (e.g. YouTube, Apple - StackExchange, The Unofficial Apple Weblog).
It would be nice to slow down CSS animations/transitions in a similar way. Is there a way to achieve this (apart from simply tweaking the animation-duration value in the CSS)?
You could combine some javascript and CSS to accomplish the effect on a consistent basis, meaning you won't have to go into your code anymore. Heres the code I tried:
function keydown(event){
if(event.which == 16) document.body.className = "slowmotion";
}
function keyup(event){
document.body.className = "";
}
if (window.addEventListener) {
window.addEventListener('keydown', keydown, false);
window.addEventListener('keyup', keyup, false);
} else if (window.attachEvent) {
window.attachEvent('keydown', keydown);
window.attachEvent('keyup', keyup);
}
And heres the CSS:
#keyframes move {
0% {left: 0}
50% {left: 100%}
100% {left: 0}
}
#-webkit-keyframes move {
0% {left: 0}
50% {left: 100%}
100% {left: 0}
}
body > div {
position: absolute;
background: red;
width: 50px;
height: 50px;
background: red;
-webkit-animation: move 4000ms infinite;
animation: move 4000ms infinite;
}
body.slowmotion * {
-webkit-animation-duration: 8000ms !important;
animation-duration: 8000ms !important;
}
And the HTML:
<div>MOVING</div>
What we're doing here is adding a class to the body to indicate we want our duration value overwritten. It will not do it immediately (in Safari it restart the animation) [EDIT: The animation does not get restarted, but gets recalculated (i.e. it reverts to where it would have been in if the other animation had been ongoing)], but it does allow for modification that way. You can even do it for elements with different speeds by doing .slowmotion #myElementID and amending the duration there. Make sure to always include the important, as the class is only triggered when the key is pressed and HAS to overwrite anyway.
Chrome and Firefox developer tools now support slowing down of many kinds of animations.
Chrome:
In the 'Styles' tab of DevTools, look for an 'Animations' icon that opens up the Animations Inspector. More info:
Chrome DevTools Animation Inspector
New animation controls in Chrome Canary
Firefox:
See documentation on working with animations
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'm trying to apply an animation to a group within an SVG element. However, I'm finding that it isn't applied or is being overridden, as it's crossed out in Chrome Developer Tools. That said, I have no idea what could be causing it.
Animation code:
.ghost {
animation: float 3s ease infinite;
}
#keyframes float {
50% {
transform: translate(100px, 100px);
}
}
I'd post the HTML (the problem might be there) but it's incredibly verbose because of all the SVG paths. Link to a Codepen instead: ghost
Thank you so much! I have no idea what could be causing the issue at this point.
You're missing your vendor prefixes. Example:
.ghost {
-webkit-animation: float 3s ease infinite;
}
#-webkit-keyframes float {
50% {
-webkit-transform: translate(100px, 100px);
}
}
For an easy fix, try adding Prefix-free in CodePen's CSS editor. Here it is with Prefix-free enabled:
Codepen