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
