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
2. inpixelitrust.fr — alsacreations.fr
3. Apple, Google paving the path of a new animation area
4. UX ❤ Animations How and where animations can guide users
5. By making state change more natural Animations grab user’s attention The human eye is attracted to moving things
6. Codepen save button animates when you forget to save Drawing attention to critical moment
7. Distract user from loading time
8. By making state change more natural Animations decrease cognitive load By making state changes more natural
9. What just happened ? Disruptive change of state for the human brain
10. Remember the flipbook?
11. The computer does the interpolation for your brain Let the computer do the work
12. By making state change more natural Animations create feedback By showing the user a response was triggered
13. Button :active states are the most basic form of feedback Providing feedback via Codrops
14. Archiduchesse adds a nice animation when you add something to the basket Providing feedback
15. By making state change more natural Animations create content relationship By connecting the dots and showing items belong together
16. Create content relationship via useyourinterface
17. By making state change more natural Animations provide orientation Where do you come from? Where did you go? Where can I go?
18. Providing orientation via Val Head
19. By making state change more natural Animations create pleasure & delight By crafting a unique experience for the user
20. Bring delight codepend.io
21. Bring personality via capptivate.co
22. Denise Carbonell Semantics & Syntax
23. Transitions a { color: darkorchid; transition-property: color; transition-duration: 1s; } a:hover { color: orangered; }
24. Animations @keyframes rainbow { 0% { color: darkorchid; } 30% { color: magenta; } 60% { color: orangered; } 100% { color: darkorchid; } } a { animation-name: rainbow; animation-duration: 3s; }
25. Animations - support
26. Prefixing @-webkit-keyframes rainbow { ... -webkit-transform: … ; … } @keyframes rainbow { ... transform: … ; … }
27. The button transition
28. Transition the color on :hover button:hover { color: rgb(255, 167, 15); } button { border: 2px solid; color: rgb(255,255,255); }
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; }
30. Pushed button effect on click :active button:active { transform: translateY(2px); }
31. Animating the star pseudo-elements :after /* pseudo-element transition */ button:active:after { transform: scale(1.3); } button:after { transition: transform .3; }
32. The button animation
33. Animate inline SVG properties /* coloring the SVG */ button .icon { fill: currentColor; }
34. Animate inline SVG properties /* coloring the SVG */ button .icon { fill: currentColor; } button:hover { color: rgb(255, 167, 15); } button { transition: color .3s; }
35. Animating the star @keyframes favorite { to { transform: scale(1.3); } } button.activated .icon { animation-name: favorite; animation-duration: .3s; animation-iteration-count: 1; }
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
37. Playing with timing functions element { transition-timing-function: … ; }
38. Fun with cubic-bezier
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
40. The flyout menu
41. /* hiding the menu */ .menu { transform: translateX(-155px); } Hiding/ Showing the menu
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; }
43. /* sliding the content */ .menu:hover ~ .content { transform: translateX(155px); } Menu animation on sibling selector .content, .menu{ transition: transform .3s .25s; }
44. .menu:hover .icon { transform: rotate(180deg); } Animating the arrow .menu .icon{ transition: transform .5s .25s; }
45. The form animation
46. The fake checkbox /* fake checkbox styling*/ .checkbox + label:before { background: rgb(255, 255, 255); border: 1px solid rgb(216, 216, 216); }
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; }
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; }
49. Animating the error /* creating the animation */ @keyframes shakeMe { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
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; }
51. .circle{ (…) animation-iteration-count: infinite; animation-direction: alternate; } Bonus: animation spinner
52. Denise Carbonell CSS Animations Memo
53. Transition Properties transition-property: transform ; transition-duration: 2s ; transition-timing-function: ease ; transition-delay: 1.5s ; ➔ transition: transform 2s ease 1.5s ;
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 ;
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
56. By making state change more natural opacity & transform = ❤ The two things the browser can « cheaply » animate learn more about animations properties performance
57. With great power… On using those great tools with caution
58. By making state change more natural Keep it Simple Does it distract my users from accomplishing their tasks?
59. By making state change more natural Keep it Short Does it annoy my user? Does it respond well? Is it too long?
60. By making state change more natural Keep it Meaningful Does it provide useful information and adds value to the interface ?
61. Communicate & find inspiration Animations are part of the whole design process
62. The 3 states of our advanced search as communication tool with the developer Paper prototyping animations in the early stages
63. Using a GIF / video as communication tool with the client The Holly Animated GIF
64. Testing early raw prototype on real devices (and real users) Quick & Dirty code prototype
65. By making state change more natural
66. Useryourinterface  
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
68. inpixelitrust.fr — alsacreations.fr Shared under CC- BY-NC-SA licence inpx.it/conveyUX2015