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
Related
This trivial CSS animation code snippet doesn't get 60 fps in Chrome 58 on a MacBook Pro (15-inch, 2016), according to the Performance tab in Dev Tools. It's mostly smooth, but the square occasionally visibly skips a frame or two during animation. Why? How do I fix this?
EDIT: It still reproduces in Chrome 79 on a 16-inch 2019 MacBook Pro.
div {
background-color: red;
height: 10vh;
width: 10vh;
margin: 10vh;
animation-name: slide;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(1000%); }
100% { transform: translateX(0); }
}
<div></div>
I managed to get a Chromium engineer to look into this on Twitter.
https://mobile.twitter.com/flackrw/status/1225116562010656769
Sadly the animation isn't composited because the percentage transform keyframe is dependent on a layout size. This isn't fundamental and it's on our short list of things to fix! https://crbug.com/389359 It's a good example of why compositing effects helps a lot.
But switching from translateX(1000%) to 400px didn't help. https://css-stutter.glitch.me/ So another bug was filed:
https://mobile.twitter.com/flackrw/status/1225144162858799104
Thanks for trying - I'm able to see the same! I filed https://crbug.com/1049248 and recorded a trace where I saw that the call to SwapBuffers is taking a long time once in a while. Feel free to add any details I may have missed.
So hopefully we'll have an answer there soon-ish. I also see the same issue on Safari 13 for macOS 10.15, so I've filed a WebKit bug as well.
https://bugs.webkit.org/show_bug.cgi?id=207282
There appears to be no way to work around this issue at this time.
I'd don't see a lot of issues in Chrome on a 2017 MBP 13" using your code. However, replacing the vh/wv units with px to avoid any browser overhead from checking dynamic sizes and adding will-change: transform; cleaned it up the minimal issues I was seeing.
There's some pretty good information in this article Smooth as Butter: Achieving 60 FPS Animations with CSS3 that might give you additional ideas.
However, at this point, I might attribute any jankiness to other elements on the page that aren't in your example.
div {
background-color: red;
height: 20px;
width: 20px;
margin: 20px;
animation-name: slide;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
will-change: transform;
}
#keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(1000%); }
100% { transform: translateX(0); }
}
<div></div>
How to create this kind of css animation where element fades in from the bottom but appears like clipped with overflow:
http://fr.creasenso.com/ (see the breadcrumb text)
I've tried all the basics but not going anywhere with translateY. Do I need to go to libraries or is it achievable with css only?
The wording of your question could use some improvement. But besides that, I think this is what you are looking for:
https://jsfiddle.net/5ws33c8s/
You need a parent element which has a overflow: hidden. Followed by the childs which are moved out using translate: translateY().
I then used css keyframes to move it back in:
animation: fadeInText 300ms 0ms forwards;
#keyframes fadeInText {
from {
transform: translateY(30px);
opacity: 0;
} to {
transform: translateY(0);
opacity: 1;
}
}
This animation is set up as follows; fadeInText is the keyframes name, 300ms is the duration of the animation, 0ms is the delay of said animation and forwards remembers the final state of the animation, and leaves the element as such. Without it, the element would jump back to its original values.
I then used a delay on each child element.
span:nth-child(2) {
animation-delay: 150ms;
}
Why does the following clipPath animate in Chrome but not Firefox?
http://jsfiddle.net/H8S3k/67/
.graph {
transform: translateY(150px);
animation: 2s ease-out 0s normal none infinite popup;
}
#keyframes popup {
0% {
transform: translateY(50px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(50px);
}
}
In SVG 1.1, only certain attributes were deemed to be stylable with CSS. These particular set of attributes were called "properties". You can see the list of designated properties here:
https://www.w3.org/TR/SVG/propidx.html
transform is not one of those, so it cannot be styled with CSS.
However in SVG 2, which is not yet finalised, all SVG attributes will probably be made stylable. Chrome has begun implementing this, however Firefox has not yet. That is why your example works in Chrome but not Firefox.
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.
First of all, sorry if the title is wrong because I don't know if these are actually called rotating loaders or not. This is what I am talking about: JSFiddle
I have 2 problems with these loaders,
in .chrome-loader, if I set height: 50px; width: 50px;, and and in .ring-maker set top: 2.5px; left: 2.5px it doesn't work very well. Does px unit support values upto 2 decimal places? I guess they don't. So what can I do to fix it? I basically want to make it of same size as the ones above. Perhaps, some other unit?
For .win8-loader I set this CSS animation for first dot.
#-webkit-keyframe win8dot1 {
0% {left: -10px;}
33% {left: 500px;}
66% {left: 780px;}
100% {left: 1280px;}
}
But it doesn't work. The first dot doesn't even move.
PS: are names like abc1-de2 allowed for keyframes?
You have to correct 2 problems
Your CSS
.win8-loader .dot1 { -webkit-animation: win8-dot1 2.5s infinite linear; }
#-webkit-keyframe win8dot1 {
corrected:
.win8-loader .dot1 { -webkit-animation: win8dot1 2.5s infinite linear; }
#-webkit-keyframes win8dot1 {