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