Day 12: CSS Transforms, Transitions, and Animations

Welcome to Day 12 of our CSS journey! Today, we're going to take a deep dive into CSS transforms, transitions, and animations. These concepts are essential to creating visually dynamic, engaging, and interactive websites.

1. CSS Transforms

The CSS transform property allows you to modify the appearance of an element without affecting its surrounding elements. You can scale, rotate, translate, or skew elements, changing their visual representation.

Transform Functions:

1. translate(x, y):

   • Moves an element from its original position. The first value moves it along the X-axis, and the second along the Y-axis.

    .move {
        transform: translate(50px, 100px);
    }

This moves the element 50px to the right and 100px down from its original position.

2. scale(x, y):

   • Scales an element by the specified factor. The values determine how much to scale it on the X and Y axes.

   .scale {
       transform: scale(1.5, 1.5);
   }
   

   This increases the size of the element by 1.5 times.

3. rotate(deg):

   • Rotates an element by the specified degrees.

    `.rotate {
        transform: rotate(45deg);
    }`

The element is rotated by 45 degrees clockwise.

4. skew(x, y):

   • Skews the element along the X and Y axes. Positive values tilt it clockwise, and negative values tilt it counterclockwise.

    .skew {
        transform: skew(20deg, 10deg);
    }`

The element is skewed by 20 degrees horizontally and 10 degrees vertically.

Multiple Transforms:

You can apply multiple transform functions to an element in one statement:

.box {
    transform: translate(20px, 30px) rotate(45deg) scale(1.2);
}

This translates, rotates, and scales the element in one go.

2. CSS Transitions

The transition property allows you to make CSS changes smoothly over time, creating animations between two states (e.g., changing the background color or size of an element).

Basic Syntax:

.element {
    transition: property duration timing-function delay;
}

Example:

Let's create a hover effect where an element changes its background color and width when the mouse moves over it:

.box {
    width: 100px;
    background-color: blue;
    transition: width 0.5s ease, background-color 1s ease;
}

.box:hover {
    width: 200px;
    background-color: green;
}

Here, the element transitions from blue to green over 1 second, and the width increases from 100px to 200px over 0.5 seconds.

Transition Properties:

• transition-property: Specifies the property to apply the transition (e.g., background-color, width).

• transition-duration: Specifies how long the transition takes (e.g., 0.5s).

• transition-timing-function: Defines the speed curve (e.g., ease, linear, ease-in, ease-out).

• transition-delay: Specifies the delay before the transition starts (e.g., 1s).

• ---

3. CSS Animations

Animations allow you to create complex, keyframe-based animations where you can define multiple steps. This goes beyond simple state transitions.

Basic Syntax:

@keyframes animation-name {
    0% { /* Initial state */ }
    100% { /* Final state */ }
}

Example:

Let's animate an element to move across the screen and change color:

@keyframes moveAndChangeColor {
    0% {
        transform: translateX(0px);
        background-color: red;
    }
    50% {
        transform: translateX(150px);
        background-color: yellow;
    }
    100% {
        transform: translateX(300px);
        background-color: green;
    }
}

.element {
    animation: moveAndChangeColor 2s ease-in-out infinite;
}

This will move the element from left to right while changing its color from red to yellow to green over 2 seconds. The infinite value makes the animation repeat forever.

Animation Properties:

• animation-name: Specifies the name of the keyframe to be used.
• animation-duration: Specifies how long the animation takes (e.g., 2s).
• animation-timing-function: Defines the speed curve (e.g., ease-in-out).
• animation-iteration-count: Specifies how many times the animation will run (e.g., infinite).

Assignment 12

Create a profile card that utilizes transform and transition properties. The card should rotate slightly and scale up when hovered. Additionally, the background color should animate from one color to another.