Muhammad Sufiyan's Blog

CSS Transitions and Transforms

Muhammad Sufiyan's photo
Muhammad Sufiyan
·

3 min read

Introduction to CSS Transitions

CSS transitions allow you to change property values smoothly (over a given duration) instead of instantly.

Key Transition Properties:

  1. transition-property: Specifies the name of the CSS property to which the transition is applied.

  2. transition-duration: Specifies how many seconds or milliseconds a transition effect takes to complete.

Example: Button Color Change on Hover

  1. HTML:

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CSS Transitions and Transforms</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <button class="transition-button">Hover me!</button>
     <div class="transition-boxes">
         <div class="box ease">Ease</div>
         <div class="box linear">Linear</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>
 </html>

  2. CSS (styles.css):

     body {
     font-family: Arial, sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
     padding: 50px;
 }

 .transition-button {
     padding: 10px 20px;
     font-size: 16px;
     background-color: #008cba;
     color: white;
     border: none;
     cursor: pointer;
     transition-property: background-color;
     transition-duration: 3000ms; /* 3 seconds */
     transition-delay: 1000ms; /* 1 second */
 }

 .transition-button:hover {
     background-color: #005f5f;
 }

 .transition-boxes {
     display: flex;
     gap: 20px;
 }

 .box {
     width: 50px;
     height: 50px;
     background-color: #3498db;
     transition: transform 2s;
 }

 .box:hover {
     transform: translateX(100px);
 }

 .ease { transition-timing-function: ease; }
 .linear { transition-timing-function: linear; }
 .ease-in { transition-timing-function: ease-in; }
 .ease-out { transition-timing-function: ease-out; }
 .ease-in-out { transition-timing-function: ease-in-out; }

Transition Options

  1. transition-timing-function: Specifies the speed curve of the transition.

    • ease: Default value. Slow start, then fast, then slow end.

    • linear: Same speed from start to end.

    • ease-in: Slow start.

    • ease-out: Slow end.

    • ease-in-out: Slow start and end.

  2. transition-delay: Specifies a delay (in seconds or milliseconds) for the start of the transition.

Transition Shorthand Property

You can combine multiple transition properties into a shorthand property:

/* property duration timing-function delay */
transition: background-color 3000ms ease-in 1000ms;

CSS Properties That Can Be Transitioned

Not all CSS properties can be transitioned. Commonly transitioned properties include:

  • background-color

  • color

  • height

  • width

  • opacity

  • transform

  • margin

  • padding

CSS Transforms

Transforms allow you to modify the coordinate space of the CSS visual formatting model. You can translate, rotate, scale, and skew elements.

  1. Translate:

    • transform: translateX(50px); - Moves the element 50px to the right.

    • transform: translateY(50px); - Moves the element 50px down.

  2. Scale:

    • transform: scaleX(1.5); - Scales the element's width by 1.5.

    • transform: scaleY(1.5); - Scales the element's height by 1.5.

  3. Rotate:

    • transform: rotate(45deg); - Rotates the element 45 degrees.

  4. Skew:

    • transform: skewX(20deg); - Skews the element 20 degrees along the X-axis.

    • transform: skewY(20deg); - Skews the element 20 degrees along the Y-axis.

Example: Button Color Change on Hover with Delay

  1. HTML:

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CSS Transitions and Transforms</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <button class="transition-button">Hover me!</button>
 </body>
 </html>

  2. CSS (styles.css):

     .transition-button {
     padding: 10px 20px;
     font-size: 16px;
     background-color: #008cba;
     color: white;
     border: none;
     cursor: pointer;
     transition-property: background-color;
     transition-duration: 3000ms; /* 3 seconds */
     transition-delay: 1000ms; /* 1 second */
 }

 .transition-button:hover {
     background-color: #005f5f;
 }

CSS Transform: 3D Transformations

  1. translateZ:

     transform: translateZ(50px);

  2. rotateX and rotateY:

     transform: perspective(500px) rotateX(45deg);
 transform: perspective(500px) rotateY(45deg);

Summary

  • CSS Transitions: Smoothly animate changes to properties.

  • CSS Transforms: Modify the coordinate space for elements.

  • Key Properties: transition-property, transition-duration, transition-timing-function, transition-delay.

  • Transform Functions: translateX, translateY, scaleX, scaleY, rotate, skewX, skewY, translateZ, rotateX, rotateY.

This guide provides an overview of CSS transitions and transforms, with examples and explanations to help you understand and implement these concepts in your projects.

HTML5CSStransitionanimation