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.
Related
I want to use https://animate.style/. But it's more than 90 KBs in size.
I just want a very simple bouncing animation. That's all.
Apart from going into the source code and trying to recreate the bouncing keyframes and animations, is there another way to do so?
For example, in Material UI, or in TailwindCSS only what you have used would be included in the final bundle.
Is there something similar for Animate.css too?
If you only need a simple bouncing animation, why not using your own keyframes?
Exemple falling down :
#keyframes myAnim {
0% {
animation-timing-function: ease-in;
opacity: 1;
transform: translateY(-45px);
}
75% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
#my_little_square {
width:50px;
height:50px;
background-color:#f00;
animation: myAnim 1s ease 0s 1 normal forwards;
}
<div id="my_little_square">
</div>
Here is a little tool to help you start : https://webcode.tools/generators/css/keyframe-animation
This question already has answers here:
Is there a way for animation-timing-function to apply to the entire animation instead of each keyframe?
(4 answers)
Closed 4 years ago.
I have recently been playing a lot with CSS animations. The biggest issue I've had with CSS animations is the animation-timing-function. My issue with this is that the function is applied between each section of the keyframes. What I mean is that if I have a multi-step animation acting on a div:
#keyframes moveProjectTop{
0%{
transform: translateX(0px) translateY(0px) rotateZ(0deg);
}
50%{
transform: translateX(125px) translateY(30px) rotateZ(30deg);
}
100%{
transform: translateX(250px) translateY(60px) rotateZ(0deg);
}
}
What I want from this kind of transformation is for the translation motion to have a bouncing effect, but I want the rotation not to. I don't think this is possible with CSS.
I have been led to believe this because:
1: Transformations can't be split over two animations which means that all transformations have to be under 1 keyframes animation.
2: Animation-timing-functions apply between each step.
I think the solution would have to do with my second detail. Is there a way to have a timing-function apply over a whole animation rather than between each step (between two percentages). The other solution would be if there was a way to apply a different timing function between each step, as in if I could have ease-in apply between 0%-50% and ease-out apply between 50%-100%, then this would imitate an ease-in-out function.
Does anyone have a suggestion on how I could smooth animations in one of these two ways?
An idea is to split the animation and instead of translation you can use top/left then you can easily control each one alone:
.box {
width:60px;
height:60px;
background:red;
position:relative;
animation: bounce 2s infinite linear alternate,
move 2s infinite ease-in alternate;
}
#keyframes bounce{
0%{
transform:rotateZ(0deg);
}
50%{
transform: rotateZ(30deg);
}
100%{
transform:rotateZ(0deg);
}
}
#keyframes move{
0%{
top:0px;
left:0px;
}
50%{
top:125px;
left:30px;
}
100%{
top:250px;
left:60px;
}
}
<div class="box">
</div>
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 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
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);