XP

Chapter 7 Working with Multimedia

1
Objectives XP

• Understand audio and video formats

• Insert an HTML audio clip
• Support multiple audio formats
• Insert an HTML video clip
• Write a video caption track

2
Objectives (continued) XP

• Format video captions

• Create a CSS transition
• Explore transition attributes
• Create a CSS key frame animation
• Apply a CSS animation

3
Introducing Multimedia on the WebXP
• HTML is the perfect tool to share text and data
• The next major phase in HTML language was
the introduction of multimedia support
• Streaming audio, video, and interactive games,
made the web a dominant entertainment
platform
• One of the biggest challenges
– Delivering multimedia content in a form that can
be retrieved quickly and easily without loss of
quality
4
Understanding Codecs and ContainersXP
• Codec: Computer program that encodes and
decodes streams of data
• Codecs compress data to transmit it in fast and
efficient manner
• Codecs decompress data when it is to be read
or played back

5
Understanding Codecs and Containers XP
(continued 1)
• The compression method can be either lossy
or lossless
• Lossy compression: Nonessential data is
removed in order to achieve a smaller file size
– Example:
• An audio file might be compressed by removing sounds
that the human ear can barely hear

6
Understanding Codecs and Containers XP
(continued 2)
– The more the file is compressed, the more the
content is lost
– Data removed during compression cannot be
recovered
• Lossless compression: Data is compressed by
removing redundant information
– Example:
• AAAABBBBBCCCCCC requires 15 characters of
information, which can be rewritten using 6 characters
as 4A5B6C

7
 Understanding Codecs and Containers XP
(continued 3)
– Lossless compression cannot achieve the same level of
compression as with lossy compression
• Codecs are placed within a container that handles the
packaging, transportation and presentation of data
• Container is the file format identified by a file extension
<audio controls>
<source src="love.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="love.mp4" type="audio/mp4; codecs=aac "/>
</audio>

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_audio_controls

8
 XP

<audio controls>
<source src="love.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="love.mp4" type="audio/mp4; codecs=aac "/>
</audio> 9
 Understanding Codecs and Containers XP
<audio controls>
(continued
<source 4) type="audio/ogg; codecs=vorbis"/>
src="love.ogg"
• The src="love.mp4"
<source web supports a multitude of container andcodecs=aac
type="audio/mp4; codec combinations
"/>
• Not all containers and codecs are equally supported
</audio>

10
Understanding Plug-Ins XP

• Media player: Decodes and plays multimedia

content stored within a container file
• Plug-in: Software program accessed by a
browser to provide a feature or capability not
native to the browser
• A plug-in either opens in its own external
window or runs within the web page as an
embedded object

11
Understanding Plug-Ins (continued 1)XP
• Problems with the plug-in approach for delivery
of multimedia content
– Plugs-ins require users to install a separate
application in addition to their web browsers
– A common plug-in is not available across all
browsers, operating systems, and devices
– HTML documents that support multiple plug-ins are
difficult to create and maintain

12
Understanding Plug-Ins (continued 2)XP
– Plug-ins consume valuable system resources,
resulting in slow and unreliable performance
– Plug-ins are a security risk with some of the most
prominent Internet attacks working their way into
browsers via a plug-in

13
 Working with the audio ElementXP
• Audio clips are embedded within a web page using audio
element
<audio src=“url” attributes />
where url specifies the source of the audio file and
attributes define how the audio clip should be handled by
the browser

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_audio_controls

<audio controls>
<source src="love.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="love.mp4" type="audio/mp4 codecs=aac; "/>
</audio>

audio_with_multiple_sources.html
14
 Working with the audio Element (continued) XP
https://www.w3schools.com/tags/tag_audio.asp

https://www.w3schools.com/tags/
att_audio_controls.asp

https://www.w3schools.com/tags/att_audio_loop.asp

https://www.w3schools.com/tags/att_audio_muted.asp

https://www.w3schools.com/tags/att_audio_preload.asp

