BASIC WEB DESIGNING 05/23/2019

Detailed Lesson Plan in Web Designing

(Basic Animation using CSS)

I. LEARNING OBJECTIVES
Performance Objective:
Upon completion of the lesson, students will understand the web basic animation using cascading style sheets
and learn how to create a dynamic webpage.
Specific Objectives:
 Students will understand how style sheets can enhance a web page.
 Students will understand the benefits of using style sheets.
 Students will be able to add transition and creativity to a web page

II. SUBJECT MATTER

A. Topic: “Basic Animation using CSS”
B. References: Mathematics for Everyday Life 4 Textbook
pp.224-227, Mastering Mathematics 4 Textbook
pp.214-215
https://thoughtbot.com/blog/css-animation-for-beginners
https://www.w3schools.com/css/css3_animations.asp

C. Materials:

III. INSTRUCTIONAL PROCEDURE

TEACHER’s ACTIVITY STUDENT’s ACTIVITY
Preparatory Activities
a. Prayer
b. Greetings
c. Checking of Attendance
1. Review
Before we start our lesson for today, let us review your past
We learned that web pages can be
lesson yesterday. What have you learned yesterday? animated even without the
technology of JavaScript.
What are the two states of CSS transitions?
Does the animation loop?
The two states of CSS transitions
2. Motivation are initial state and final state.
Well what if you want: No
 to have control over the intermediate states?
 to make an animation loop?
 different animations on the same element?
(Let the students ponder about the questions
 to animate a specific property only halfway through the
animation?
given to them)

CRISTINA NAZARENO 1
BASIC WEB DESIGNING 05/23/2019

 to simulate different timing functions for different

properties?

B. Developmental Activities
Presentation
 Define the following terms
 animation
 name
 duration
 timing-function (let the students think and absorb the
terms explained)
 delay
 iteration-count
 direction
 fill-mode
Discussion
 CSS animations are like mini movies where you are the
director giving out instructions (CSS rules) to your actors
(HTML elements) for different scenes (keyframes).
 Illustrate the different browser that supports web
animation according to their version.
 Present a sample animated web page using a projector.
 To animate a ball, you could write a bouncing animation:
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FF5722;
(let the students watch and learn the
animation: bounce 0.5s; simple coding through the sample activity)
animation-direction: alternate;
animation-timing-function: cubic-bezier(.5,0.05,1,.5);
animation-iteration-count: infinite;
}

@keyframes bounce {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, 200px, 0); }
}
/* Prefix Support */
ball {
-webkit-animation-name: bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(.5,0.05,1,.5);

CRISTINA NAZARENO 2
 BASIC WEB DESIGNING 05/23/2019

-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
from { -webkit-transform: translate3d(0, 0, 0); transform:
translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(0, 200px, 0); transform:
translate3d(0, 200px, 0); }
}
Individual Activity
 Present a sample output of a webpage with animation (Students do the activity)
 Ask the student to create simple animation code to
achieve a result similar to the presented output.

IV. EVALUATION
Direction: Encircle the letter of the correct answer in each of the given question.
1. Which one is the correct Property for giving time duration of the animation?
a) animation-time: 4s; c) duration: 4s;
b) animation-duration: 4s; d) none of the above
2. Which one is the correct syntax to support command in Chrome, Opera and Safari CSS3?
a) keyframes example c) webkit-keyframes example
b) @-webkit-keyframes example d) none of the above
3. What is the Standard syntax for animation in CSS3?
a) keyframes example c) @keyframes
b) @keyframes example d) none of the above
4. What Property I should write if I want to run my animation countless time?
a) animation-iteration:infinite; c) animation:infinite;
b) animation-iteration-count:infinite; d) none of the above
5. Which property can we use to bind the animation with an element?
a) animation-name c) animation-delay
b) animation d) none of the above

V. ASSIGNMENT
Create a sample web - based photo gallery that uses CSS animation.

Prepared by:

Mrs. Maria Cristina B. Nazareno

IT Instructor

CRISTINA NAZARENO 3
BASIC WEB DESIGNING 05/23/2019

CRISTINA NAZARENO 4