 Resources from Christina Gorton in 2024

Whether you enjoy CSS animations or not, learning how to work with CSS transforms and transitions can help the overall user experience on your websites.

In this collection we will look at the various CSS properties that help create the kind of experience user have come to expect from websites. 

We will explore:
- The transform property
- The transition property


Cascading Style Sheets bring order and beauty to our applications.

Learn CSS Animations for a Better User Experience 

The transform property in CSS gives you the ability to transform elements in 2D or 3D. 
The most common transforms used to change elements are rotate, skew, translate, and scale.

In this video we will look at rotating elements.

When rotating an element you can rotate on both the X and Y axis or only the X or Y axis. 
You can also rotate positive or negative degrees.

Rotate Elements in 2D with the transform CSS Property

The transform property in CSS gives you the ability to transform elements in 2D or 3D. 
The most common transforms used to change elements are rotate, skew, translate, and scale.

In this video we will look at translate.

If you want to move an element on the web you use the translate property. 
This property moves an element left and right on the x-axis, up and down on the y-axis or both.

If you want to move an element up you use a negative number on the y-axis. 
This can be confusing when you are first beginning to animate on the web.

Translate Elements in 2D with the transform CSS Property

The transform property in CSS gives you the ability to transform elements in 2D or 3D. 
The most common transforms used to change elements are rotate, skew, translate, and scale.

In this video we will look at skew.

This property skews an element on the 2D plane.

There is a shorthand that uses either one value or two.

You can also write out specifically if you want to skew on the X or Y axis.

The skew property tilts the element either to the right or the left


Skew Elements in 2D with the transform CSS Property

Whereas transforms move or change the appearance of an element, transitions make the element smoothly and gradually change from one state to another.

Without the transition property changing an elements state is immediate and jumpy. 

The transition property is a shorthand property used to represent up to four transition-related longhand properties

- transition-property
- transition-duration
- transition-timing-function
- transition-delay

Change Elements Smoothly and Gradually with the CSS Transition Property

In this lesson we are going to look at what you can do with scale. We will look at how to scale elements on the X axis, on the Y axis and what happens if you scale on both. 

Topics

Instructors

Content Type

Christina Gorton

Learn CSS Animations for a Better User Experience

Rotate Elements in 2D with the transform CSS Property

Translate Elements in 2D with the transform CSS Property

Skew Elements in 2D with the transform CSS Property

Change Elements Smoothly and Gradually with the CSS Transition Property

Transform and Scale Elements in 2D Space with the transform CSS Property