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.

Transcript

1. Delight users
   Stéphanie Walter — @WalterStephanie
   Through CSS Animation Techniques
   

   View Slide

2. inpixelitrust.fr — alsacreations.fr
   

   View Slide

3. Apple, Google paving the path
   of a new animation area
   

   View Slide

4. UX ❤ Animations
   How and where animations can guide users
   

   View Slide

5. By making state change more natural
   Animations grab user’s attention
   The human eye is attracted to moving things
   

   View Slide

6. Codepen save button animates when you forget to save
   Drawing attention to
   critical moment
   

   View Slide

7. Distract user from loading time
   

   View Slide

8. By making state change more natural
   Animations decrease cognitive load
   By making state changes more natural
   

   View Slide

9. What just happened ?
   Disruptive change of state for the human brain
   

   View Slide

10. Remember the flipbook?
    

    View Slide

11. The computer does the interpolation for your brain
    Let the computer do the work
    

    View Slide

12. By making state change more natural
    Animations create feedback
    By showing the user a response was triggered
    

    View Slide

13. Button :active states are the most basic form of feedback
    Providing feedback
    via Codrops
    

    View Slide

14. Archiduchesse adds a nice animation when you add something to the basket
    Providing feedback
    

    View Slide

15. By making state change more natural
    Animations create content relationship
    By connecting the dots and showing items belong together
    

    View Slide

16. Create content relationship
    via useyourinterface
    

    View Slide

17. By making state change more natural
    Animations provide orientation
    Where do you come from? Where did you go? Where can I go?
    

    View Slide

18. Providing orientation
    via Val Head
    

    View Slide

19. By making state change more natural
    Animations create pleasure & delight
    By crafting a unique experience for the user
    

    View Slide

20. Bring delight
    codepend.io
    

    View Slide

21. Bring personality
    via capptivate.co
    

    View Slide

22. Denise Carbonell
    Semantics & Syntax
    

    View Slide

23. Transitions
    a {
    color: darkorchid;
    transition-property: color;
    transition-duration: 1s;
    }
    a:hover {
    color: orangered;
    }
    

    View Slide

24. Animations
    @keyframes rainbow {
    0% {
    color: darkorchid;
    }
    30% {
    color: magenta;
    }
    60% {
    color: orangered;
    }
    100% {
    color: darkorchid;
    }
    }
    a {
    animation-name: rainbow;
    animation-duration: 3s;
    }
    

    View Slide

25. Animations - support
    

    View Slide

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

    View Slide

27. The button transition
    

    View Slide

28. Transition the color on :hover
    button:hover {
    color: rgb(255, 167, 15);
    }
    button {
    border: 2px solid;
    color: rgb(255,255,255);
    }
    

    View Slide

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;
    }
    

    View Slide

30. Pushed button effect on click :active
    button:active {
    transform: translateY(2px);
    }
    

    View Slide

31. Animating the star pseudo-elements :after
    /* pseudo-element transition */
    button:active:after {
    transform: scale(1.3);
    }
    button:after {
    transition: transform .3;
    }
    

    View Slide

32. The button animation
    

    View Slide

33. Animate inline SVG properties
    /* coloring the SVG */
    button .icon {
    fill: currentColor;
    }
    

    View Slide

34. Animate inline SVG properties
    /* coloring the SVG */
    button .icon {
    fill: currentColor;
    }
    button:hover {
    color: rgb(255, 167, 15);
    }
    button {
    transition: color .3s;
    }
    

    View Slide

35. Animating the star
    @keyframes favorite {
    to {
    transform: scale(1.3);
    }
    }
    button.activated .icon {
    animation-name: favorite;
    animation-duration: .3s;
    animation-iteration-count: 1;
    }
    

    View Slide

36. button.activated .icon {
    animation-name: favorite;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    }
    Keep the state of the last keyframe applied
    

    View Slide

37. Playing with timing
    functions
    element {
    transition-timing-function: … ;
    }
    

    View Slide

38. Fun with cubic-bezier
    

    View Slide

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
    

    View Slide

40. The flyout menu
    

    View Slide

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

    View Slide

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;
    }
    

    View Slide

43. /* sliding the content */
    .menu:hover ~ .content {
    transform: translateX(155px);
    }
    Menu animation on sibling selector
    .content, .menu{
    transition: transform .3s .25s;
    }
    

    View Slide

44. .menu:hover .icon {
    transform: rotate(180deg);
    }
    Animating the arrow
    .menu .icon{
    transition: transform .5s .25s;
    }
    

    View Slide

45. The form animation
    

    View Slide

46. The fake checkbox
    /* fake checkbox styling*/
    .checkbox + label:before {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(216, 216, 216);
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

49. Animating the error
    /* creating the animation */
    @keyframes shakeMe {
    0%, 100% {
    transform: translateX(0);
    }
    20%, 60% {
    transform: translateX(-10px);
    }
    40%, 80% {
    transform: translateX(10px);
    }
    }
    

    View Slide

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;
    }
    

    View Slide

51. .circle{
    (…)
    animation-iteration-count: infinite;
    animation-direction: alternate;
    }
    Bonus: animation spinner
    

    View Slide

52. Denise Carbonell
    CSS Animations Memo
    

    View Slide

53. Transition Properties
    transition-property: transform ;
    transition-duration: 2s ;
    transition-timing-function: ease ;
    transition-delay: 1.5s ;
    ➔ transition: transform 2s ease 1.5s ;
    

    View Slide

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 ;
    

    View Slide

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
    

    View Slide

56. By making state change more natural
    opacity & transform = ❤
    The two things the browser can « cheaply » animate
    learn more about animations properties performance
    

    View Slide

57. With great power…
    On using those great tools with caution
    

    View Slide

58. By making state change more natural
    Keep it Simple
    Does it distract my users from accomplishing their tasks?
    

    View Slide

59. By making state change more natural
    Keep it Short
    Does it annoy my user? Does it respond well? Is it too long?
    

    View Slide

60. By making state change more natural
    Keep it Meaningful
    Does it provide useful information and adds value to the interface ?
    

    View Slide

61. Communicate & find inspiration
    Animations are part of the whole design process
    

    View Slide

62. The 3 states of our advanced search as communication tool with the developer
    Paper prototyping animations in the early stages
    

    View Slide

63. Using a GIF / video as communication tool with the client
    The Holly Animated GIF
    

    View Slide

64. Testing early raw prototype on real devices (and real users)
    Quick & Dirty code prototype
    

    View Slide

65. By making state change more natural
    

    View Slide

66. Useryourinterface  
    

    View Slide

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
    

    View Slide

68. inpixelitrust.fr — alsacreations.fr
    Shared under CC- BY-NC-SA licence
    inpx.it/conveyUX2015
    

    View Slide