Create CSS3 Transitions with Timing Functions

Introduction

In this lab, participants will explore the powerful world of CSS3 transitions, learning how to create smooth and dynamic visual effects using timing functions and transition properties. The lab provides a comprehensive, hands-on approach to understanding how to implement and manipulate CSS transitions, starting from setting up a basic HTML and CSS project to experimenting with advanced transition animations.

Participants will begin by creating a project structure with HTML and CSS files, then progressively learn to apply hover effects, understand transition syntax, and explore various timing functions. Through practical exercises, learners will gain skills in controlling element transformations, creating interactive user interfaces, and adding sophisticated visual interactions to web designs using CSS3 transition techniques.

Set Up HTML Project and Basic Styling

In this step, you'll set up a basic HTML and CSS project to explore CSS3 transitions. We'll create a simple project structure and add some initial styling to prepare for our transition effects.

First, navigate to the project directory:

cd ~/project

Create a new directory for our CSS transitions project:

mkdir css-transitions
cd css-transitions

Now, let's create the project files using the WebIDE. Create an index.html file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS3 Transitions</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="box">Hover Me</div>
    </div>
  </body>
</html>

Next, create a styles.css file with some basic styling:

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.container {
  text-align: center;
}

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
}

Let's verify the files have been created correctly:

ls

Example output:

index.html  styles.css

This setup provides a basic foundation for our CSS transitions project. We've created a simple HTML structure with a div that we'll use to demonstrate various transition effects. The CSS provides some initial styling to make our element visually appealing and centered on the page.

Implement Basic Transition on Hover Effect

In this step, you'll learn how to create a basic CSS transition effect when hovering over an element. CSS transitions allow you to smoothly change property values over a specified duration.

Open the styles.css file in the WebIDE and modify the .box class to add a hover transition:

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;

  /* Add transition property */
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: #2980b9;
}

Let's break down the transition properties:

transition: background-color 0.5s ease;
- background-color: The property to transition
- 0.5s: Duration of the transition (half a second)
- ease: Timing function (smooth start and end)

Now, let's add a scale transition to make the effect more interesting:

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;

  /* Multiple transition properties */
  transition:
    background-color 0.5s ease,
    transform 0.3s ease;
}

.box:hover {
  background-color: #2980b9;
  transform: scale(1.1);
}

Save the file and open index.html in a web browser. When you hover over the box, you'll see:

The background color smoothly changes
The box slightly increases in size
The transition happens smoothly over the specified duration

Example of what you'll see:

Before hover: Blue box with normal size
On hover: Slightly darker blue, slightly larger box
Transition is smooth and gradual

Explore Transition Properties and Syntax

In this step, you'll dive deeper into CSS transition properties and learn about the full syntax for creating more complex and precise transitions.

Update the styles.css file to explore different transition properties:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;

  /* Full transition syntax */
  transition-property: background-color, transform, border-radius;
  transition-duration: 0.5s, 0.3s, 0.4s;
  transition-timing-function: ease-in-out, linear, ease;
  transition-delay: 0s, 0.1s, 0s;
}

.box:hover {
  background-color: #2980b9;
  transform: scale(1.2) rotate(15deg);
  border-radius: 50%;
}

Let's break down the transition properties:

transition-property: Specifies which CSS properties to transition
- Can be multiple properties separated by commas
- all can be used to transition all changeable properties
transition-duration: Sets the time the transition will take
- Can have different durations for different properties
- Specified in seconds (s) or milliseconds (ms)
transition-timing-function: Controls the speed curve of the transition
- linear: Constant speed
- ease-in: Starts slow, accelerates
- ease-out: Starts fast, decelerates
- ease-in-out: Slow start and end
transition-delay: Adds a delay before the transition starts
- Useful for creating sequential or staggered effects

Alternatively, you can use the shorthand transition property:

.box {
  transition:
    background-color 0.5s ease-in-out,
    transform 0.3s linear 0.1s,
    border-radius 0.4s ease;
}