preload=none  default

https://www.w3schools.com/tags/att_audio_src.asp

<audio src= “cp_overture.mp3” controls />

<audio src= “cp_overture.mp3” autoplay loop />

15
 https://www.w3sch
Browsers and Audio Formats ools.com/tags/tryit.
XP
asp?filename=tryht
ml5_audio_controls

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>>

16
 XP
Browsers and Audio Formats (continued 1)

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>>
17
 XP
Browsers and Audio Formats (continued 2)
• Nest several source elements within a single audio element
to provide several versions of the same media file
<audio>
<source src=“url1” type=“mime-type” />
<source src=“url2” type=“mime-type” />
… </audio>
where, url1, url2,… are the URLs for each audio file and
mime-type specifies the audio format associated with each file

<audio src= “cp_overture.mp3” controls />

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>>
18
 XP
Browsers and Audio Formats (continued 3)

<audio controls> https://www.w3schools.com

<source src="horse.ogg" type="audio/ogg"> /tags/tryit.asp?filename=try
html5_audio_controls
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>>
19
 Applying Styles to the Media Player XP

• The appearance of a media player is

determined by the browser itself
• CSS can be applied to set the width of the
media player, add borders and drop shadows,
and apply filters and transformations to the
player’s appearance

Google
chrome
Internet Explorer 20
Providing a Fall-back to an Audio ClipXP
https://www.w3schoo
ls.com/cssref/css3_pr
_box-shadow.asp

https://www.w3schools.
com/cssref/tryit.asp?file
name=trycss3_box-shad
ow

CSS can be applied to set the width of the

media player, add borders and drop shadows
to the player’s appearance
21
Exploring Embedded Objects XP

• Plug-ins in older browsers are marked using the embed

element
<embed src=“url” type=“mime-type” width=“value” height=“value” />

where url is the location of the media file, type attribute

provides the mime-type, and width and height attributes set
the width and height of the media player

<embed src=“cp_overture.mp3” width=“250”

height=“50” controller=“yes” autoplay=”no” />

22
Plug-In Attributes XP

• src, type, height, and width attributes are

generic attributes applied to embed element for
any plug-in
• For example, the following embed element
adds attributes to display the media player
controls and prevent the playback from
starting automatically:
<embed src=“cp_overture.mp3” width=“250”
height=“50” controller=“yes” autoplay=”no” />

23
XP

24
 Plug-Ins as Fallback Options XP

• Add embed element to the end of the audio

element as the last option for a browser that
does not support HTML5 multimedia elements
• Use of plug-ins has steadily declined since the
widespread adoption of HTML5 standard
<audio controls>
<source src=“cp_overture.mp3” type=”audio/mp3” />
<source src=“cp_overture.ogg” type=”audio/ogg” />
<embed src=“cp_overture.mp3” width=”250” height=”50”
controller=”yes” autoplay=”no” showcontrols=”yes” autostart=”no” />
</audio>
25
Video Formats and Codecs XP

• A video file contains codecs for the following:

– audio
– video images

26
Video Formats and Codecs (continued 1)
XP

<video controls tabindex="0" poster="Desert.jpg" autoplay loop=“5">

<source src="mov_bbb.webm" type="video/webm">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>

audiovideo_with_multiple_sources.html
27
Video Formats and Codecs (continued 2)
XP

audiovideo_with_multiple_sources.html
28
 Using the HTML5 video ElementXP
• Videos are embedded into a web page using video element
<video attributes>
<source src=“url1” type=“mime-type” />
<source src=“url2” type=“mime-type” />
… </video>
where attributes are HTML attributes that control the behaviour and
appearance of the video playback, url1, url2,… are the possible sources
of the video
<video controls tabindex="0" poster="Desert.jpg" autoplay loop>
<source src="mov_bbb.webm" type="video/webm">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
audiovideo_with_multiple_sources.html

https://www.w3schools.com/html/html5_video.asp

