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);
Related
On loading state I have a #keyframes animation running.
#keyframes graph-line-loading {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
When I stop the animation graph__line jumps to translateY() value (set inline).
However the background-color does nicely animate.
I would expect transition property working on transform as well.
.graph__line {
transition-property: transform, background-color;
}
If the background-color is included in #keyframes animation it doesn't get transitioned on state change either.
Seems like whatever property is animated in #keyframes gets ignored by transition property even though #keyframes is added via different class.
Plz check the fiddle.
https://jsfiddle.net/LukaG/m4bzk6e3/
Any ideas?
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.
I am trying to create a loader animation using CSS3. Here is the code:
http://codepen.io/raaj-obuli/pen/RPeLer
If you look at the code, I've entered the css, in #keyframe defn, for rotating the squares from 0deg to 360deg ( as like below ). But the dices are not rotating. Please help on this and also let me know if you need more details.
#keyframes tilt{
0%{
transform: scale($scaleMin) rotate($rotateStart);
}
50%{
transform: scale($scaleMax);
background: #BC11FF;
box-shadow: 0 0 2px #D467FF;
}
95%,100%{
transform: scale($scaleMin) rotate($rotateEnd);
background: #11A8FF;
box-shadow: none;
}
}
PS. CSS is written using SCSS in the code sample.
It's missing the rotate() in 50% section.
$rotateMid: 225deg;/*added, adjust the value as needed*/
span {
animation: tilt #{$animDuration}s linear infinite; /*changed to linear*/
}
50%{
transform: scale($scaleMax) rotate($rotateMid); /*changed/added*/
}
Updated: http://codepen.io/anon/pen/QbJmbO?editors=110
Differences between the transition timing functions:
ease-in will start the animation slowly, and finish at full speed.
ease-out will start the animation at full speed, then finish slowly.
ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly.
ease is like ease-in-out, except it starts slightly faster than it ends.
linear uses no easing.
Source: https://stackoverflow.com/a/9636239/483779
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.
I am trying to have an element scale up from 0 on page load, but that element needs to be rotated. Seems like a simple thing, but it seems to apply the rotation after the animation finishes:
#-webkit-keyframes scale{
0%{-webkit-transform: scale(0);}
100%{-webkit-transform: scale(1);}
}
div{
-webkit-transform: rotate(30deg);
-webkit-animation: scale 2s;
}
http://jsfiddle.net/mildfuzz/wnpVp/
You need to use the transform shorthand within the #keyframes rule, as your rotate() function is outside the rule and thus not animating like you expected.
http://jsfiddle.net/wnpVp/3