Single CSS keyframe tricks are magic
Ғылым және технология
What can you do with a single CSS keyframe? A metric ton.
0:00 - 50% keyframes are magic
0:49 - Animation is easier than you think
2:17 - Why at 50%?
6:51 - Trick 1 Shake
12:00 - Trick 2 Pulse
23:25 - Trick 3 Glitch
27:55 - Trick 4 Flip
32:45 - Trick 5 Fill
41:20 - Trick 6 Sheen
44:25 - Trick 7 Emphasize
46:50 - Trick 8 Censor
48:35 - Trick 900 Tony Hawk
Links
Bad at CSS - / badatcss
Adam Twitter - / argyleink
David Twitter - / _davideast
Codepen Demo: codepen.io/davideast/pen/MWxvzjm
Open Props: open-props.style
Пікірлер: 11
We need more of the screen. You talk how cool it is and we can't see it
@Killyspudful
27 күн бұрын
Agreed - share your screen, please :)
@DavidEast
27 күн бұрын
This was a big fail by me. I lost the screen recording so I tried to edit in the keyframe code. We have another visual episode planned and I promise we'll have a lot more to share.
There is a count() that counts the number of elements selected I believe...
using `will-change` property can help us to re paint better
Today I thought the same about the sibling thing because nth-child have value but we can't get it.
Didn't actually get the difference between specifying desired state at "50%" instead of "to" (with "alternate" and half of duration)
cool hack! :)
You talk more instead of the real content. Show me what I am here for.
@DavidEast
26 күн бұрын
Yes my bad. I lost the screen recording. Stay tuned for the next episode. There will be a lot more.
@himalayagupta7744
26 күн бұрын
@@DavidEast ok waiting subscribed for that