Pure CSS cross browser animations for fun and profit
Camp Digital
Thursday April 23rd
'Sup
Ben Holden
@BenHoldenPrime
Liam Richardson
@meevil
What you'll learn...
By the end of this presentation, you'll have learned how to...
- Create subtle transitions
- Create complex animations
- Animate SVG's
Let's begin our whistle stop tour!
A brief history of animation on the web
GIF's FTW
All hail Flash
... Oh
R.I.P in peace, Flash
The open web
A note about code...
Onto the fun stuff...
6 essential lessons
Want to do animation? Pure CSS is the way forward
Lesson 1
Transitions
Transitions allow you to create smooth, subtle animations with ease
Lesson 2
.button {
transition: background 1s ease;
}
The transition property can be triggered by any kind of "state" change
:hover
JavaScript prompted class change
The transition property allows you to smoothly affect an element when changing from one state to another
Hover me!
Hover me!
.button{
transition: background 1s all;
background: white;
}
.button:hover{
background: pink;
}
Hover
That was easy! What's the code?
.button {
transition: background 1s ease;
background: white;
}
Animation made easy
.button {
transition: background 1s ease;
background: white;
}
.button:hover {
background: pink;
}
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
transition: width 1s linear 2s;
transition: width 2s, height 2s, transform 2s;
transition: all 2s linear;
Sass <3
@mixin transition($transition-property, $transition-time, $method) {
transition: $transition-property $transition-time $method;
}
What can you use it on?
Supports 81 properties
Classed as "Animatable"
Ok, so what CAN'T you use it on?
http://oli.jp/2010/css-animatable-properties/
- background-image (sort of works, sometimes)
- float
- height or width using the value auto (currently both values must be a length or percentage)
- display between none and anything else
- position between static and absolute
When should you use it?
On the majority of projects?
- As little as possible
- As subtly as possible
Buttons and links
Image transitions
Smooth UI
What about "REAL" animation?
Keyframes
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
Keyframes allow you to create amazing animations that work
seamlessly across
modern browsers
Lesson 3
How do keyframes work?
Keyframes are essentially a list of what the animation should do over a defined period of time
Let's see them in action
How did that work?
.car {
animation-name: drive;
animation-duration: 2s;
}
@keyframes drive {
from {margin-left: 0px;}
to {margin-left: 400px;}
}
CSS @keyframes
@keyframes drive {
from {margin-left: 0px;}
to {margin-left: 400px;}
}
@keyframes %
@keyframes drive {
0% {margin-left: 0px;}
50%{margin-left: 400px;}
100% {margin-left: -200px;}
}
Properties, properties, properties
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
animation-timing-function
linear
ease-in
ease-out
So many options
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(n,n,n,n)
What can you change using @keyframes?
The same 81 properties that you can influence with transition can be changed with @keyframes as well
When should you use it?
On projects that require additional visual "flair" or engagement that traditional methods can't provide.
- As little as possible
- As subtly as possible
- Ensure the design doesn't rely on it
Adding fluidity to an otherwise static design
Creating visual flair
Enhancing dull UI's
Doing something crazy
http://codepen.io/Xpressive_Team/full/LeHGF/
Seriously, do something crazy
SVG + CSS animation = Awesomeness
SVG's are potentially the future of web graphics, and give CSS animation
super powers
Lesson 4
My god, it's full of code...
Code you can apply classes too!
<rect class="background" fill="#D03E27" width="400" height="400" />
<path class="letter" fill="#F4F4F4" d="M60.858,129...." />
<path class="letter" fill="#F4F4F4" d="..." />
Allowing you to do cool stuff!
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
A larger playset - SVG
only properties
clip-rule, flood-color, flood-opacity, stop-opacity, kerning, tech-anchor, color-profile, color-rendering, fill, fill-opacity, fill-rule, marker, marker-end, marker-mid, marker-start, stroke, stroke-width, stop-color, lighting-color, enable-background, dominant-baseline, color-interpolation-filters, color-interpolation, glyph-orientation-horizontal, glyph-orientation-vertical, shape-rendering, baseline-shift, alignment-baseline, stroke-miterlimit, stroke-linejoin, stroke-linecap, stroke-dashoffset, stroke-dasharray, stroke-opacity
...but what about the profit?!
Lesson 5
Animation + UX = Conversion = Profit
"When used as more than just a subtle design detail, animation can provide cues, guide the eye, and soften the sometimes-hard edges of web interactions. It can improve the user experience."
http://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship
Val Head, A List Apart
Subtle cues...
Stop waiting around, get creating!
Lesson 6
Get experimenting
with transitions!
Get creating with @keyframes!
Webkit, you silly thing
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Additional reading
- http://valhead.com/book/
- http://slides.com/sarasoueidan/styling-animating-svgs-with-css#/
- http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/
- http://www.smashingmagazine.com/2014/04/15/understanding-css-timing-functions/
Thank you! Any questions?
@meevil
@BenHoldenPrime
Pure CSS cross browser animations for fun and profit V2
By Liam Richardson
Pure CSS cross browser animations for fun and profit V2
The accompanying slides for mine and Ben Holden's talk on CSS animations and transitions, presented at Camp Digital in Manchester on Thursday 23rd April, 2015.
- 4,193