Loading...

​​CSS.la #3 – CSS Animations!!

​​Set the stage:

​​UX - help people understand UI

​​https://dribbble.com/tags/ui_animation

​​Fun, amazing:

​​https://codepen.io/miocene/pen/mjLPVp

​​

​​User interface animation examples

​​

​​Buttons

​​https://dribbble.com/shots/2006861-Cloud-Toggle-GIF

​​https://dribbble.com/shots/1426764-Submit-Button

​​

​​Transitions

​​https://dribbble.com/shots/3969194-Travel-Agency-Landing-Page

​​https://dribbble.com/shots/4301291-F-R-A-N-C-O

​​https://work.co/grid

​​

​​Motion Path

​​https://dribbble.com/shots/2695595-Menu-Animation

​​https://dribbble.com/shots/2067564-Replace

​​

​​Characters

​​https://dribbble.com/shots/4249163-Animated-login-form-avatar

​​https://musiclab.chromeexperiments.com/Rhythm/

​​

​​Concepts:

​​Animations vs. transitions

​​

​​Things to know

​​Accessibility - don’t go overboard, or allow an option to turn off animations. 

​​Subtlety is key!

​​https://source.opennews.org/articles/motion-sick/

• ​​You can use media queries to do help people set this preference (allow them to disable)

​​

​​Performance:

​​Transforms - things at the composite/paint layer, not margin 

​​

​​Easing

​​Tool for generating cubic bezier: http://cubic-bezier.com/

​​https://easings.net/

​​

​​A note about libraries – good for reference, but you don’t need them! https://daneden.github.io/animate.css/

​​

​​Basic keyframe animation

​​

​​CSS Color names

​​https://htmlcolorcodes.com/color-names/

​​

​​Mozilla DevNet CSS Animations