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 {
Related
I'm working on CSS and web development,but just face a something which i really don't understand it:
.header{
position: absolute;
width:60%;
top: 20%;
left: 50%;
transform: translateX(-50%);<------ executed after animation
text-align: center;
animation: moveUp 2s;
animation-fill-mode: backwards;
}
#keyframes moveUp{
0%{
opacity: 0;
transform:translateY(2rem);
}
100%{
opacity: 1;
transform: translateY(0rem);
}
}
so my problem here is the indicated line doesn't apply on ".header" until the animation gets applied in other word it applies animation first then translate -50% ,is there a priority of execution here or it is different thing?
Usually the styles are parsed from top to bottom, however this isn't the issue here.
What is happening in your case is the transform is being applied initially, but then it is being overridden by the animation. Once the animation is over, the element is reverting back to its default style which has the transform.
Essentially, even though the transform is applied at first, you don't see it until the element reverts to it after the end of the animation.
The only solution if you want to have the transform during the animation, is to include it in the animation itself.
#keyframes moveUp {
0 % {
opacity: 0;
transform: translate(-50%, 2rem);
}
100 % {
opacity: 1;
transform: translate(-50%, 0);
}
}
EDIT: To clarify, the order at which the styles are applied does not matter. Whether the animation or the transform is applied first, the result will be the same.
I think a source of your confusion is that the first transform is a translateX while the animation only does translateY. In both cases what is changing is the value of the transform property of the element. Therefore which axis the translation is on doesn't matter. First you set transform: translateX(-50%), but then once the animation kicks in, transform becomes translateY(2rem). The translateX part is removed from the transform, unless you include it in the animation like I have shown.
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>
I have a question/problem, regarding the animations in CSS3. No matter what I try, I can't achieve a smooth animation when my screen is set to 120hz. There's a laggy effect from time to time. If I set the screen to 60hz, it's fine. I was able to reproduce the issue on all the major browsers. Here's a link with a simple animation to illustrate the problem : https://jsfiddle.net/na1dx182/
<div id="container">
<div id="track"></div>
</div>
#container {
width: 600px;
height: 400px;
background: #ddd;
}
#track {
position: absolute;
width: 8px;
height: 400px;
background: #242424;
-webkit-animation: bounce 1s linear infinite alternate;
-moz-animation: bounce 1s linear infinite alternate;
animation: bounce 1s linear infinite alternate;
}
#keyframes bounce {
from {
transform: translateX(0);
}
to {
transform: translateX(600px);
}
}
My first question is, is it related to my screen only, or anyone else with a 120hz screen is experiencing this issue too ? When I look at the animation, it's like some frames are skipped sometimes, there's a laggy effect from time to time. I have the feeling the moving bar is doing some micro jumps.
If this issue is also found by others, is there a way to fix this ? I tried many different things, including the use of transitions, of requestAnimationframe, of setInterval, but the problem is always the same. I also tried other tricks or CSS properties, like translateZ(0), backface-visibility, will-change, but no luck.
Edit : It seems like unplugging and reconnect my screens has almost fixed the issue.
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
I have a case where I need an element to appear for a second and then disappear, and I must not use javascript for it, so I'm trying to make it work with CSS.
Here's an example:
#-webkit-keyframes slide-one-pager {
0% { left: 0; }
50% { left: 100px; }
100% { left: 0; }
}
So in this example the property will gradually transition from 0 to 100 and back to 0. However, I need to get rid of that transition, so the property stays at 0 and gets to 100 as soon as it hits 50%. It doesn't work if I say left: 0; at 49%, because there is still a transition.
Another example, slightly more different than my original question, but if I find a solution for it it will do as well:
#-webkit-keyframes slide-one-pager {
0% { display: none; }
50% { display: block; }
75% { display: block; }
100% { display: none; }
}
Here I want to show an element for a period of time. No, using opacity is not an option, because the element is still there and is still clickable, and I need access to elements below. Unfortunately the "display" property doesn't seem to accept animating. If anyone can think of a solution how to show and hide an element with an animation (without transition!) I will be extremely grateful.
Any ideas?
You can use step-start or step-end (graphs) in your animation configuration so the curve will act like a "steps" (not curvy) so there will be no visual transition between frames, thus the animation will just "jump" between frames.
Example CSS:
animation:1s move infinite step-end;
The above example will call the move keyframes (which I didn't write because it's irrelevant), and will loop on the frames endlessly with the "step" argument which was described earlier, without a transitioned curve.
#keyframes foo{
0%{ margin-left:0 }
50%{ margin-left:50% }
}
div{
width: 50px;
height: 50px;
background: black;
border-radius: 50%;
animation:1s foo infinite;
}
input:checked + div{
animation-timing-function: step-end;
}
<label>
<input type='checkbox' checked /> Disable Animation transition
<div></div>
</label>
👉 Cool demo using this technique
I searched the same thing as you actually.
You can set a greatful parameters in animation, called animation-timing-function allowing you to set perfectly and mathematicaly the animation : With bezier curve values or, if, like me, you're not that good mathematician, a parameter call "step()".
For an example, in none shorthand writing :
.hiding {
animation-name:slide-one-pager;
animation-duration:2s;
animation-timing-function:steps(1);
}
By default, the value of this parameter is set to 0, meaning no steps.
You can read more about this interesting feature here : https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
And here a shorthand notation for your animation:
.hiding {
animation:slide-one-pager 2s steps(1);
}
For me, it works fine at least on firefox 23.0.1.
Even if I think you solved the problem since one year, maybe could help some people like me here :)
I made it using the -webkit-animation-fill-mode: forwards; property, that stops the animation at 100% without returning the element to the original state. I made up a fiddle with a working example, you can check it out here.
Although in the fiddle you can find a better example, I basically did this (Assuming absolute positioned elements):
.hiding {
-webkit-animation: slide-one-pager 2s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes slide-one-pager {
0% { left: 0; }
49% { left: 0; }
50% { left: -100px; }
100% { left: -100px; }
}​
It just jumps from 0 to -100 in the middle of the transition (49% -> 50% as you 'suggested' :P), and stays there at 100%. As said, with -webkit-animation-fill-mode: forwards; the element will stay as in 100% without going back to it's original state.
I don't know if it'll work in your scenario, but I believe there'd be an easy solution if it doesn't.
You can use this:
animation: typing 1s cubic-bezier(1,-1, 0, 2) infinite;