29
Using the HTML5 video Element XP
(continued 1)
mime-type specifies the format associated with each video file

30
Using the HTML5 video Element XP
(continued 2) audiovideo_with_multiple_sources.html

31
Using the HTML5 video Element XP
(continued 3)
• poster attribute defines a video’s preview image
<video poster=”url”>
…
</video>
where url points to an image file containing the preview image
• poster attribute is used as a placeholder image that is displayed when a video is
being downloaded

<video controls tabindex="0" poster="Desert.jpg" autoplay loop

<source src="mov_bbb.webm" type="video/webm">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
audiovideo_with_multiple_sources.html
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_poster
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_tabindex
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop
32
Adding a Text Track to Video XP

• Text track (cue) that needs to be read or

recited to visually impaired users can be
added to a media clip
• Audio and video content accessible to all users
• Text tracks are added to an audio or video clip
using track element

33
Adding a Text Track to Video (continued 1)XP
<track kind=“type” src=“url” label=“text” srclang=“lang”
/>
where,
– kind attribute defines the track type
– src attribute references a file containing the track text
– label attribute gives the track name
– srclang attribute indicates the language of the track

<video width="320" height="240" controls>

<source src="artist.mp4" type="video/mp4">
<source src="artist.ogg" type="video/ogg">
<track src="subtitles_en.vtt“ kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

34
Adding a Text Track to Video (continued 2)XP

<video width="320" height="240" controls>

<source src="artist.mp4" type="video/mp4">
<source src="artist.ogg" type="video/ogg">
<track src="subtitles_en.vtt“ kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
35
Making Tracks with WebVTT XP

• Tracks are stored as simple text files written in Web Video Text
Tracks or WebVTT language
• Format of a WebVTT file
WEBVTT
cue1
cue2
…
where cue1, cue2,… are cues matched with specific time
intervals within a media clip

https://www.youtube.com/watch?v=Gc1xyxV7K5M
https://www.3playmedia.com/2017/06/30/how-to-create-a-webvtt-file/

36
Making Tracks with WebVTT (continued 1)XP
• List of cues is separated by a single blank line after a cue text
• White space is not ignored in WebVTT files
• General form of a cue
label
start --> stop
cue text
where label is the name assigned to the cue, start and stop
define the time interval, and cue text is the text of the cue

37
 XP

General form of a
cue
label
start --> stop
cue text

38
XP

39
 cp_captions.vtt
XP

Tracks are stored as

simple text files written
in Web Video Text
Tracks or WebVTT
language
<video controls poster="cp_photo2.png".> Cp_royal.html
<source src="cp_dance.mp4" type="video/mp4" />
<source src="cp_dance.webm" type="video/webm" />
<track kind="captions" src="cp_captions.vtt" label="Dance Captions" default />
<p>
<em>To play this video clip, your browser needs to support HTML5. </em>
</p> Use Internet Explorer to open the web page
</video> 40
Placing the Cue Text XP

• Size and position of a cue text can be set using

cue settings directly after the cue’s time
interval
setting1:value1 setting2:value2 …
where setting1, setting2,… define the size
and position of the cue text and value1,
value2,… are the setting values
• There is no space between the setting name
and value

41
Placing the Cue Text (continued 1)XP

42
 Size and position of a cue text / text track XP

text
cue 43
Applying Styles to Track Cues XP

• cue pseudo-element to format the appearance

of the cues appearing within a media clip
::cue {
styles
}
• Styles for the cue pseudo-element are limited
to background, color, font, opacity,
outline, text-decoration, text-shadow,
visibility, and white-space properties

44
 Applying Styles to Track Cues (continued 1) XP

• Format specific cues or text strings within a

cue using the following markup tags:
– <i></i> for italicized text The <ruby> tag specifies a ruby
– <b></b> for bold-faced text annotation. A ruby annotation is a small
– <u></u> for underlined text extra text, attached to the main text to
– <span></span> to mark spans of text indicate the pronunciation or meaning of
– <ruby></ruby> to mark ruby text the corresponding characters. This kind of
annotation is often used in Japanese
– <rt></rt> to mark ruby text
publications.

