CSS Transitions

CSS3 Transitions
CSS Transitions
• CSS transitions allows you to change property
values smoothly (from one value to another), over
a given duration.
• Example: Mouse over the element below to see a
CSS transition effect:
Browser Support for Transitions
The numbers in the table specify the first browser version
that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the
first version that worked with a prefix.
learn about the following properties:
transition
transition-delay
transition-duration
transition-property
transition-timing-function
Property Chrome IE Firefox Safari Opera
transition 26.0 10.0 16.0 6.1 12.1
4.0 -webki 4.0 -moz- 3.1 -webki 10.5 -o-
t- t-
transition- 26.0 10.0 16.0 6.1 12.1
delay 4.0 -webki 4.0 -moz- 3.1 -webki 10.5 -o-
t- t-
transition- 26.0 10.0 16.0 6.1 12.1
duration 4.0 -webki 4.0 -moz- 3.1 -webki 10.5 -o-
t- t-
transition- 26.0 10.0 16.0 6.1 12.1
property 4.0 -webki 4.0 -moz- 3.1 -webki 10.5 -o-
t- t-
transition- 26.0 10.0 16.0 6.1 12.1
timing-fu 4.0 -webki 4.0 -moz- 3.1 -webki 10.5 -o-
How to Use CSS Transitions?
• To create a transition effect, specify two things:
the CSS property you want to add an effect to
the duration of the effect
• Note: If the duration part is not specified, the
transition will have no effect, because the default
value is 0.
• The following example shows a 100px * 100px
red <div> element.
• The <div> element has also specified a transition
effect for the width property, with a duration of 2
seconds:
• div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
• The transition effect will start when the specified CSS
property (width) changes value.
• Specify a new value for the width property when a user
moves over the <div> element.
• Note:when the cursor mouses out of the element, it
will gradually change back to its original style.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the
transition effect:</p>
<div></div>
</body>
</html>
Change Several Property Values
The following example adds a transition effect for both the width and
height property, with a duration of 2 seconds for the width and 4
seconds for the height:
<!DOCTYPE html>
<html><head><style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 4s; /* For Safari 3.1
to 6.0 */
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition
effect:</p>
<div></div>
</body>
</html>
Specify the Speed Curve of the Transition
• The transition-timing-function property specifies the
speed curve of the transition effect.
• The transition-timing-function property can have the
following values:
• ease - specifies a transition effect with a slow start, then
fast, then end slowly (this is default)
• linear - specifies a transition effect with the same speed
from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow
start and end
• cubic-bezier(n,n,n,n) - lets you define your own values
in a cubic-bezier function
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
<body>
<h1>The transition-timing-function Property</h1>
<p>Hover over the div elements below, to see the

different speed curves:</p>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
Delay the Transition Effect
• The transition-delay property specifies a delay (in
seconds) for the transition effect.
• The following example has a 1 second delay
before starting:
• Example
• div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
Transition + Transformation
• The following example also adds a
transformation to the transition effect:
• Example
• div {
-webkit-transition: width 2s, height 2s,
-webkit-transform 2s; /*
Safari */
transition: width 2s, height 2s, transform 2s;
}
CSS 2D Transforms
• CSS transforms allows to translate, rotate, scale,
and skew elements.
• A transformation is an effect that lets an element
change shape, size and position.
• CSS supports 2D and 3D transformations.
• Mouse over the elements below to see the
difference between a 2D and a 3D transformation:
CSS 2D Transforms
• 2D transformation methods:
translate()
rotate()
scale()
skewX()
skewY()
matrix()
The translate() Method
The translate() method moves an element from
its current position (according to the
parameters given for the X-axis and the
Y-axis).
div {
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari */
transform: translate(50px, 100px);
}
The rotate() Method
• The rotate() method rotates an element clockwise or
counter-clockwise according to a given degree.
• The following example rotates the <div> element

clockwise with 20 degrees:
• div {
-ms-transform: rotate(20deg); /* IE 9
*/
-webkit-transform: rotate(20deg); /* Safari
*/
transform: rotate(20deg);
} Using negative values will rotate the element
counter-clockwise.
The scale() Method
The scale() method increases or decreases the size of an
element (according to the parameters given for the
width and height).
• The following example increases the <div> element
to be two times of its original width, and three times
of its original height:
• Example
• div {
-ms-transform: scale(2, 3); /* IE 9 */
-webkit-transform: scale(2, 3); /* Safari */
transform: scale(2, 3);
}
The skewX() Method
• The skewX() method skews an element along the X-axis
by the given angle.
• The skewY() Method
• The skewY() method skews an element along the Y-axis
by the given angle.
The matrix() Method
• The matrix() method combines all the 2D
transform methods into one.
• The matrix() method take six parameters,
containing mathematic functions, which allows
you to rotate, scale, move (translate), and skew
elements.
• The parameters are as follow:
matrix(scaleX(),skewY(),skewX(),scaleY(),tran
slateX(),translateY())
• div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0,
0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv1 {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax
*/}
</style>
</head>
<body>
<h1>The matrix() Method</h1>
<p>The matrix() method combines all the 2D transform
methods into one.</p>
<div>
This a normal div element.
</div>
<div id="myDiv1">
Using the matrix() method.
</div></body></html>
CSS 3D Transforms
• CSS allows to format elements using 3D
transformations.
• Mouse over the elements below to see the difference
between a 2D and a 3D transformation:
CSS 3D Transforms
• 3D transformation methods:
rotateX()
rotateY()
rotateZ()
• The rotateX() Method
The rotateX() method rotates an element around its X-axis
at a given degree:
• Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;}
#myDiv {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg); /* Standard syntax */
}</style></head>
<body>
<h1>The rotateX() Method</h1>
<p>The rotateX() method rotates an element around its
X-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions)
does not support the rotateX() method.</p>
</body></html>
• The rotateY() method rotates an element around
its Y-axis at a given degree
• The rotateZ() method rotates an element around

its Z-axis at a given degree:
CSS Transform Properties
• The following table lists all the 3D transform properties:
Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed
elements
transform-style Specifies how nested elements are rendered in 3D
space
perspective Specifies the perspective on how 3D elements are
viewed
perspective-origi Specifies the bottom position of 3D elements
n
backface-visibili Defines whether or not an element should be
ty visible when not facing the screen
3D Transform Methods
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Defines a 3D transformation, using a 4x4 matrix of 16
values
translate3d(x,y,z)
Defines a 3D translation
translateX(x)
Defines a 3D translation, using only the value for the
X-axis
translateY(y)
Defines a 3D translation, using only the value for the
Y-axis
translateZ(z)
Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z)
Defines a 3D scale transformation
scaleX(x)
Defines a 3D scale transformation by giving a value
for the X-axis
scaleY(y)
for the Y-axis
scaleZ(z)
for the Z-axis

CSS Transitions

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Transitions

Uploaded by

Copyright:

Available Formats

CSS3 Transitions

learn about the following properties:

<h1>The transition Property</h1>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the

• The following example rotates the <div> element

• The rotateZ() method rotates an element around

You might also like