Replace #keyframes in css with transitions - css

The platform were I work does not support #keyframes because of security reasons with the #.
My question is if I can replace it with some other css trick.
For example I have this code:
.cubo {
animation:giro 25s infinite linear;
}
#keyframes giro {
0% {transform: rotateX(0deg) rotateY(0deg);}
100% {transform: rotateX(1080deg) rotateY(360deg);
}
}
Can I replace it with transitions or transforms to avoid using the #? (no javascript supported either).

You could instead make it a transition by multiplying the transition duration, rotateX, and rotateY values all by a common factor x and applying the transition class on page load. In my example I multiplied them by 40, but you can go as high as you want but I wouldn't go too high because the processor might overload at some point and break the page. This runs for 1000 seconds, not many people will stay on a page past that
Here is a live demo of that approach
/* CSS */
.cubo {
/* ...Your other code... */
transition: all 1000s linear;
}
.animate {
-webkit-transform: rotateX(43200deg) rotateY(14400deg);
-moz-transform: rotateX(43200deg) rotateY(14400deg);
-o-transform: rotateX(43200deg) rotateY(14400deg);
-ms-transform: rotateX(43200deg) rotateY(14400deg);
transform: rotateX(43200deg) rotateY(14400deg);
}
/* Javascript (ran on page load) */
document.getElementsByClassName('cubo')[0].classList.add('animate');

Related

Safari transforms SVG wrong

I made a little CSS animation with a simple svg to transition my hamburger menu to a cross. It works as expected on Chrome and Firefox, but the translation is off in Safari. The animation plays, and even resets correctly so it has nothing to do with prefixes (I tried). The translate of the two lines making the cross is just wrong.
I'm guessing it has something to do with how safari handles the transform when scaling is also applied. Does anyone know if there is a work around / or what I'm doing wrong?
JSFiddle
Safari / Firefox / Chrome
#keyframes showCross {
0% {
transform: scale(1) rotate(0);
}
40% {
transform: scale(0.3) rotate(280deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
#keyframes showCross_P1 {
0% {
transform: rotate(0);
}
100% {
transform: rotate(-45deg) translate(-42%, -10%);
}
}
I fixed it by doing the following:
First I removed the groups surrounding the paths.
Then I gave all the paths the following values:
transform-origin:center center;
transform-box: fill-box;
Next I edited the animation keyframes to look as follows:
0% {
transform: translate(0rem,0rem) rotate(0);
}
100% {
transform: translate(-10rem,-38rem) rotate(-45deg) ;
}
Safari has problems with percents and also if you put the rotation before the translate it has inconsistency with other browsers, use rem instead!

Adding infinite translate and rotate (with different speeds) animations to one element

I'm trying to animate some shapes made with CSS-Doodle which will be a part of my background. Basically, I want them to always float around the screen and always rotate but I want the two animations at different speeds.
With the code below I can only get either one to work by switching around the order of chaining.
animation: spin #r(3s, 10s) infinite, flow #r(20s, 40s) infinite linear;
#keyframes flow {
0%, 100%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
50% {
-webkit-transform: translate3d(#r(-500%, 1000%), #r(-500%, 1000%), 0);
transform: translate3d(#r(-500%, 1000%), #r(-500%, 1000%), 0);
}
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
I'm hoping there's a way for both of them to be applied at the same time even if it's not pure CSS.
There's probably a better way but the simplest solution would be to put a wrapper around the element so that the wrapper gets one animation and the actual element gets the other animation.

GPU Acceleration of animated and blurred content

Question: Why does my CPU register ~30% when blur is applied versus ~6% when no blur is applied to an animated object?
Details:
I have a set of randomly generated items on a page that have a CSS animation assigned (in a CSS file) and randomly generated values for width, height, and importantly, blur, applied inline.
CSS file styles looks like:
animation-name: rise;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
transform: translateZ(0);
width, height and blur are applied inline via style attribute.
<div class="foo" style="width:99px;height:99px;
filter:blur(2px);
-webkit-filter:blur(2px) opacity(0.918866247870028);
-moz-filter:blur(2px) opacity(0.918866247870028);
-o-filter:blur(2px) opacity(0.918866247870028);
-ms-filter:blur(2px) opacity(0.918866247870028);"></div>
With the blur enabled my CPU usage is ~30%. When I disable the blur, CPU usage goes down to ~6%.
What's happening here? Is chrome only able to GPU accelerate when no blur is applied? If so, why?
Update 1:
The animation rise looks as follows:
#keyframes rise {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-1000px);
}
}
I don’t think the blur is actually causing your issues, it just seems to make it more noticeable than before. The problem is that the transform: translateY in your animation is overwriting the transform: translateZ(0) you’re using to force GPU acceleration.
This is a timeline recording for the the code you’re running right now, notice how there’s all this activity on the main and raster threads:
Now compare this to a recording where I applied will-change: transform to the .foo:
No activity on the main and raster whatsoever.
There’s two steps to applying this fix:
Apply will-change: transform to .foo. This will let the browser know you intend to change that property and have it render that element on the GPU to account for this.
No versions of Edge and IE support will-change at the moment. Therefore we’ll use transform: translate3d(0, -1000px, 0); in the animation to force GPU acceleration. Note this is a hack, so we’ll detect support for will-change and use transform: translateY in browsers that support it.
Final code:
#keyframes rise {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, 1000px, 0);
}
}
#supports (will-change: transform) {
#keyframes rise {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(1000px);
}
}
}
div {
width: 100px;
height: 100px;
background: #f00;
animation: rise forwards 2s linear infinite;
will-change: transform;
}
See here for a working version: http://jsbin.com/mosuvikoto/edit?html,css,output
Don't blur it in inline styles. Put your blur in the style file.

Rotate animation and translate?

The rotate animation won't work with translate. I get, that I have to put translate in the same property with the rotate, but how is this possible when using keyframes? Code is like so:
#-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
#keyframes rotating {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
img{
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
-webkit-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
position:absolute;
top:50%;
left:50%;
}
This will make the rotation, but it disables the translate. If I put the translate into the rotating animation, the translate is being animated as well(ofcourse).
The 2022+ answer
You can work around this by using individual property transforms which have pretty good browser support.
In short, use the properties like scale, translate, etc. instead of transform.
Side note: You don't need browser-specific properties for anything related to transforms or animations these days.
The original 2014 answer
The issue is that the transform in the animation is overriding the default transform:translate. In this case, you can combine them in the animation itself but it has to be hard coded.
#keyframes rotating {
from {
transform: translate(-50%,-50%) rotate(0deg);
}
to {
transform: translate(-50%,-50%) rotate(360deg);
}
}
If you need it to be dynamic, you can nest it in an element and animate one while not affecting the other - most likely translate the parent and rotate the child.
If you absolutely cannot have more than one element, you can affect the transform matrix for the element using JavaScript, in which case using an animation library like GSAP would be advantageous.

(Firefox bug) Font is sloppy when transformed

This question was orginally related to FontAwesome, but is a general firefox problem.
So i'm using the class fa-spin that will spin the icon, here you can find some examples of it.
Here is the spinning css file:
// Spinning Icons
// --------------------------
.#{$fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
#-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
Now all works fine in chrome and IE10, however it doesn't in firefox :
jsFiddle.
When you run it for the first time it looks just good, but try the interact with the site(for example: scroll or run the script again in jsFiddle). The animation becomes all jittery. I have no idea what could cause this strange behavior, hope that anyone could help me.
Edit
The problem occurs on Windows 7 32-bit and 25.0 version of Firefox(No add-ons).
However it does work at my home PC, where it also has Windows 7 32-bit 25.0 firefox.
An preview how it looks on my screen:
Note that it works for the first couple of seconds but after it will get jittery (this stuttering is because my .gif is bad).
See my answer for more information
Before you want to add this 'hack', you should first try to update your driver
What i did notice is that IE and Chrome actually makes the text blurry, which FF doesn't. I thought of using the blur filter, but that didn't work. Also the font width didn't stayed the same, so i needed something that or reminded the client of his width or force the width to be static at all time.
I came across the SVG filter XML url, that was special for Firefox 10+ and Firefox on android. I tryed to apply this to my element and my problem was completly gone!
i did use <feColorMatrix type=saturate values=1/> so the saturate filter didn't take away the colors.
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'1\'/></filter></svg>#grayscale");
When adding this to the .fa-spin class that FontAwesome uses, it'll work on every spinning element.
jsFiddle

Resources