<h1>The ruby and rt elements</h1>

<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ruby
45
Applying Styles to Track Cues (continued 2) XP

• WebVTT supports tags that are not part of the

HTML library
• <c></c> tag is used to mark text strings
belonging to a particular class
<c.classname></c>
• <v></v> tag is used for captions that
distinguish between one voice and another
<v name></v>

46
 https://www.youtube.com/watch?v=Gc1xyxV7K5M
cp_captions.vtt https://www.3playmedia.com/2017/06/30/how-to-
create-a-webvtt-file/ XP

cp_loyal.html
<link href="cp_media.css" rel="stylesheet" />
:
<video controls poster="cp_photo2.png".>
<source src="cp_dance.mp4" type="video/mp4" />
<source src="cp_dance.webm" type="video/webm" />
<track kind="captions" label="Dance Captions" src="cp_captions.vtt" default />
<p><em>To play this video clip, your browser needs to
support HTML5.</em></p>
</video> 47
 XP

<p class = “a” > p.a{color:blue }

<p id=“b” > p#b{color:green } 48
Size and position of a cue text / text track
XP

cue

text
49
Adding a Text Track to Video XP

• Text track that needs to be read or recited to

visually impaired users can be added to a
media clip
• Audio and video content accessible to all users
• Text tracks are added to an audio or video clip
using track element

50
Adding a Text Track to Video (continued 1)XP
<track kind=“type” src=“url” label=“text” srclang=“lang”
/>
where,
– kind attribute defines the track type
– src attribute references a file containing the track text
– label attribute gives the track name
– srclang attribute indicates the language of the track

<video width="320" height="240" controls>

<source src="artist.mp4" type="video/mp4">
<source src="artist.ogg" type="video/ogg">
<track src="subtitles_en.vtt“ kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

51
Adding a Text Track to Video (continued 2)XP

<video width="320" height="240" controls>

<source src="artist.mp4" type="video/mp4">
<source src="artist.ogg" type="video/ogg">
<track src="subtitles_en.vtt“ kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
52
Using Third-Party Video Players XP

• object element is used to define browsers with plug-ins

<object attributes>
parameters video_on_wmv
</object>
where attributes define the object and parameters are
values passed to the object controlling the object’s
appearance and actions
• Parameters of the object are defined using param element
<param name=“name” value=“value” />
where name is the name of the parameter and value is the
parameter’s value

53
 video_on_wmv
Exploring the Flash Player XP
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_param
• The most-used plug-in for video playback is Adobe Flash player embedded
using the following object element:
<object data=“url” type=“application/x-shockwave-flash”
width=“value” height=“value”>
<param name=“movie” value=“url” /> parameters
</object>

<object id="MediaPlayer" width="192" height="190" type="video/x-ms-asf">

<param name="FileName“ value="Wildlife.wmv">
<param name="autostart" value="false">
<param name="ShowControls" value="true">
<param name="ShowStatusBar" value="false">
<param name="ShowDisplay" value="false">
<embed type="application/x-mplayer2" src="videofilename.wmv"
width="192" height="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0"
autostart="0" />
</object>
54
 XP

<object id="MediaPlayer" width="192" heig

type="video/x-ms-asf">
<param name="FileName“ value="Wildlife
<param name="autostart" value="false">
<param name="ShowControls" value="true"
<param name="ShowStatusBar" value="fals
<param name="ShowDisplay" value="false"
<embed type="application/x-mplayer2"
src="videofilename.wmv"
width="192" height="190" ShowControls="1
ShowStatusBar="0" ShowDisplay="0" autost
</object>

55
Exploring the Flash Player (continued) XP

56
Embedding Videos from YouTube XP
• YouTube videos are easy to embed in a web
page using YouTube’s HTML5 video player
• Click the Share button below the YouTube
video player to share it
• YouTube provides options to post a hypertext
link to the video to a multitude of social media
sites or to share the link via e-mail

