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

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to CSS3 Transforms Transitions and Animations (20)

Recently uploaded (20)

CSS3 Transforms Transitions and Animations