I'm trying to get an compass sass animation running with endless rotation. Thats working but at the end of each rotation the item seems to slow down a little bit (like easing) but there's no easing set by myself and in documentation any value is set to false. What could be the reason for tht problem?
This is my animation made with compass animate:
#include keyframes(rotation) {
0% {
#include transform(rotate(0deg));
}
100% {
#include transform(rotate(359deg));
}
}
The animation-timing-function CSS property is set to ease by default. To override this and make your animation smooth you'll need to set this property to linear where you're calling the animation:
animation-timing-function: linear;
Related
I'm using a css animation in my page which makes the element rotate on itself on Y axis:
#keyframes rotateony {
100% {
transform: perspective(120px) rotateY(0deg);
-webkit-transform: perspective(120px) rotateY(-360deg) ;
}
}
#testdiv {
animation: rotateony 2.4s infinite linear;
}
But my page is a little bit laggy on mobile and that's the only element animating and no background java is running. I'm trying to improve the whole page performance, I read that you need to target 60fps synchronicity, so I thought that by using
animation: rotateony 2.4s infinite steps(144); /*144 = 2.4*60 => 60fps) */
or
animation: rotateony 2.4s infinite steps(72); /*72 = 2.4*30 => 30fps */
I can force the browser to makes frames synchronous to the device refresh rate.
Is this something that can really improve the performance? Visually, I can't tell the difference between all 3 of them. How can I improve this animations performance? I tried to test it using chrome inspet devices with my smartphone, but chrome debugger makes the page laggy by itself and does not give a good estimate of the real frame rate.
I'm trying to use CSS to spin an SVG path and I can't get it working properly in Firefox.
Here are my styles:
path {
transform-origin: 50% 50%;
animation: spin 1s linear 0s infinite;
}
This works in Chrome but not Firefox. In Firefox, the animation works but the origin is relative to the SVG viewbox, not the path itself. I've learned that this is apparently correct, but why? Why do SVG paths behave differently than every other HTML element? It just seems counter intuitive.
The only alternative solution I've found is calculating the actual origin using the width and height of the viewbox and the width, height, x,and y coordinates of the path, and then using a fixed pixel value. While this works, it isn't nearly as convenient or practical as the Chrome solution. In fact, my path doesn't even have x or y attributes. It's position is described in the d attribute, so using this particular path, I'm not even sure how to make that calculation.
Is there a way to force Firefox to define the origin relative to the path, rather than the SVG? Perhaps a polyfill or something? I'd really like to accomplish this using the simple method that Chrome supports.
Why do SVG paths behave differently than every other HTML element?
Two reasons:
SVG elements are not HTML elements, and are not subject to the same rules.
The defined behaviour is consistent with the way percentage coordinates work elsewhere in SVGs.
A new property called transform-box has been proposed that will allow you to alter the behaviour of transform-origin for both HTML and SVG.
If and when browsers support this new property, you will be able to get behaviour that matches Chrome's current behaviour by using:
transform-box: fill;
FF has already implemented this, but it is not enabled by default yet (AFAIK).
For now, you will need to calculate the centre coordinates yourself. Or, alternatively, rearrange your SVG so that the path is centred on the origin and use a combination of transforms to do your rotation.
For example:
.mypath {
fill: red;
animation: spin 1s linear 0s infinite;
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
<svg width="400px" height="400px">
<g transform="translate(200,200)">
<!-- path centred on (0,0) -->
<path d="M -100,-100 L 100,-100 100,100 -100,100 Z" class="mypath"/>
</g>
</svg>
In CSS transition shorthand is essential transition-delay? I would like to know if is possible to use shorthand without transition-delay...
Because i have a module on my website that minimize ces and i read that minification delete units to transition delay, and if is without unit transition doesn't work with firefox (for me also with chrome).. So:
So can i write in this way:
transition: font-size 2s ease-out; //without 0s of transition delay
Is possible ???
Thanks a lot and sorry for my english :)
I have the next code:
http://codepen.io/anon/pen/xGRzVq
<style>
#pulse {animation : pulse 1s infinite 1s, hideme 15s;}
#keyframes pulse {0%{transform: scale(0,0);opacity: 0.5} 100%{transform: scale(1,1);opacity: 1.5}
#keyframes hideme {100%{display: none}}
</style>
But looks like "transform: scale(0,0)" is not working in IE 11, can I use another transformation for to change the size of the circle ?
Thx in advance.
IE doesn't support CSS transforms on SVG elements. You might want to use one of the SVG libraries such as Snap etc. Or you can do it manually by manipulating the transform attribute with JS.
Currently I'm using the following code to translate both x and y at the same speed:
-webkit-transition:all 180ms ease-out;
I would like to translate the X axis slower than the Y. Is it possible to specify something similar to:
-webkit-transition:translateX 180ms ease-out;
-webkit-transition:translateY 50ms ease-out;
Thanks in advance!
Sad but true: you can't use different timings for different parts of transform since it's now only one property and cannot be spliced.
The only things you can do:
Use translate only for one axis, and use the positioning for another (like top or left). Doing so you could attach different timings.
Use two wrapped blocks, so you could use different transforms on them. It would take more code, but would be helpful if you'll need the GPU acceleration.
No other ways for us :(
Not ideal, but you could translate one dimension and change another property, such as left on the other...
-webkit-transition: left 180ms ease-out, -webkit-transform 50ms ease-out;
Demo http://jsfiddle.net/DFLL7/
I'm not sure, but maybe you can try.
.m01 { -webkit-animation:test_XY 3.5s 1.5s ease both; }
#-webkit-keyframes test_XY {
0%{ -webkit-transform:translateX(450px)}
70%{ -webkit-transform:translateX(-1px)}
80%{ -webkit-transform:translateX(0)}
95%{ -webkit-transform:translateY(-95px)}
100%{ -webkit-transform:translateY(-90px)}
}