7

Technical Vocational
Livelihood
QUARTER

2 Computer Programming

Computer Programming (ICT) – Grade 11

TECHNICAL VOCATIONAL LIVELIHOOD
Quarter 2 – Module 3 CSS Transition and Animation First Edition, 2020

Republic Act 8293, section 176 states that: No copyright shall subsist in
any work of the Government of the Philippines. However, prior approval of the
government agency or office wherein the work is created shall be necessary for
exploitation of such work for profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand

names, trademarks, etc.) included in this module are owned by their respective
copyright holders. Every effort has been exerted to locate and seek permission to use
these materials from their respective copyright owners. The publisher and authors
do not represent nor claim ownership over them.

Published by the Department of Education Division of Pasig City

Development Team of the Module

Writer: Jenessy Joy T. Pinga
Editors: Ma. Lerma Cantanero
Reviewer: Rowena O. Dimagiba
Illustrator:
Layout Artist:
Management Team: Ma. Evalou Concepcion A. Agustin
Assistant Schools Division Superintendent
OIC-Schools Division Superintendent
Aurelio G. Alfonso, Ed. D.
OIC-Assistant Schools Division Superintendent
Victor M. Javena, Ed. D.
OIC – Chief Curriculum Implementation Division
Chef School Governance and Operation Division

Education Program Supervisor

Wilma Q. Del Rosario, LRMDS
Dr. Libranda L. Agon, Ed. D., EPP/TLE

Printed in the Philippines by ________________________

Department of Education – Division of Pasig City

Office Address: Caruncho Avenue, San Nicolas, Pasig City

Telefax: 641-88-85 / 682-2819
E-mail Address: [email protected]
 Computer
Programming

Quarter 2
Self Learning Module 3
CSS Transition and Animation
Writer: Jenessy Joy T. Pinga
Editors: Ma.Lerma I. Cantanero
Validator/ Reviewer: Rowena O. Dimagiba
Introductory Message

For the Facilitator:

Welcome to the Computer Programming for the ICT Module on CSS Transition and
Animation!

This module was collaboratively designed, developed and reviewed by educators from
Schools Division Office of Pasig City headed by its Officer-In-Charge Schools Division
Superintendent, Ma. Evalou Concepcion A. Agustin in partnership with the Local
Government of Pasig through its mayor, Honorable Victor Ma. Regis N. Sotto.
The writers utilized the standards set by the K to 12 Curriculum using the Most
Essential Learning Competencies (MELC) while overcoming their personal, social,
and economic constraints in schooling.
This learning material hopes to engage the learners into guided and independent
learning activities at their own pace and time. Further, this also aims to help learners
acquire the needed 21st century skills especially the 5 Cs namely: Communication,
Collaboration, Creativity, Critical Thinking and Character while taking into
consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of
the module:

Notes to the Teacher

This contains helpful tips or strategies that
will help you in guiding the learners.

As a facilitator you are expected to orient the learners on how to use this module.
You also need to keep track of the learners' progress while allowing them to manage
their own learning. Moreover, you are expected to encourage and assist the learners
as they do the tasks included in the module.
For the Learner:

Welcome to the Computer Programming for the ICT Module on CSS Transition and
Animation!

The hand is one of the most symbolized part of the human body. It is often used to
depict skill, action and purpose. Through our hands we may learn, create and
accomplish. Hence, the hand in this learning resource signifies that you as a learner
is capable and empowered to successfully achieve the relevant competencies and
skills at your own pace and time. Your academic success lies in your own hands!

This module was designed to provide you with fun and meaningful opportunities for
guided and independent learning at your own pace and time. You will be enabled to
process the contents of the learning material while being an active learner.

This module has the following parts and corresponding icons:

Expectation - These are what you will be able to know after

completing the lessons in the module

Pre-test - This will measure your prior knowledge and the

concepts to be mastered throughout the lesson.

Recap - This section will measure what learnings and skills

that you understand from the previous lesson.

Lesson- This section will discuss the topic for this module.

Activities - This is a set of activities you will perform.

Wrap Up- This section summarizes the concepts and

applications of the lessons.

Valuing-this part will check the integration of values in the

learning competency.

Post-test - This will measure how much you have learned from
the entire module. Ito po ang parts ng module.
 EXPECTATION

At the end of the module the learner is expected to:

1. understand CSS Transition and Animation.

2. perform and apply the use of CSS Transition and Animation when
designing webpage.
3. cite the importance of CSS Transition and Animation in designing
webpage.

PRE–TEST

Instruction: Select the letter that corresponds to the correct answer.

1. A value of transition-timing-function property that specifies a transition

effect with a slow start, then fast, then end slowly.
A. ease
B. linear
C. ease-in
D. ease-in-out

2. A value of transition-timing-function property that specifies a transition

effect with the same speed from start to end.
A. ease
B. linear
C. ease-in
D. ease-in-out

3. A value of transition-timing-function property that specifies a transition

effect with a slow start and end.
A. ease
B. linear
C. ease-in
D. ease-in-out

4. A value of animation-timing-function property that specifies an animation

with a slow end.
A. ease-out
B. linear
C. ease-in
D. ease-in-out
 5. A value of animation-timing-function property that specifies an animation
with a slow start and end
A. ease-out
B. linear
C. ease-in
D. ease-in-out

RECAP
Module 2 discussed CSS transform, now describe the following below on how
you understand the lesson.

• rotateX()
• rotateY()
• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

LESSON

CSS Transitions
Transitions allow you to change property values from one value to another,
over a given duration. To create a transition, you must specify at least two things,
the name of the CSS property to which you want to apply the transition effect using
the transition-property and the duration of the transition effect using the
transition-duration. Other transition properties are optional.

