CSS Transitions and Transforms

Introduction to CSS Transitions

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

Key Transition Properties:

transition-property: Specifies the name of the CSS property to which the transition is applied.
transition-duration: Specifies how many seconds or milliseconds a transition effect takes to complete.

Example: Button Color Change on Hover

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>

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

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.
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.

Translate:
- transform: translateX(50px); - Moves the element 50px to the right.
- transform: translateY(50px); - Moves the element 50px down.
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.
Rotate:
- transform: rotate(45deg); - Rotates the element 45 degrees.
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