I'm assuming we might want tokens for these? Are there any others? @sg00dwin @srambach
- Shake? Not sure if you have a name for it when we rotate something back and forth. For notification bell, we rotate between
30deg at 33% and -60deg at 66% of of the duration. The deg is just an angle value, so it can be written in degrees (deg), gradians (grad), radians (rad), and turns (turn) - https://developer.mozilla.org/en-US/docs/Web/CSS/angle
- Pulse - favorited icon. We scale to
1.5 at 50% of the duration. The value is either a number or percentage. 1.5 is the same as 150%. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
- Jiggle? Shake? This is for error status. In menu toggle we
translate from -2px (left by 2px) at 33% and 3px (right by 3px) at 66% of the duration. It's probably better if those values were rem units?
- For the new "expand" slide/face animations, we slide by
-.5rem. That just means that by default (when the expand thing is collapsed), it's moved up by 8px (-.5rem), then slides to "0" (not moved) when expanded. Then on collapse it moves back up by 8px (-.5rem)
cc @lboehling
I'm assuming we might want tokens for these? Are there any others? @sg00dwin @srambach
30degat 33% and-60degat 66% of of the duration. Thedegis just an angle value, so it can be written in degrees (deg), gradians (grad), radians (rad), and turns (turn) - https://developer.mozilla.org/en-US/docs/Web/CSS/angle1.5at 50% of the duration. The value is either a number or percentage.1.5is the same as150%. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaletranslatefrom-2px(left by 2px) at 33% and3px(right by 3px) at 66% of the duration. It's probably better if those values wereremunits?-.5rem. That just means that by default (when the expand thing is collapsed), it's moved up by8px(-.5rem), then slides to "0" (not moved) when expanded. Then on collapse it moves back up by8px(-.5rem)cc @lboehling