Silvershot
Explore posts from serversKPCKevin Powell - Community
•Created by Silvershot on 5/6/2024 in #front-end
Explain Css animation behavior?
Here's a simple example which demonstrates the behavior of the opacity property of a fading text with an infinite animation https://jsfiddle.net/kc7t62ge/.
Setting the opacity programmatically (by clicking the button LOL) does not interrupt the animation, which makes sense. However, the opacity now alternates between 0 and the new set value, in my example 0.3. Why is that? Is there a hidden property behind the css animation being set, aka max-opacity of some sort?
29 replies
KPCKevin Powell - Community
•Created by Silvershot on 11/3/2023 in #front-end
CSS variable scoping when using animation
Watching Kevin's video (https://www.youtube.com/watch?v=Qj0Qx8HpNUo) on parallax had me wondering at 8:22. He goes ahead and uses the --parallax-speed variable, which is declared privately/locally in each of the .parallax's children. Each .parallex child also has an animation declared, which makes use of the @keyframes parallax animation. How does the @keyframes parallax animation scope have access to the --parallax-speed variable of every child?
7 replies
KPCKevin Powell - Community
•Created by Silvershot on 5/23/2023 in #front-end
width: max-content not working in firefox with blueprintjs
i have the following codesandbox, which mirrors a private project in which i have a list of recordings and use blueprintjs to display this list.
Notice i have set width: max-content to the list, however in firefox the recording number goes to a new line. I then use white-space: nowrap to force the desired behavior. However it does not quite solve the issue. the radio buttons now overlap with the recording+number.
1. on both chrome and firefox, white-space is set to normal by default. Why do they behave differently?
2. how do i solve the issue of max-content not working in firefox?
codesandbox: https://codesandbox.io/s/strange-gwen-on3j16?file=/src/app.css
101 replies
KPCKevin Powell - Community
•Created by Silvershot on 5/21/2023 in #front-end
Margin auto not working
in the picture below, blue box is my root div container inside the body. it is the only body child.(react app).
- the root div is flex with flex direction column. justify content and align items is set to center
- red is a main element with flex grow 1. it spans the whole height of the root div container. red box is NOT a flex container itself, but has a margin set to auto to center it horizontally and vertically. yes i know i can use justify content and align items on the root, but this is my setup right now.
- yellow box is a div which contains stuff denoted with green. it has its margin set to auto, just like its parent(main).
Since yellow box has its margin set to auto, i woul expect it to be vertical aligned. however that is not the case. Does it somehow ignore its parent(main), which is a flex child of the root div? please dont tell me how to change the css. i want to understand WHY this behavior occurs. thanks in advance. here is the codepen: https://codepen.io/pmevo/pen/KKGbpNM
33 replies