https://www.youtube.com/watch?v=xrP7IERmKDk
57
 Embedding Videos from YouTube XP
(continued 1)
• To embed a video within a website, click Embed, which brings up a preview
of the embedded player and the HTML code that needs to be added to the
web page
• iframe element: Used to mark inline frames
• Inline frames: Windows embedded within a web page that display the
content of another page or Internet resource
• The general code for the embedded player is
<iframe width=“value” height=“value” src=“url”
frameborder=“0” allowfullscreen>
</iframe>
where, the url provides the link to the

<iframe width="560" height="315"

src="https://www.youtube.com/embed/lZVFUQOCQWI"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
58
 Embedding Videos from YouTube XP
(continued 2) video_that_embedded_youtube.html

YouTube video
– width and height attributes define the dimensions of the
player embedded on a web page
– frameborder attribute sets the width of the border around
the player in pixels
– allowfullscreen attribute allows the user to play the
video in full screen mode

<iframe width="560" height="315"

src="https://www.youtube.com/embed/lZVFUQOCQWI"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
https://youtu.be/qWKLkaM0hgI
59
 XP

-Point to video and right click

-click “copy embed code” 60
 XP

<iframe width="560" height="315"

src="https://www.youtube.com/embed/lZVFUQOCQWI"
frameborder="5" allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>

<br/>
<br/>

<iframe width="500" height="300"

src="https://www.tarc.edu.my/">
</iframe>

61
 XP

https://www.w3schools.com/html/tryit.asp?file
Iframe name=tryhtml_iframe_target

<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%"
src="demo_iframe.htm" name="iframe_a">
</iframe>
<p> <a href="https://www.w3schools.com"
target="iframe_a"> W3Schools.com </a> </p>
<p>When the target of a link matches the name
of an iframe, the link will open in the
iframe.</p>
</body>
</html>
HTML5 Video Players XP

• HTML5 video player works within a browser

with CSS and JavaScript files
• It presents a customizable player that can be
adapted to the needs of business or
organization
• For example, YouTube player that provides
both the player and a hosting service for the
video content
The YouTube player is one example
of an HTML5 player

63
HTML5 Video Players (continued) XP
• HTML5 includes the following video players:
– JWPlayer (www.jwplayer.com)
– Video.js (www.videojs.com)
– MediaElement.js (mediaelementjs.com)
– Projekktor (www.projekktor.com)
– Flowplayer/Flash player (flowplayer.org)

64
Introducing Transitions XP

• Transition: Change in an object’s style from the initial state to the ending
state, usually in response to an event initiated by the user or the browser
• It slows down the change from one color to another and provides
intermediate styles

65
XP

66
Introducing Transitions (continued) XP
• To create transition, employ the following transition style:
transition: property duration;
where,
– property is a property of the object that changes between the
initial and end states
– duration is the transition time in seconds or milliseconds

https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition2

67
Setting the Transition Timing XP

• Varying speed of transition is defined using

transition: property duration timing-function;
where timing-function is one of the following keywords:
– ease: (the default) Transition occurs more rapidly at the beginning and slows
down near the end
– ease-in: Transition starts slowly and maintains a constant rate until the finish
– ease-out: Transition starts at a constant rate and then slows down toward
the finish
– ease-in-out: Transition starts slowly, reaches a constant rate, and then
slows down toward the finish
– linear: Transition is applied at a constant rate throughout the duration

68
ease: (the default) Transition occurs more rapidly at the beginning and slows down near the
end XP
ease-in: Transition starts slowly and maintains a constant rate until the finish
ease-out: Transition starts at a constant rate and then slows down toward the finish
ease-in-out: Transition starts slowly, reaches a constant rate, and then slows down toward the
finish
linear: Transition is applied at a constant rate throughout the duration

o https://www.w3scho
ols.com/css/css3_tra
nsitions.asp

