Computer ScienceChapter 3: Programming Fundamentals

3.2.3 Animations in CSS

CSS Animation

Introduction

We can easily change the appearance and movement of elements on a webpage via CSS animation, like rotating objects or changing color. The animation involves creating a number of keyframes that specify the item's styles at different intermediate moments and sequence in the animation. An element's style during animation is specified by the `@keyframes`.

Definition

CSS Animation is a technique that allows elements on a web page to gradually change from one style to another over a specified duration. It uses `@keyframes` to define the intermediate steps (keyframes) of the animation.

Main Idea

To create a CSS animation:

Define the animation using `@keyframes`.
Apply the animation to an element using the `animation` property.

The animation can change properties like position, size, color, rotation, and opacity.

Core Concept

The `@keyframes` Rule

The `@keyframes` rule defines the animation. Inside it, you specify what the element should look like at different points in the animation.

To represent each keyframe's location in the animation timeline, a percentage value (ranging from `0%` to `100%`) is provided.

Syntax:

```css @keyframes animationName { from { /* starting styles */ } to { /* ending styles */ } } ```

```css @keyframes animationName { 0% { /* starting styles */ } 50% { /* middle styles */ } 100% { /* ending styles */ } } ```

The `animation` Property

The `animation` property applies the animation to an element. It can take several values:

Value	Meaning
`animation-name`	Name of the `@keyframes`
`animation-duration`	How long the animation takes (e.g., 2s)
`animation-timing-function`	Speed curve (e.g., linear, ease-in-out)
`animation-delay`	Delay before animation starts
`animation-iteration-count`	How many times to repeat (e.g., infinite)
`animation-direction`	Direction (normal, reverse, alternate)

Shorthand:

```css animation: name duration timing-function delay iteration-count direction; ```

Detailed Explanation

Example: Spinning a Red Box

In the following code, we create a basic CSS animation by spinning a red box repeatedly.

```html <!DOCTYPE html> <html lang="en"> <head> <title>Simple Animation</title> <style> #animated-box { margin-top: 50px; margin-left: 50px; width: 100px; height: 100px; background-color: red; animation: spin 2s infinite linear; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div id="animated-box"></div> </body> </html> ```

Explanation:

The `<div>` tag on line 22 acts as a container that groups and styles other components as a single unit. It is a useful method for structuring components on websites in a logical manner. It is used for layout purposes.
Formatting the elements of HTML is defined using the `<style>` tag. The `<head>` portion of a web page can contain the `<style>` tag, and the matching page elements receive the styles specified in it.
`animation: spin 2s infinite linear;` applies the `spin` animation for 2 seconds, repeating infinitely, with a linear speed curve.
`@keyframes spin` defines the animation:
`from { transform: rotate(0deg); }` — starting at 0 degrees.
`to { transform: rotate(360deg); }` — ending at 360 degrees (full circle).

Example: Highlighting a Footnote

Now, let us add the animation style in the Doctor's appointment table in the form of a footnote.

```html <!DOCTYPE html> <html lang="en"> <head> <title>Doctor's Visit Appointments</title> <style> table { border: 2px solid lightgray; border-collapse: collapse; } th, td { padding: 10px; text-align: left; } th { background-color: lightblue; color: white; } tr:nth-child(odd) { background-color: gray; }

#footnote { font-size: 12px; animation: highlight 2s ease-in-out alternate infinite; }

@keyframes highlight { from { background-color: transparent; } to { background-color: yellow; } } </style> </head> <body> <h1>Doctor's Visit Appointments</h1> <table> <caption>List of upcoming appointments</caption> <thead> <tr> <th>Patient Name</th> <th>Date</th> <th>Time</th> <th>Doctor</th> <th>Reason for Visit</th> </tr> </thead> <tbody> <tr> <td>Adil</td> <td>2024-05-10</td> <td>10:00 AM</td> <td>Dr. Shams</td> <td>Follow-up</td> </tr> <tr> <td>Zaki</td> <td>2024-05-15</td> <td>2:00 PM</td> <td>Dr. Qamar</td> <td>Check-up</td> </tr> </tbody> <tfoot> <tr> <td colspan="5" id="footnote">The appointments may be subject to change.</td> </tr> </tfoot> </table> </body> </html> ```

Explanation:

The footnote at the bottom of the table is highlighted.
`@keyframes highlight` changes the footnote's background color from transparent to yellow and back.
`animation: highlight 2s ease-in-out alternate infinite;`:
0 = name of the animation.
0 = duration.
0 = timing function.
`alternate` = plays forward then backward.
0 = repeats forever.
A single table cell with the ID "footnote" spans over all the columns using `colspan="5"`.
Such highlighted footnotes are quite useful for projecting important information.

Intermediate Level

At the intermediate level, you should understand the different animation properties.

Property	Description	Example
`animation-name`	Name of the `@keyframes`	`spin`
`animation-duration`	How long the animation takes	`2s`
`animation-timing-function`	Speed curve	`linear`, `ease-in-out`
`animation-delay`	Delay before start	`1s`
`animation-iteration-count`	Number of repetitions	`infinite`, `3`
`animation-direction`	Direction of playback	`normal`, `reverse`, `alternate`
`animation-fill-mode`	Styles before/after animation	`forwards`, `backwards`

Shorthand: ```css animation: spin 2s infinite linear; ```

Name: `spin`
Duration: `2s`
Iteration: `infinite`
Timing: `linear`

Important Points

- CSS animations change element styles over time.
- `@keyframes` defines the animation.
- `animation` property applies the animation.
- Keyframes use percentages (0% to 100%) or `from`/`to`.
- Common properties: name, duration, timing-function, iteration-count, direction.
- `transform` is commonly used for rotation, scaling, and movement.
- `alternate` plays the animation forward and backward.
- `infinite` repeats the animation forever.

Remember

- 0 = defines animation.
- 0 = applies animation.
- 0 = 0%, 1 = 100%.
- 0 = rotation.
- 0 = repeat forever.
- 0 = forward and backward.
- 0 = constant speed.
- 0 = slow start and end.

Common Mistakes

- Forgetting to define `@keyframes` before using it.
- Missing the animation name in the `animation` property.
- Forgetting units (e.g., `2s` instead of `2`).
- Using the wrong property name (e.g., `animation-name` vs `animation`).
- Forgetting that `from` and `to` are equivalent to `0%` and `100%`.
- Not using `transform` for rotation (using `rotate` alone will not work).
- Expecting animations to work without the `animation` property.

Quick Revision

CSS animations change styles over time.
`@keyframes` defines the animation.
`animation` property applies it.
Keyframes: `from` (0%) and `to` (100%).
Common properties: name, duration, timing, iteration, direction.
0 = full spin.
0 = repeats forever.
0 = forward and backward.

60-Second Revision

CSS animation = change styles over time.
0 = define animation.
0 = apply animation.
0 = 0%, 1 = 100%.
0 = spin.
`infinite` = forever; `alternate` = back and forth.
Warning: Don't forget to define `@keyframes` before using it in the `animation` property.

Did you understand this topic?

Your answer is saved with your learning record. It does not mark the topic as mastered.

Quick revision

Revision Zone

Review the key facts, formulas and checks before you move on.