CSS3 Transforms Transitions and Animations

CSS3 Transforms,
Transitions & Animations
@yaili

“CSS 2D Transforms allows elements rendered by
CSS to be transformed in two-dimensional space.”

—W3C, http://www.w3.org/TR/css3-2d-transforms/

#flower
{

background:
url(flower-‐1.png);

width:
300px;

height:
300px;
}

#flower:hover
{

transform:
translateX(600px);
}

translate,
translateX,
translateY

scale,
scaleX,
scaleY

rotate

skew,
skewX,
skewY

matrix

#flower:hover
{

transform:
translate(600px,
-‐50px)
scale(1.5)
➥
rotate(15deg)
skew(15deg);
}

#flower:hover
{

transform:
translate(600px,
-‐50px)
scale(1.5)
➥

rotate(15deg)
skew(15deg);

transform-‐origin:
0
0;
}

scale
→
scale3d

scaleX

scaleY

scaleZ

translate
→
translate3d

rotate
→
rotate3d

matrix
→
matrix3d

body
{

perspective:
1000;

perspective-‐origin:
50%
100%;
}

#kitten
{

margin:
auto;

display:
block;
}

#kitten:hover
{

transform:
rotateY(-‐25deg);
}

#level1
{

background:
url(kitten.jpg)
no-‐repeat;

width:
500px;

height:
333px;

transform:
rotateY(-‐25deg);

transform-‐style:
preserve-‐3d;
}

#level2
{

border:
5px
solid
red;

width:
200px;

height:
200px;

transform:
translateZ(50px);
}

#level3
{

background:
pink;

width:
150px;

height:
150px;

top:
-‐20px;

position:
relative;

transform:
translateZ(40px);
}

#flower
{

background:

width:
300px;

height:
300px;

transition-‐property:
transform;

transition-‐duration:
1.5s;

transition-‐delay:
.1s;

transition-‐timing-‐function:
ease-‐in;
}

#flower:hover
{

transform:
translateX(600px);
}

#flower
{

background:

width:
300px;

height:
300px;

transition:
all
1.5s
ease-‐in
.1s;
}

“CSS Animations allow an author to modify
CSS property values over time.”

—W3C, http://www.w3.org/TR/css3-animations/

@keyframes
sky
{

0%
{
background-‐color:
#daf2f4;
}

50%
{
#f7d518;
}

100%
{
#f5700d;
}
}

#box
{

animation-‐name:
sky;

animation-‐duration:
5s;

animation-‐timing-‐function:
linear;

animation-‐iteration-‐count:
infinite;

animation-‐direction:
alternate;
}

#box
{

animation:
sky
10s
linear
infinite
alternate;
}

@keyframes
spin
{

0%
{

transform:
rotate(0deg);
}

100%
{

transform:
rotate(180deg);
}
}

#flower-‐1,
#flower-‐2,
#flower-‐3
{

animation:
spin
.7s
linear
infinite;
}

#flower:hover
{

transform:
translateX(600px);
}

#flower:hover
{

-‐moz-‐transform:
translateX(600px);

-‐ms-‐transform:
translateX(600px);

-‐o-‐transform:
translateX(600px);

-‐webkit-‐transform:
translateX(600px);

transform:
translateX(600px);
}

“Comparison of layout engines”
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

“When can I use…”
http://caniuse.com/

.borders
{

border:
1px
solid
black;

border-‐radius:
4px;
} .box
{

=
background:
red;

border:
1px
solid
black;
.box
{
border-‐radius:
4px;
}

background:
red;

.borders;
}

.translateX
(@valueX:"")
{

-‐moz-‐transform:
translateX(@valueX);

-‐ms-‐transform:

-‐o-‐transform:

-‐webkit-‐transform:

transform:
}

#flower:hover
{

.translateX(600px);
}

.transition
(@property:"",
@duration:"",
@delay:"",
@timing:"")
{

-‐moz-‐transition-‐property:
@property;

-‐o-‐transition-‐property:
@property;

-‐webkit-‐transition-‐property:
@property;

transition-‐property:
@property;

-‐moz-‐transition-‐duration:
@duration;

-‐o-‐transition-‐duration:
@duration;

-‐webkit-‐transition-‐duration:
@duration;

transition-‐duration:
@duration;

-‐moz-‐transition-‐delay:
@delay;

-‐o-‐transition-‐delay:
@delay;

-‐webkit-‐transition-‐delay:
@delay;

transition-‐delay:
@delay;

-‐moz-‐transition-‐timing-‐function:
@timing;

-‐o-‐transition-‐timing-‐function:
@timing;

-‐webkit-‐transition-‐timing-‐function:
@timing;

transition-‐timing-‐function:
@timing;
}

#flower
{

.transition(transform,
1.5s,
.1s,
ease-‐in);
}

“Pro CSS for High
Traﬃc Websites”

by Antony Kennedy
& Inayaili de León

procssforhightraﬃcwebsites.com

“CSS3 for Web Designers”, by Dan Cederholm
http://www.abookapart.com/products/css3-for-web-designers

“Hardboiled Web Design”, by Andy Clarke
http://ﬁvesimplesteps.com/books/hardboiled-web-design

Surﬁn’ Safari
http://www.webkit.org/blog/

Mozilla Developer Network
https://developer.mozilla.org/en-US/

The Speciﬁcation
http://www.w3.org/

IE F IREFOX W EB K IT O PERA

2D Transforms
IE 9 Firefox 3.5 Opera 10.5

3D Transforms
IE 10

Transitions
IE 10 Firefox 4 Opera 10.5

Animations
Firefox 5

“CSS3 Memory”
http://media.miekd.com/css3memory/

“Kaleidoscope”
http://www.kaleidoscopeapp.com/

“Reeder”
http://reederapp.com/

Just because you can, doesn’t mean you should.

http://www.ﬂickr.com/photos/8790226@N06/3577837508/

“The Illusion of Life:
Disney Animation”

by Ollie Johnston
& Frank Thomas

“Anything composed of living ﬂesh, no matter how
bony, will show considerable movement within its
shape in progressing through action.”

—Ollie Johnston & Frank Thomas, “The Illusion of Life: Disney Animation”

“If the character has any
appendages, such as long
ears or a tail or a big coat,
these parts continue to
move a er the rest of
the ﬁgure has stopped.”

—Ollie Johnston & Frank Thomas,
“The Illusion of Life: Disney Animation”

CSS3 Transforms Transitions and Animations

More Related Content

What's hot

Viewers also liked

Similar to CSS3 Transforms Transitions and Animations

Recently uploaded

CSS3 Transforms Transitions and Animations