#div1 {transition-timing-function: linear;}

https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_speed
69
Setting the Transition Timing XP
(continued 2)
• Timing function can be visualized as a graph
• It shows the progress of transition vs. duration
• The graphical representation of the timing
function is the basis of another measure of
transition timing using
cubic-bezier(n, n, n, n)
where n parameter values define the shape of
the timing curve
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_func_cubic-bezier

70
 #div1 {transition-timing-function: linear;}
or XP
#div1 { transition-timing-function: cubic-bezier(0, 0, 1, 1);

cubic-bezier(0.42,0,1,1) cubic-bezier(0,0,1,1)

Timing function can be visualized as a graph https://www.w3schools.com/cssre

It shows the progress of transition vs. duration f/css3_pr_transition-timing-functi
on.asp
The graphical representation of the timing function is the basis
of another measure of transition timing using https://www.w3schools.com/cssref/f
unc_cubic-bezier.asp
cubic-bezier(n, n, n, n)
where n parameter values define the shape of the timing curve
71
 https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition-delay
https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition4

Delaying a Transition https://www.w3schools.com/css/tryit.asp?filename=

XP
trycss3_transition2

• Transition does not need to start immediately after the event

that triggers it https://www.w3schools.com/css/css3_transitions.asp

• Start of the transition can be delayed by adding delay value to

the following:
transition: property duration timing-function delay;

where delay is measured in seconds or milliseconds

<style> <style>
div { width: 100px; height: 100px; div { width: 100px; height: 100px;
background: red; background: red;
transition-property: width; transition : width 2s linear 1s;}
transition-duration: 2s;
transition-timing-function: linear; div:hover { width: 300px;}
transition-delay: 1s;} </style>

div:hover { width: 300px;}

</style> 72
Creating a Hover Transition XP

• Transition property can be added to slow down

the transition from initial to end state
73
XP

74
XP

75
 https://www.w3schools.com/css/css3_2dtransforms.asp animation1.html
OR
nav#topLinks a { XP
color: rgb(255, 255, 255);
text-shadow: rgba(0, 0, 0, 1) 1px -1px 1px;
transform: scale(1,1) translateY(0px);
transition: all 1.2s linear; }

nav#topLinks a:hover {
color: rgb(255, 183, 25);
text-shadow: rgba(0, 0, 0, 0.5) 0px 15px 4px;
transform: scale(2,2) translateY(-15px); }

The scale() method increases or
decreases the size of an element
(according to the parameters given The translate() method moves an element from its
for the width and height). current position (according to the parameters given
The following example increases the for the X-axis and the Y-axis).
The following example moves the <div> element 50
<div> element to be two times of pixels to the right, and 100 pixels down from its
its original width, and three times of current position:
its original height: 
div {  transform: scale(2, 3);} div {  transform: translate(50px, 100px); }

translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis

translateX(n) Defines a 2D translation, moving the element along the X-axis

translateY(n) Defines a 2D translation, moving the element along the Y-axis 76

 Animating Objects with CSS XP

• Key frame: Sequence of changing images to create illusive movement for

animation
• CSS replaces the concept of key frame images with key frame styles that are
applied in rapid succession to a page object
• @keyframes Rule
@keyframes name {
keyframe1 {styles;}
keyframe2 {styles;}
…}
– name provides the name or title of the animated sequence
– keyframe1,keyframe2,… defines the progress of individual key
frames that are expressed as percentages or with keywords from and to
– styles are styles applied within each key frame

77
<!DOCTYPE html> @keyframes Rule
<html>
<head>
@keyframes name {
keyframe1 {styles;}
XP
<style> keyframe2 {styles;}
div { width: 100px; height: 100px; background: red; position: relative;
…}
animation: mymove 5s infinite; animation-timing-function: linear; }

