UX CSS animation techniques

UX CSS animation techniques

The current Android and iOS shift towards great and subtle animations to enhance their user experience is a nice step forward for designers. But animations and transitions are not limited to native applications: you can use them on websites, web applications and even responsive and mobile optimized sites. We used to need some heavy and scary JavaScript to animate things. And JavaScript is scary. But today we can almost do the same in CSS3.

In this talk show you how to use some simple CSS tricks to create transitions and animations that will enhance the whole experience. I promise not to hurt your brain with too much code. And for those of you how are really allergic to code, I will also show some tools that will help you create those animations and communicate them to front-developers.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

January 22, 2015
Tweet

Transcript

  1. 5.
  2. 12.

    By making state change more natural Animations create feedback By

    showing the user a response was triggered
  3. 15.

    By making state change more natural Animations create content relationship

    By connecting the dots and showing items belong together
  4. 17.

    By making state change more natural Animations provide orientation Where

    do you come from? Where did you go? Where can I go?
  5. 19.

    By making state change more natural Animations create pleasure &

    delight By crafting a unique experience for the user
  6. 24.

    Animations @keyframes rainbow { 0% { color: darkorchid; } 30%

    { color: magenta; } 60% { color: orangered; } 100% { color: darkorchid; } } a { animation-name: rainbow; animation-duration: 3s; }
  7. 26.

    Prefixing @-webkit-keyframes rainbow { ... -webkit-transform: … ; … }

    @keyframes rainbow { ... transform: … ; … }
  8. 28.

    Transition the color on :hover button:hover { color: rgb(255, 167,

    15); } button { border: 2px solid; color: rgb(255,255,255); }
  9. 29.

    Transition the color on :hover button:hover { color: rgb(255, 167,

    15); } button { border: 2px solid; color: rgb(255,255,255); transition-property: color; transition-duration: .3s; }
  10. 31.

    Animating the star pseudo-elements :after /* pseudo-element transition */ button:active:after

    { transform: scale(1.3); } button:after { transition: transform .3; }
  11. 34.

    Animate inline SVG properties /* coloring the SVG */ button

    .icon { fill: currentColor; } button:hover { color: rgb(255, 167, 15); } button { transition: color .3s; }
  12. 35.

    Animating the star @keyframes favorite { to { transform: scale(1.3);

    } } button.activated .icon { animation-name: favorite; animation-duration: .3s; animation-iteration-count: 1; }
  13. 39.

    button.activated .icon { animation-name: favorite; animation-duration: .3s; animation-iteration-count: 1; animation-fill-mode:

    forwards; animation-timing-function: cubic-bezier(.01, 1.93, 1, 1.6); } Keep the state of the last keyframe applied
  14. 42.

    /* hiding the menu */ .menu { transform: translateX(-155px); }

    /*showing it on hove*/ .menu:hover { transform: translateX(0); } Hiding/ Showing the menu .menu { transition: transform .3s .25s; }
  15. 43.

    /* sliding the content */ .menu:hover ~ .content { transform:

    translateX(155px); } Menu animation on sibling selector .content, .menu{ transition: transform .3s .25s; }
  16. 46.

    The fake checkbox /* fake checkbox styling*/ .checkbox + label:before

    { background: rgb(255, 255, 255); border: 1px solid rgb(216, 216, 216); }
  17. 47.

    The :checked animation /* transitionned state when checked */ .checkbox:checked

    + label:before { background: rgb(0,158,186); border-color: rgb(4,126,147); } /* applying transition */ .checkbox + label:before { transition: background .2s, border-color .2s; }
  18. 48.

    Animating the mark /* scale it down when not visible*/

    .checkbox:not(:checked) + label:after { transform: scale(0); } /* scale back to 1 when checked*/ .checkbox:checked + label:after { transform: scale(1); } /* applying transition */ .checkbox + label:after { transition: transform .4s; }
  19. 49.

    Animating the error /* creating the animation */ @keyframes shakeMe

    { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
  20. 50.

    Animating the error /* creating the animation */ @keyframes shakeMe

    { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } } /* applying the animation */ .errors { animation-name: shakeMe; animation-duration: .5s; }
  21. 54.

    Animation Properties animation-name: shakeIt ; animation-duration: 300ms ; animation-timing-function: ease

    ; animation-iteration-count: 1 ; animation-direction: normal ; animation-play-state: running ; animation-delay: 1.5s ; animation-fill-mode: none ; @keyframes shakeIt { 0% { … } 100% { … } } ➔ animation: shakeIt 300ms ease 1 normal running 1.5s none ;
  22. 55.

    •:hover, :active, :focus •:checked, :invalid, :required, etc. •: target •click,

    focus, blur, submit, etc. •.className ➔ Create the animations in CSS, add the class on a JS trigger CSS JavaScript Triggers
  23. 56.

    By making state change more natural opacity & transform =

    ❤ The two things the browser can « cheaply » animate learn more about animations properties performance
  24. 58.

    By making state change more natural Keep it Simple Does

    it distract my users from accomplishing their tasks?
  25. 59.

    By making state change more natural Keep it Short Does

    it annoy my user? Does it respond well? Is it too long?
  26. 60.

    By making state change more natural Keep it Meaningful Does

    it provide useful information and adds value to the interface ?
  27. 62.

    The 3 states of our advanced search as communication tool

    with the developer Paper prototyping animations in the early stages
  28. 63.
  29. 67.

    Credits & Links • Animation and UX ressources by Rachel

    Nabors - @rachelnabors • Animation & UX ressources by Val Head - @vlh • Interface Animations - A workshop with Mark Geyer • Google Web Fundamentals on Animations • (paper) Animation: From Cartoons to the User Interface by Bay-Wei Chang and David Ungar • (paper) Animation Support in a User Interface Toolkit: Flexible, Robust, and Reusable Abstractions by Scott E. Hudson and John T. Stasko