1 of 10

CSS Transitions & Animations

1

We use tech to connect human potential and opportunity with dignity & humility

2 of 10

Today’s objectives

Introduction to animations with CSS
CSS Transitions
CSS Animations
Work on Final Project

2

Browsers load HTML elements with default position values. This often leads to an unexpected and unwanted user experience while limiting the views you can create. In this lesson, you will learn about the box model, an important concept to understand how elements are positioned and displayed on a website.

If you have used HTML and CSS, you have unknowingly seen aspects of the box model. For example, if you have set the background color of an element, you may have noticed that the color was applied not only to the area directly behind the element but also to the area to the right of the element. Also, if you have aligned text, you know it is aligned relative to something. What is that something?

All elements on a web page are interpreted by the browser as “living” inside of a box. This is what is meant by the box model.

For example, when you change the background color of an element, you change the background color of its entire box.

In this lesson, you’ll learn about the following aspects of the box model:

The dimensions of an element’s box.
The borders of an element’s box.
The paddings of an element’s box.
The margins of an element’s box.

3 of 10

Introduction to animations with CSS

3

Animations are the illusion of movement of e.g. objects.
On website can be used to draw user’s attention, oftentimes showing that a button is clickable or a loading animation
Examples

4 of 10

Introduction to animations with CSS

4

2 common types for animations:

CSS Transitions → usually used, when a user interacts with an element�
CSS Animations → no need for user-interaction and more fine-grained animations possible

5 of 10

CSS Transitions

5

Transitions are typically applied when a user interacts with an element (e.g when a user hovers or clicks on an element)

To create a transition effect, you must specify:

Add the transition CSS property to the element you want to add an effect to
which CSS property should be added a transition effect to
the duration of the effect
The change of the specified CSS property on user interaction (e.g. hover)

div {

transition: background-color 0.5s ease;

background-color: red;

}

div:hover {

background-color: green;

}

EXAMPLE

6 of 10

CSS Transitions

6

EXERCISE

7 of 10

CSS Animations

7

Animations can start directly on load of the page, but can also be triggered on interaction of the user.

CSS Animations can have more control than CSS Transitions in the steps until the end of the animation and can run indefinitely.

To create an animation effect, you must specify:

The animation-name and steps with the @keyframes syntax
Apply the created animation to a specific CSS selector with animation-name
Set the duration of the animation

.element {

height: 200px;

/* animation-name must match @keyframes value */

animation-name: pulse;

animation-duration: 5s;

animation-iteration-count: infinite;

}

/* @keyframes <animation-name> with <percentage> steps */

@keyframes pulse {

0% {

background-color: hotpink;

}

50% {

background-color: yellow;

}

100% {

background-color: hotpink;

}

EXAMPLE

8 of 10

Note

8

Should not be overused, but can be powerful if used in correct places

9 of 10

CSS Animations

9

EXERCISE

10 of 10

Work on final project

10