Scribd
Upload
49 views9 pages

INP - Module 1 - HSB-Transitions, Tranforms N Animations

The document discusses CSS3 transitions, transforms, and animations. It defines the properties used to control transitions between styles, 2D and 3D transforms of elements, and animations defined using @keyframes. It provides examples of values for properties like transition-timing-function and describes how to bind animations to selectors.

Uploaded by

URVI BALEKUNDRI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
49 views9 pages

INP - Module 1 - HSB-Transitions, Tranforms N Animations

The document discusses CSS3 transitions, transforms, and animations. It defines the properties used to control transitions between styles, 2D and 3D transforms of elements, and animations defined using @keyframes. It provides examples of values for properties like transition-timing-function and describes how to bind animations to selectors.

Uploaded by

URVI BALEKUNDRI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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

You might also like