In this chapter, you will learn about transformations and transitions in CSS, which allow you to create visually appealing effects and animations on your web pages. By using the transform
and transition
properties, you can manipulate the appearance and behavior of elements on the page in various ways.
Understanding Transformations
Transformation refers to the process of changing the appearance of an element by altering its size, position, or shape. CSS provides several transformation functions that you can use to achieve these effects, including translate
, scale
, rotate
, and skew
.
/* Translate */
transform: translate(50px, 100px);
/* Scale */
transform: scale(1.5);
/* Rotate */
transform: rotate(45deg);
/* Skew */
transform: skew(30deg, 45deg);
You can also combine multiple transformation functions using the transform
property.
transform: translate(50px, 100px) rotate(45deg) scale(1.5);
Understanding Transitions
Transition refers to the process of smoothly changing the appearance of an element from one state to another. CSS provides the transition
property, which allows you to specify the duration, timing function, and property that the transition should apply to.
transition: all 0.5s ease-in-out;
In the above example, the transition
property applies to all properties, has a duration of 0.5 seconds, and uses an easing function called ease-in-out
.
You can also specify multiple transitions using the transition
property.
transition: background-color 0.5s ease-in-out,
color 0.2s linear;
Using Transformations and Transitions Together
You can use transformations and transitions together to create smooth and visually appealing animations on your web pages. For example, you can use the :hover
pseudo-class to specify different styles for an element when the mouse is over it, and then use the transition
property to smoothly animate the change.
/* Original styles */
div {
width: 100px;
height: 100px;
background-color: #0088cc;
}
/* Hover styles */
div:hover {
width: 200px;
height: 200px;
background-color: #ffffff;
transform: rotate(45deg);
}
/* Transition */
div {
transition: all 0.5s ease-in-out;
}
In the above example, when the mouse is over the div
element, it will smoothly expand in size, change its background color to white, and rotate 45 degrees.
Using Keyframes to Create Complex Animations
In addition to using transformations and transitions, you can also use keyframes to create more complex animations in CSS. Keyframes allow you to specify a series of styles that an element should animate through, and you can control the timing and duration of the animation using the animation
property.
@keyframes example {
0% {
background-color: #0088cc;
transform: rotate(0deg);
}
50% {
background-color: #ffffff;
transform: rotate off
100% {
background-color: #0088cc;
transform: rotate(360deg);
}
}
/* Apply animation to element */
div {
animation: example 5s linear infinite;
}
In the above example, the `@keyframes` rule defines an animation called “example” that changes the background color and rotation of an element over the course of 5 seconds. The `animation` property is then applied to the `div` element to play the animation.
Tips for Using Transformations and Transitions
- Use the `transform-origin` property to specify the origin point for transformations.
- Use the `backface-visibility` property to control whether or not an element is visible when it is rotated.
- Use the `transition-delay` property to specify a delay before a transition starts.
- Use the `animation-delay` property to specify a delay before an animation starts.
- Use the `animation-iteration-count` property to specify the number of times an animation should play.
Conclusion
Transformations and transitions are powerful tools for adding visual appeal and interactivity to your web pages. By using these properties and techniques, you can create smooth animations and effects that enhance the user experience.
Exercises
To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.
Write a CSS rule to apply a 2 second transition to the width
and height
properties of a div
element when the mouse is over it. Use the ease-out
timing function.
div {
transition: width 2s ease-out, height 2s ease-out;
}
div:hover {
width: 200px;
height: 200px;
}
Write a CSS rule to apply a 3 second rotation animation to a div
element that plays once and uses the ease-in-out
timing function.
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
div {
animation: rotate 3s ease-in-out 1;
}
Write a CSS rule to apply a 2 second scale transformation to a div
element when it is clicked, with a delay of 1 second before the transformation starts. Use the ease-in
timing function.
div {
transition: transform 2s ease-in 1s;
}
div:active {
transform: scale(1.5);
}
Write a CSS rule to apply a 3 second fade-in animation to a div
element when it is hovered over, with a delay of 1 second before the animation starts. Use the linear
timing function.
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
div {
animation: fade-in 3s linear 1s;
}
Write a CSS rule to apply a 4 second transition to the border-radius
property of a div
element when it is clicked, with a delay of 2 seconds before the transition starts. Use the ease-in-out
timing function.
div {
transition: border-radius 4s ease-in-out 2s;
}
div:active {
border-radius: 50%;
}