Below are the transition properties;

• transition – defines a shorthand property for setting all the four

transition properties into a single property.
• transition-delay - specifies when the transition will start.
• transition-duration - defines how many seconds or milliseconds a
transition effect takes to complete.
• transition-property – define the names of the CSS properties to which
a transition effect should be applied.
 • transition-timing-function – specifies how the intermediate values of
the CSS properties being affected by a transition will be calculated.

The transition-timing-function property can have the following values:

• ease - specifies a transition effect with a slow start, then fast, then
end slowly.
• 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.

Example1: (to see what happens try it with your PC)

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: yellow;
transition: width 2s;}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover {width: 400px;}
</style>
</head>
<body>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
</body>
</html>
</html>

Example2: using four properties (to see what happens try it with your PC)

div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
 transition-delay: 1s;
}

Or using shorthand property

div {
transition: width 2s linear 1s;
}
CSS Animations
An animation allows an element gradually change from one style to
another. To make an animation, you must first specify keyframes for the
animation. Keyframes hold what styles the element will have at the certain
times.

@keyframes

When you specify CSS styles inside the @keyframes, the animation
will gradually change from the current style to the new style at certain time.

@keyframes starts with a percentage (%) or the keywords from same as 0%

or to same as 100%. The selector is used to specify where a keyframe is
constructed along the duration of the animation.

@keyframes rule and animation properties

• @keyframes - specifies the animation code.

• animation – defines a shorthand property for setting all the animation
properties.
• animation-delay - specifies a delay for the start of an animation.
• animation-direction - specifies whether an animation should play in
reverse direction or alternate cycles.
• animation-duration - specifies how many seconds or milliseconds an
animation takes to complete one cycle.
• animation-fill-mode - specifies a style for the element when the
animation is not playing or when it is finished or when it has a delay.
• animation-iteration-count - specifies the number of times an
animation should be played.
• animation-name - specifies the name of the @keyframes animation.
• animation-play-state - specifies whether the animation is running or
paused.
• animation-timing-function - specifies how the animation will progress
over the duration of each cycle.

The animation-timing-function property can have the following values:

• ease - specifies an animation with a slow start, then fast, then end slowly.
• linear - specifies an animation with the same speed from start to end.
• ease-in - specifies an animation with a slow start.
• ease-out - specifies an animation with a slow end.
• ease-in-out - specifies an animation with a slow start and end.

Example1: (to see what happens try it with your PC)

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: yellow;
font-weight: bold;
position: relative;
animation: sample 10s infinite;
}
#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;}
@keyframes sample {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>

Example2: (to see what happens try it with your PC)

div {
animation-name: sample;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Or using shorthand property
div {
animation: sample 5s linear 1s infinite alternate;
}

ACTIVITIES

Complete the code below according to the given instructions.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: yellow;
animation-name: example;
animation-duration: 5s;
}
@keyframes sample {
}
</style>
</head>
<body>
<div></div>
</body>
</html> </html>

1. Add the following 5 steps to the animation "sample" (using 0%, 25%, 50%,
75%, and 100%):

• 0% - Set background color to "yellow", left position to "0px", top position

to: "0px"
• 25% - Set background color to "pink", left position to "0px", top position
to: "200px"
• 50% - Set background color to "black", left position to "200px", top
position to: "200px"
• 75% - Set background color to "blue", left position to "200px", top
position to: "0px"
• 100% - Set background color to "red", left position to "0px", top position
to: "0px"
 <!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: yellow;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

2. Using the transition shorthand property, specify width changes for the <div>
element should have: "5" second duration, transition effect with a slow start,
and a "1" second delay before starting.
3. Using four transition properties, specify width changes for the <div> element
should have: "5" second duration, transition effect with a slow start, and a "1"
second delay before starting.

*Answer the Worksheet number 2 and submit a soft copy/hard copy of your
completed activity to your subject teacher on the following meeting.

WRAP–UP

Instructions: Based on how you understood the lesson describe the

difference between CSS transition and CSS animation.

______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

VALUING

Instructions: Read and answer the following questions carefully in two to

three sentences each number.
1. What do think is the importance of using CSS transition and CSS
animation?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

2. How will you use the knowledge you acquired in this module?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

POST TEST

Instructions: Select the letter that corresponds to the correct answer.

1. A value of transition-timing-function property that specifies an animation

with a slow end.
A. ease-out
B. linear
C. ease-in
D. ease-in-out

2. A value of transition-timing-function property that specifies an animation

with a slow start and end
A. ease-out
B. linear
C. ease-in
D. ease-in-out

3. A value of animation-timing-function property that specifies a transition

effect with a slow start, then fast, then end slowly.
A. ease
B. linear
C. ease-in
D. ease-in-out

4. A value of animation-timing-function property that specifies a transition

effect with the same speed from start to end.
A. ease
B. linear
C. ease-in
D. ease-in-out
Accessed September 14, 2020 2:00pm https://www.tutorialrepublic.com •
Accessed September 14, 2020 1:00pm https://www.w3schools.com •
REFERENCES
Activity
1
0% {background-color: red; left:0px; top:0px;}
25% {background-color: blue; left:0px; top:200px;}
50% {background-color: green; left:200px; top:200px;}
75% {background-color: yellow; left:200px; top:0px;}
100% {background-color: red; left:0px; top:0px;}
2
transition: width 2s ease-in 1s;
3
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 1s;
Post-test: Pre-test:
1. C 1. A
2. D 2. B
3. A 3. C
4. B 4. D
5. D 5. A
KEY TO CORRECTION
D. ease-in-out
C. ease-in
B. linear
A. ease
effect with a slow start and end.
5. A value of animation-timing-function property that specifies a transition