follow along at:
g-liu.com/css3
Follow along: g-liu.com/css3
The process of making the illusion of motion and change
We focus on CSS3 animations
// Copy+paste this into your JavaScript console
var sheet=(function() {
var style=document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
return style.sheet;
})();
sheet.insertRule("@keyframes spin{100%{transform:rotate(360deg);}}",0);
sheet.insertRule("p,li,a,img,div,table{animation:spin 3s linear infinite;}",0);
@keyframes
rule/* Example animation definition */
@keyframes blend-in {
0% {
background-color: red;
}
25%, 100% {
background-color: black;
}
50% {
background-color: yellow;
}
}
.teeter-totter {
transform: rotate(30deg) translate(10px, -5px);
transform-origin: left 2px;
}
Function | Effect | Example |
---|---|---|
translate(x, y) | Slides the element | translate(2px, -5px) |
rotate(a) | Rotates the element | rotate(45deg) |
scale(x, y) | Resizes the element | scale(4, 0.5) |
skew(x, y) | Shears the element | skew(10deg, -10deg) |
Usage in CSS:
transform
, transform-origin
CSS animation
property — a shorthand (more later)
.zoo .chameleon {
/* Animation "blend-in" lasts 5s */
animation: blend-in 5s;
}
Required by some browsers for compatibility.
(As of 2016, no prefixes required)
/* Chrome, Safari, Opera */
/* prepend "-webkit-" */
#myelement {
-webkit-animation: flip 2s;
}
@-webkit-keyframes { ... }
/* Firefox, IE, Edge */
/* (no prefix needed) */
#myelement {
animation: flip 2s;
}
@keyframes { ... }
Codepen: check "-prefix-free" in CSS
You know how to say:
Coming up:
Property | Example value(s) |
---|---|
animation-name |
bobble |
animation-delay |
1.2s, 0 |
animation-direction |
alternate, reverse |
animation-duration |
5s |
animation-iteration-count |
infinite, 10 |
animation-timing-function * |
ease-in, linear |
animation-fill-mode |
forwards |
animation-play-state |
paused, running |
* see slide below
linear | ease (default) | ease-in |
ease-in-out | ease-out |
Others: step-start
, step-end
, steps()
http://codepen.io/g-liu/pen/XbrMzr?editors=110 (Chrome only)
animation:
<name>
<duration>
<timing-function>
<delay>
<direction>
<iteration-count>
<fill-mode>
<play-state>;
*with a few exceptions
Turn the use cases into shorthand
/* Long form */
#myelement {
animation-name: first,
second, third;
animation-duration: 0.25s,
0.5s, 1s;
animation-timing-function:
ease-in-out;
}
/* Shorthand */
#myelement {
animation: first 0.25s ease-in-out,
second 0.5s ease-in-out,
third 1s ease-in-out;
}
Surprisingly different between Chrome/Firefox
Chrome
Firefox Developer Edition