CSS3 Transitions

• With CSS3, we can add an effect when changing from

one style to another, without using Flash or JavaScript.

• CSS3 transitions are effects that let an element gradually

change from one style to another.

• To do this, you must specify two things:

1. the CSS property you want to add an effect to
2. the duration of the effect
 CSS3 Transition Properties

Property Description CSS

transition A shorthand property for setting the four transition 3
properties into a single property

transition-delay Specifies when the transition effect will start 3

transition-duration Specifies how many seconds or milliseconds a transition 3

effect takes to complete

transition-property Specifies the name of the CSS property the transition 3

effect is for

transition-timing- Specifies the speed curve of the transition effect 3

function
Specify the Speed Curve of the Transition

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
CSS3 Transforms
• With CSS3 transform, we can move, scale, turn, spin,
and stretch elements.

• A transformation is an effect that lets an element change

shape, size and position.

• You can transform your elements using 2D or 3D

transformation.
CSS 2D Transforms
• With the CSS transform property you can use the
following 2D transformation methods:

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()
CSS3 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-origin Specifies the bottom position of 3D elements

backface-visibility Defines whether or not an element should be visible when

not facing the screen
CSS3 Animations
• CSS3 animations can replace animations created by Flash and
JavaScript in existing web pages.

• An animation lets an element gradually change from one style

to another.

• You can change as many properties you want, as many times

you want.

• You can specify when the change will happen in percent, or

you can use the keywords "from" and "to" (which represents
0% and 100%).

• 0% represents the start of the animation, 100% is when the

animation is complete.
CSS3 Animations
• The @keyframes rule is where the animation is created.

• Specify a CSS style inside the @keyframes rule and the

animation will gradually change from the current style to the
new style.

• When an animation is created in the @keyframe rule, you must

bind it to a selector, otherwise the animation will have no effect.

• Bind the animation to a selector (element) by specifying at

least these two properties:
1. the name of the animation
2. the duration of the animation
CSS3 Animation Properties
Property Description CSS

@keyframes Specifies the animation 3

animation A shorthand property for setting all the animation properties, except 3
the animation-play-state and the animation-fill-mode property

animation-delay Specifies when the animation will start 3

animation-direction Specifies whether or not the animation should play in reverse on 3
alternate cycles
animation-duration Specifies how many seconds or milliseconds an animation takes to 3
complete one cycle
animation-fill-mode Specifies what styles will apply for the element when the animation 3
is not playing (when it is finished, or when it has a "delay")

animation-iteration- Specifies the number of times an animation should be played 3

count
animation-name Specifies the name of the @keyframes animation 3
animation-play-state Specifies whether the animation is running or paused 3

animation-timing- Specifies the speed curve of the animation 3

function