Update the index.html to include multiple boxes for demonstration:

<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>

When you hover over the boxes, you'll see:

Different transition properties
Varied timing and delays
Multiple transformations happening simultaneously

Experiment with Different Timing Functions

In this step, you'll explore various CSS timing functions that control the speed and acceleration of transitions. Timing functions define how intermediate values are calculated during a transition.

Update the index.html to include multiple boxes for demonstrating different timing functions:

<body>
  <div class="container">
    <div class="box linear">Linear</div>
    <div class="box ease">Ease</div>
    <div class="box ease-in">Ease In</div>
    <div class="box ease-out">Ease Out</div>
    <div class="box ease-in-out">Ease In-Out</div>
  </div>
</body>

Modify the styles.css to showcase different timing functions:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
  flex-wrap: wrap;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* Linear Timing Function */
.linear {
  transition: transform 2s linear;
}
.linear:hover {
  transform: translateX(200px);
}

/* Ease (default) Timing Function */
.ease {
  transition: transform 2s ease;
}
.ease:hover {
  transform: translateX(200px);
}

/* Ease-In Timing Function */
.ease-in {
  transition: transform 2s ease-in;
}
.ease-in:hover {
  transform: translateX(200px);
}

/* Ease-Out Timing Function */
.ease-out {
  transition: transform 2s ease-out;
}
.ease-out:hover {
  transform: translateX(200px);
}

/* Ease-In-Out Timing Function */
.ease-in-out {
  transition: transform 2s ease-in-out;
}
.ease-in-out:hover {
  transform: translateX(200px);
}

Timing Function Characteristics:

linear: Constant speed from start to end
ease: Slow start, fast middle, slow end (default)
ease-in: Starts slowly, accelerates towards the end
ease-out: Starts quickly, decelerates towards the end
ease-in-out: Slow start and end, faster in the middle

You can also use custom cubic-bezier functions for more precise control:

.custom-timing {
  transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

When you hover over each box, you'll observe different movement patterns based on their timing functions.

Create Advanced Transition Animation

In this step, you'll create a more complex transition animation that combines multiple properties and demonstrates advanced CSS transition techniques.

Update the index.html to include a more interactive element:

<body>
  <div class="container">
    <div class="card">
      <div class="card-front">Hover Me</div>
      <div class="card-back">Advanced Transition!</div>
    </div>
  </div>
</body>

Modify the styles.css to create a flipping card with advanced transitions:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.card {
  width: 300px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  transition:
    transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 0.5s ease,
    box-shadow 0.5s ease;
}

.card-front {
  background-color: #3498db;
  color: white;
  transform: rotateY(0deg);
}

.card-back {
  background-color: #2ecc71;
  color: white;
  transform: rotateY(180deg);
}

.card:hover .card-front {
  transform: rotateY(180deg);
  background-color: #2980b9;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card:hover .card-back {
  transform: rotateY(0deg);
  background-color: #27ae60;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

Key Advanced Transition Techniques:

3D Rotation using rotateY
perspective for 3D effect
backface-visibility to hide back of elements
Multiple transitioning properties
Custom cubic-bezier timing function
Hover state transformations
Color and shadow transitions

The animation demonstrates:

Smooth 3D card flip
Color change on hover
Shadow effect
Complex timing and multiple property transitions

When you hover over the card:

Front side rotates and changes color
Back side becomes visible
Smooth, multi-property transition

Summary

In this lab, participants learn how to create dynamic CSS3 transitions by building a comprehensive web project focused on interactive design techniques. The lab begins with setting up a structured HTML and CSS environment, creating a foundational project with a centered div element styled with basic properties like background color, border radius, and flexbox layout.

The learning journey progresses through implementing hover effects, exploring transition properties and syntax, and experimenting with various timing functions to create smooth, engaging animations. By systematically developing a CSS transitions project, participants gain practical skills in manipulating element properties, understanding transition mechanics, and crafting visually appealing web interactions that enhance user experience through subtle, responsive design techniques.