UNIT 2:
• An animation lets an element gradually change from one style
to another.
• You can change as many CSS properties you want, as many
times as you want.
• To use CSS animation, you must first specify some keyframes
for the animation.
• Keyframes hold what styles the element will have at certain
times.
Creating a simple animation
• <html>
• <head>
• <style>
• /* The element to apply the animation to */
• div {
• width: 100px;
• height: 100px;
• background-color: red;
• animation-name: example;
• animation-duration: 4s;
• }
• /* The animation code */
• @keyframes example {
• from {background-color: red;}
• to {background-color: yellow;}
• }
• </style>
• </head>
• <body>
• <h1>CSS Animation</h1>
• <div></div>
• <p>Welcome to CSS Animation </p>
• </body>
• </html>
CSS Animation property
The animation property is a shorthand property for:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
Note: Always specify the animation-duration property,
otherwise the duration is 0, and will never be played.
Syntax:
/*property-name*/: /*value*/;
Animation-Name
The animation-name property specifies a name for the @keyframes
animation.
Syntax:animation-name: keyframename|none|initial|inherit;
Property Value: The animation-name property value are listed below:
• keyframename: This property is used to specify the name of the
keyframe which need to bind with selector.
• none: It is the default value. It is used to specify that there will be no
animation.
• initial: This property is used to set this property to its default value.
• inherit: This property is used to inherits this property from its
parent element.
• Eg: div { animation-name: mymove; }
Animation-Duration
The animation-duration property in CSS is used to define how
long an animation should take to complete one cycle.
Syntax:animation-duration: time|initial|inherit;
Property Value:
• time: This value is used to specify the length of time for
which an animation will complete one cycle. This can be
specified in either in seconds or in milliseconds. The default
value is 0, which means that no animation will occur.
• initial: This value is used to set the property to its default
value.
• inherit: This value is used to inherit the property from its
parent element.
• Eg: div { animation-duration: 3s; }
CSS animation-timing-function
The animation-timing-function property in CSS is used to specify how the
animation makes transitions through keyframes. That is, it is used to specify
the motion of animation during transitions.
Syntax: animation-timing-function: linear | ease | ease-in | ease-out | ease-
in-out |step-start | step-end|
steps(int, start | end) | cubic-bezier(n, n, n, n) | initial | inherit;
Property Value:
• ease: With this property value, the animation starts slowly, then fast, and
then finally ends slowly (this is default).
• linear: If this value is specified for the property then the animation plays
with the same speed from start to end.
• ease-in: If this value is specified then the animation begins with a slow
start.
• ease-out: If this value is specified for the property then the animation
plays normally but ends slow. This is similar to ease-in.
• ease-in-out: With this property value, the animation both starts and ends
slow.
Animation-delay
• The animation-delay property is used to set the animations on the web
pages.
• The animation-delay property tells us about the delay in the start of an
animation.
• The animation-delay value is defined in milliseconds (ms) or seconds (s).
• Its default value is 0 seconds.
• The property is very useful in making the webpages attractive
Syntax: animation-delay: time |initial |inherit;
Property Values:
• time: This value is optional. It is used to define the number of seconds (s)
or milliseconds (ms) to wait before the animation will start, that is the
amount of time for which the animation will be delayed. The default value
is 0. Negative values are allowed. If a negative value is used, the animation
will start as if it had already been playing for N seconds/milliseconds.
• initial: This value is used to set the property to its default value.
• inherit: This value is used to inherit the property from its parent element.
Animation-iteration-count
The animation-iteration-count property in CSS is used to
specify the number of times the animation will be repeated. It can
specify as infinite to repeat the animation indefinitely.
Syntax:animation-iteration-count: number|infinite|initial|inherit;
Property Value:
• number: This property value is used to define the number of
times an animation should be played. The default value is 1.
• infinite: This property value specifies that the animation
should be played infinite times (forever).
• initial: This property value is used to set this property to its
default value.
• inherit: This value is used to inherit this property from its
parent element.
Animation-direction
The animation-direction property in CSS is used to define the direction of the
animation. The direction of animation should be forwards, backward, or in
alternate cycles.
Syntax:animation-direction: normal|reverse|alternate|alternate-reverse|
initial|inherit;
Property Value: The animation-direction property are listed below:
• normal: This animation property plays the animation forward. It is the
default value.
• reverse: This animation property plays the animation in the reverse direction.
• alternate: This animation property plays the animation forwards first, and
then backward.
• alternate-reverse: This animation property play animation backwards first,
and then forwards.
• initial: This property is used to set the animation property to its default value.
• inherit: This property is used to inherit the animation property from its
parent element.
Animation-fill-mode
The animation-fill-mode property is used to specify the values that are applied by the
animation before and after it is executed. Before playing the first keyframe or after
playing the last keyframe CSS animations do not affect the element. The animation-
fill-mode property can override this behavior.
Syntax:animation-fill-mode: none | forwards | backwards | both | initial |
inherit;
Property Value: The animation-fill-mode property contains many values which are
listed below:
• none: It is the default value. The animation properties will not apply to any
element before or after it is executed.
• forwards: The element will retain the same animation properties of the last
keyframe after the animation completes.
• backwards: This property value is used to set the element to the first keyframe
value before starting the animation.
• both: This property is used to follow the rules for both forwards and backward.
• initial: This property is used to set the property to its default value.
• inherit: This property is used to inherit this property from its parent element.
Animation-play-state
The animation-play-state property is used to specify whether
the animation is running or paused.
Syntax: animation-play-state: paused|running|initial|inherit;
Property Value: The animation-play-state property are listed
below:
• paused: This property is used to specify that the animation is
paused.
• running: It is the default value. This property is used to
specify that the animation is running.
• initial: This property is used to set its default value.
• inherit: It is used to inherit the animation property from its
parent.
Keyframes
When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.
Example
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Declaring multiple animations
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}div:hover {
width: 500px;
height: 500px;
transform: rotate(180deg);
}</style>
</head>
<body>
<h1>Transition + Transform</h1>
<p>Hover over the div element below:</p>
<div></div>
</body>
</html>
CSS word-wrap
The word-wrap property in CSS is used to break long words and
wrap them into the next line. It defines whether to break words
when the content exceeds the boundaries of its container.
Syntax: word-wrap: normal|break-word|initial|inherit;
Property Value:
• normal: It is the default value, The lines can only be broken at
normal break points (spaces, non-alphanumeric characters,
etc.).
• break-word: Words that exceed the width of the container will
be arbitrarily broken to fit within the container’s bounds.
• initial: It is used to set word-wrap property to its default value.
• inherit: This property is inherited from its parent.
<html>
<head>
<style>
div {
width: 150px;
border: 1px solid #000000; }
div.a {
word-wrap: normal; }
div.b { word-wrap: break-word; }
</style>
</head>
<body>
<h1>The word-wrap Property</h1>
<h2>word-wrap: normal (default):</h2>
<div class="a"> This div contains a very long word: thisisaveryveryveryveryveryverylongword.
The long word will not break and wrap to the next line.</div>
<h2>word-wrap: break-word:</h2>
<div class="b"> This div contains a very long word: thisisaveryveryveryveryveryverylongword.
The long word will break and wrap to the next line.</div>
</body>
</html>
CSS transition
The transition property in CSS is used to make some transition
effects. The transition is the combination of four properties which
are listed below:
• transition-property
• transition-duration
• transition-timing-function
• transition-delay
Syntax:
transition: transition-property transition-duration transition-
timing-function transition-delay;
Note: If any of the values are not defined then the browser
assumes the default values.
Property Values:
• transition-property: It specifies the CSS properties to which
a transition effect should be applied.
• transition-duration: It specifies the length of time a
transition animation should take to complete.
• transition-timing-function: It specifies the speed of
transition.
• transition-delay: It specifies the transition delay or time when
the transition starts.
Shorthand Properties
• Shorthand properties allow us to write multiple properties in a
single line and in a compact way. They are useful as they
provide clean code and also decrease the LOC (Line of Code).
The Shorthand properties we will be covering:
• Background
• Font
• Border
• Outline
• Margin
• Padding
• List
Background: The CSS Background property is used to set the
background on a web page. The background can be applied to
any element like the body, h1, p, div, etc. There are many
properties available with a background such as color, image,
position, etc. Some of them are used in the below code.
Longhand way:
background-color:#000;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position:left top;
Shorthand way:
background:#000 url(images/bg.png) no-repeat left top;
Font: The CSS font property is used to apply different fonts to
the text on the webpage. The various attributes that can be set
using the font are font-family, font-size, font-weight, etc. Some
of them are used in the below code.
Longhand way:
font-style:italic;
font-weight:bold;
font-size:18px;
line-height:150%;
font-family:Arial,sans-serif;
Shorthand way:
font: italic bold 18px/150% Arial, sans-serif;
Border: The CSS border property is used to apply a border to different
elements of a web page. There are many attributes of the border like width,
style, color, etc.
Longhand way:
border-width: 1px;
border-style: solid;
border-color: #000;
Shorthand way:
border: 1px solid #000;
Outline: The CSS outline property is used to apply an outline to various
elements that are present in a web page.
Longhand way:
• outline-width: 1px;
• outline-style: solid;
• outline-color: #000;
Shorthand way:
outline: 1px solid #000;
Margin: The CSS margin properties are used to create space around elements,
outside of any defined borders. We can define margin for all 4 sides i.e. top,
bottom, left and right.
Longhand way:
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left :5px;
Shorthand way:
margin : 10px 5px 10px 5px;
Padding: The CSS padding properties are used to generate space around an
element’s content, inside of any defined borders. Padding can also be applied
as top, bottom, left and right padding.
Longhand way:
padding-top: 10px;
padding-right: 5px;
Shorthand way:
padding : 10px 5px 10px 5px;
List: There are mainly two types of list in CSS: 1. Ordered list<ol> 2.
Unordered list <ul> UnOrdered lists have bullet points while ordered lists
have numbers.
Longhand way:
list-style-type: disc;
list-style-position: inside;
list-style-image: url(disc.png);
Shorthand way:
list-style: disc inside url(disc.png);
Working with Multiple Transitions
• To create multiple transitions on an element, we will
need to add additional transitions to the CSS code.
For example, to create a button that transitions both
the width and background-color properties, for doing
this we can use the following code −
Eg: button { transition: width 0.5s ease-in-out,
background-color 0.5s ease-in-out; }
• The above code specifies that both the width and
background-color properties of the button will
transition over a period of 0.5 seconds using an ease-
in-out timing function.
HTML5 -SVG
The HTML SVG stands for Scalable Vector Graphics. It
basically defines vector-based graphics in XML format. SVG
graphics do NOT lose any quality if they are zoomed or resized.
Every element and every attribute in SVG files can be animated.
Advantages of SVG:
• The advantages of using SVG over other image formats (like
JPEG and GIF) are:
• SVG images can be created and edited with any text editor.
• SVG images can be searched, indexed, scripted, and
compressed.
• SVG images are scalable.
• SVG images can be printed with high quality at any
resolution.
Viewing SVG Files
Most of the web browsers can display SVG just like
they can display PNG, GIF, and JPG. Internet Explorer
users may have to install the Adobe SVG Viewer to be
able to view SVG in the browser.
Embedding SVG in HTML5
HTML5 allows embedding SVG directly
using <svg>...</svg> tag which has following simple
syntax −
<svg xmlns = "http://www.w3.org/2000/svg"> ... </svg>
SVG Circle - <circle>
• The <circle> element is used to create a circle.
• The <circle> element has three basic attributes to
position and set the size of the circle:
Attribute Description
r Required. The radius of the circle
cx The x-axis center of the circle. Default is 0
cy The y-axis center of the circle. Default is 0
<html>
<body>
<svg height="100" width="100"
xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" />
</svg>
</body>
</html>
Output:
SVG Rectangle - <rect>
• The <rect> element is used to create a rectangle and variations
of a rectangle shape.
• The <rect> element has six basic attributes to position and
shape the rectangle:
Attribute Description
width Required. The width of the rectangle
height Required. The height of the rectangle
x The x-position for the top-left corner of the rectangle
y The y-position for the top-left corner of the rectangle
rx The x radius of the corners of the rectangle (used to round
the corners). Default is 0
ry The y radius of the corners of the rectangle (used to round
the corners). Default is 0
<html>
<body>
<svg width="300" height="130"
xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="100" x="10" y="10" rx="20"
ry="20" fill="blue" />
</svg>
</body>
</html>
Output:
SVG <line>
The <line> element is used to create a line.
The <line> element creates a line between the start position
(x1,y1) and the end position (x2,y2).
The <line> element has four basic attributes to position and set
the length of the line:
Attribute Description
x1 The start of the line on the x-axis
y1 The start of the line on the y-axis
x2 The end of the line on the x-axis
y2 The end of the line on the y-axis
<html>
<body>
<svg height="200" width="300"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="200"
style="stroke:red;stroke-width:2" />
</svg>
</body>
</html>
Output:
SVG <ellipse>
The <ellipse> element is used to create an ellipse.
An ellipse is closely related to a circle. The difference is that an
ellipse has an x and a y radius that differs from each other, while
a circle has equal x and y radius.
The <ellipse> element has four basic attributes to position and set
the size of the ellipse:
Attribute Description
rx Required. The x radius of the ellipse
ry Required. The y radius of the ellipse
cx The x-axis center of the ellipse. Default is 0
cy The y-axis center of the ellipse. Default is 0
<html>
<body>
<svg height="140" width="500"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="120" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:green;stroke-width:3" />
</svg></body>
</html>
Output:
SVG <polygon>
• The <polygon> element is used to create a
graphic that contains at least three sides.
• Polygons are made of straight lines, and the
shape is "closed" (it automatically connects the
last point with the first).
• The <polygon> element has one basic attribute
that defines the points of the polygon:
Attribute Description
points Required. The list of points of the polygon. Each point must contain
an x coordinate and a y coordinate
<html>
<body>
<svg height="220" width="500"
xmlns="http://www.w3.org/2000/svg">
<polygon points="200,10 250,190 150,190"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg></body>
</html>
Output
The points attribute defines the x and y
coordinates for each corner of the
polygon
SVG Star - <polygon>
<html>
<body>
<svg height="210" width="500"
xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;"/>
</svg></body>
</html>
Output:
SVG Polyline - <polyline>
The <polyline> element is used to create any shape that consists
of only straight lines (that is connected at several points).
The <polyline> element has one basic attribute that defines the
points of the polyline:
Attribute Description
points Required. The list of points of the polyline. Each point must contain
an x coordinate and a y coordinate
<html>
<body>
<svg height="210" width="500"
xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 50,150 100,75 150,50 200,140 250,140"
style="fill:none;stroke:green;stroke-width:3" />
</svg>
</body></html>
Output
SVG Gradients
• A gradient is a smooth transition from one color to another. In
addition, several color transitions can be applied to the same
element.
• There are two types of gradients in SVG:
Linear gradients - defined with <linearGradient>
Radial gradients - defined with <radialGradient>
• The gradient definitions are placed within the <defs> or
the <svg> element. The <defs> element is short for
"definitions", and contains definition of special elements (such
as gradients).
• Each gradient must have an id attribute which identifies the
gradient. The graphic/image then points to the gradient to use.
SVG Linear Gradient - <linearGradient>
• The <linearGradient> element is used to define a linear
gradient (a linear transition from one color to another, from
one direction to another).
• The <linearGradient> element is often nested within
a <defs> element.
• Linear gradients can be defined as horizontal, vertical or
angular gradients:
• Horizontal linear gradients (this is default) goes from left to
right (where x1 and x2 differ and y1 and y2 are equal)
• Vertical linear gradients goes from top to bottom (where x1
and x2 are equal and y1 and y2 differ)
• Angular linear gradients are created when x1 and x2 differ
and y1 and y2 differ
Horizontal Linear Gradient
An ellipse with a horizontal linear gradient that goes from yellow to red:
<html>
<body>
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg></body>
</html>
Output:
SVG Radial Gradients
• SVG Radial Gradient - <radialGradient>
• The <radialGradient> element is used to define a
radial gradient (a circular transition from one color to
another, from one direction to another).
• The gradient definitions are placed within
the <defs> or the <svg> element. The <defs> element
is short for "definitions", and contains definition of
special elements (such as gradients).
• Each gradient must have an id attribute which
identifies the gradient. The graphic/image then points
to the gradient to use.
<html>
<body>
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</body>
</html>
Output:
