HTML TAGS

(AUDIO AND
ANIMATION
Wed Application
Objectives

▰At the end of the chapter,

students are expected to:
▻a. Learn the basic HTML
commands applied in
inserting audio
▻b. Discover how to display
animated image objects in
web pages
▻c. Identify other markup
language that is used for 2
web development
 Embedding Audio

HTML supports <audio> tag which is used to embed sound content in an HTML or XHTML document as
follows.

The current HTML5 draft specification does not specify which audio formats browsers should support in the
audio tag. But most commonly used audio formats areogg, mp3andwav.You can use <source&ggt; tag to
specify media along with media type and many other attributes. An audio element allows multiple source
elements and browser will use the first recognized format –

3
Example

4
 Audio Attribute Specification

The HTML5 audio tag can have a number of attributes to control the look and feel and various
functionalities of the control:

5
 Audio Attribute Specification

The HTML5 audio tag can have a number of attributes to control the look and feel and various
functionalities of the control:

6
 Configuring Servers for Media
Types

Most servers don't by default serve Ogg or mp4 media with the correct MIME types, so you'll likely need
to add the appropriate configuration for this.

AddType audio/ogg .oga

AddType audio/wav .wav

AddType video/ogg .ogv .ogg

AddType video/mp4 .mp4

7
 Transition, Transform and Animation

CSS Transitions do smooth out otherwise abrupt changes from state to state over time by filling in the
frames in between.

Transition Basics

Transitions are a lot of fun, so let’s give them a whirl. When applying a transition, there are a few
decisions to make, each of which is set with a CSS property:

• Which CSS property to change (transition-property)

• How long it should take (transition-duration)
• The manner in which the transition accelerates (transition-timing-function)
• Whether there should be a pause before it starts (transition-delay)

8
 The Markup

<a href="" class="smooth">awesomesauce</a>

9
 The Styles

a.smooth { color: #fff;

display: block; background-color:
text-decoration:none; mediumblue;
text-align: center; transition-property:
padding: 1em 2em; background-color;
width: 10em; transition-duration: 0.3s;
border-radius: 1.5em; }

10
 The Styles

a.smooth:hover,a.smooth:focus
{
background-color: red;
}

11
 Specifying the property

transition-property

Values: property-name | all | none

Default: all
Applies to: all elements, :before and :after pseudo-elements
Inherits: no

Transition-property identifies the CSS property that we want to

transition smoothly. In our example, it’s the background-color.

12
 How long should it take?

transition-duration

Values: time
Default: 0s
Applies to: all elements, :before and :after pseudo-elements
Inherits: no

Transition-duration sets the amount of time it will take for the animation
to complete in seconds (s) or milliseconds (ms).

13
 Timing Functions

transition-timing-function

Values: ease | linear | ease-in | ease-out | ease-in-out

Default: ease
Applies to: all elements, :before and :after pseudo-elements
Inherits: no

14
 Timing Functions

The property and the duration form the foundation of a transition, but
you can refine it further. There are a number of ways a transition can
roll out over time. For example, it could start out fast then slow down,
start out slow and speed up, or it could stay the same speed all the
way through, just to name a few. You can set the transition-timing-
function to ease-in-out to make the link change from blue to red more
gently.

15
 Timing Functions

a.smooth {
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}

The transition-timing-functionproperty takes one of the following keyword

values:

16
 Timing Functions

ease - Starts slowly, accelerates quickly, then slows down at the end. This is
the default value and works just fine for most short transitions.

linear - Speed stays consistent from the transition’s beginning to end.

ease-in - Starts slowly, then speeds up.

ease-out - Starts out fast, then slows down.

ease-in-out - Starts slowly, speeds up, then slows down again at the very end.
It is similar to ease, but with less pronounced acceleration in the middle.
17
 Setting a delay

transition-delay

Values: time
Default: 0s
Applies to: all elements, :before and :after pseudo elements
Inherits: no

The transition-delay property, as you might guess, delays the start of

the animation by specified amount of time. In the following example,
the background color transition will start .2 seconds after the pointer
moves over the link. 18
 Setting a delay

a.smooth {
...
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0.2s;
}
If you were especially dastardly, you could make a button disappear
(opacity: 0;) after a person has held their finger or pointer down on it
(:active) for two seconds (transition-delay; 2s;) as shown in the
following example: 19
Setting a delay

20
 Setting a delay

a.smooth {
...
transition-property: opacity;
transition-duration: .05s;
transition-timing-function: ease-out;
transition-delay: 2s;
}
21
 Setting a delay

a.smooth:hover, a.smooth:focus {
background-color: red;
}
a.smooth:active {
opacity: 0;
}
Always include the non-prefixed version last for forward-compatibility
with supporting browsers of the future. This is how that blue-to-red link
transition we’ve been working on would be written out in the real world:

22
 CSS Animation

CSS allows animation of HTML elements without using JavaScript or Flash!

What are CSS Animations?

An animation lets an element gradually change from one style to another.You

can change as many CSS properties you want, as many times 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.

23
 The @keyframes Rule

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.

To get an animation to work, you must bind the animation to an element.

The following example binds the "example" animation to the <div> element.
The animation will last for 4 seconds, and it will gradually change the
background-color of the <div> element from "red" to "yellow".

24
Example

25
Example

26
Example

27
Example

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

28
Example

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}

29
Example

@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}

30
Example

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

#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

31
THANKS!
Any questions?

32