@keyframes mymove { or
from {left: 0px;} @keyframes mymove {
to {left: 200px;} 0% {left: 0px;}
} 100% {left: 200px;}
</style> }
</head>
<body>
<h1>The animation-timing-function Property</h1>
<p>Play an animation with the same speed from beginning to end:</p>
<div></div>
<p><strong>Note:</strong> The animation-timing-function property is
not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-timing-function
 XP

animation1.html
10 sec

0.5 sec 10 sec

1 sec 2 sec

79
Applying an Animation XP

• Key frames animation is applied to an object using

animation-name and animation-duration
properties
animation-name: keyframes;
animation-duration: times;
where keyframes is a comma-separated list of
animations applied to the object using the names
from the @keyframes rule and times are the
lengths of each animation expressed in seconds or
milliseconds

80
animation: name duration timing-function delay iteration-count direction fill-mode play-
state;
XP
animation: mymove 5s infinite;

or

animation-name: mymove
animation-duration:5s
animation-iteration-count: infinite

https://www.w3scho
ols.com/cssref/css3_
pr_animation.asp

81
Controlling an Animation XP

• Animation can have two states of operation —

play or pause
• Check box can be used to control animation
• Selecting the check box will play the animation
• Unselecting the check box will pause the
animation

82
Controlling an Animation (continued 2)XP
• Check box can be replaced with more
attractive icons
• Display symbol to run the animation
• Display symbol to pause the animation
• The two symbols have the Unicode values \
21bb and \270b, respectively

83
<input type="checkbox" id="rotateVideo" />
<label for="rotateVideo"> </label> XP

84
 cp_loyal.html open cp_loyal.html
from tutorial folder XP
<link href="cp_media.css" rel="stylesheet" />
<link href="cp_animate.css" rel="stylesheet" />
<script src="cp_spin.js"></script>
</head>
<body>
:
<p>&#8635;to rotate and play the video. Click &#9995; to pause the rotation and
the playback.
</p>
<input type="checkbox" id="rotateVideo" />
<label for="rotateVideo"> </label>
<video controls poster="cp_photo2.png".>
<source src="cp_dance.mp4" type="video/mp4" />
<source src="cp_dance.webm" type="video/webm" />
<track kind="captions" label="Dance Captions" src="cp_captions.vtt" default/>
<p><em>To play this video clip, your browser needs to support HTML5.
</em></p>
</video>

85
cp_animate.css https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-radius
open cp_animate.css
and cp_royal.html from
cp_royal.html
tutorial folder
XP

86
XP

87
 https://www.w3schools.com/css/css_selectors.asp
https://www.w3schools.com/css/css_combinators.asp

a person who XP
is related to you and h1, h2{color: red;}
who lives after you, such
as your child or grandchi h1{color: red;}
ld/ your children or
grandchildren

1kid + 2kid a brother 

or sister
1 kid
2 kid
3 kid 1kid ~ kid
4 kid
1 kid
2 kid
3 kid
4 kid
 Using Pseudo-Classes and
https://www.w3schools.com/css/css_pseudo_classes.asp XP
Pseudo-Elements https://www.w3schools.com/css/tryit.asp?filename=trycss_first-child2

• Pseudo-class – classifies an element based on its current status, position, or use in the
document
element: pseudo-class
where element is an element from the document and pseudo-class is the
name of a css pseudo-class
– 1 .Structural pseudo-class – classifies an element based on its location within the
structure of the HTML document
input#rotateVideo:not(:checked)+label::after { content: "\21bb"; }

89
 Generating Content with CSS https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_before
XP

• New content can be added either before or after an element using the following
before and after pseudo-elements:
element::before {content: text;}
element::after {content: text;}
where text is the content to be inserted into the rendered web page
input#rotateVideo:not(:checked)+label::after { content: "\21bb"; }

90
 XP

• Limitations of transition
– It can only be run when a CSS property is being
changed, such as during the hover event
– It is run once and cannot be looped for repetition
– Initial and end states of the transition can be
defined but not the styles of intermediate states
• Animation is created to overcome the limitations
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-play-state_hover

91