CSS Transforms and Transitions

CSS Transforms - Changing How Elements Look

CSS transforms allow you to change the appearance and position of elements without affecting the document flow. You can rotate, scale, skew, and translate elements smoothly and efficiently.

1. translate (Move an Element)

Move an element from its current position:

.box {
    transform: translate(50px, 100px);  /* Move right 50px, down 100px */
}

/* Move only horizontally */
.box { transform: translateX(50px); }

/* Move only vertically */
.box { transform: translateY(100px); }

Practical Use: Creating hover effects, animations, positioning without affecting layout

2. scale (Resize an Element)

Make an element larger or smaller:

.box {
    transform: scale(1.5);      /* 150% of original size */
    transform: scale(0.8);      /* 80% of original size */
}

/* Scale differently in each direction */
.box {
    transform: scaleX(1.5);     /* 150% wider */
    transform: scaleY(0.8);     /* 80% tall */
}

Practical Use: Hover effects on buttons and images, zoom in/out effects

3. rotate (Spin an Element)

Rotate an element around its center:

.box {
    transform: rotate(45deg);   /* Rotate 45 degrees clockwise */
}

/* Rotate in specific directions */
.box {
    transform: rotateX(45deg);  /* Rotate around X-axis (3D effect) */
    transform: rotateY(45deg);  /* Rotate around Y-axis (3D effect) */
    transform: rotateZ(45deg);  /* Same as rotate() */
}

Practical Use: Rotating icons, creating loading spinners, 3D flip effects

4. skew (Slant an Element)

Skew an element to make it appear slanted:

.box {
    transform: skew(20deg, 10deg);  /* Skew X 20deg, Y 10deg */
    transform: skewX(20deg);        /* Skew horizontally */
    transform: skewY(10deg);        /* Skew vertically */
}

Note: Skew is rarely used in modern design

Combining Transforms

Use multiple transforms together:

.box {
    transform: translate(50px, 100px) scale(1.5) rotate(45deg);
}

transform-origin (Change Rotation Point)

By default, transforms use the center. Change this with transform-origin:

.box {
    transform-origin: top left;     /* Rotate from top-left corner */
    transform: rotate(45deg);
}

.box {
    transform-origin: 0 0;          /* Same as top left */
    transform: rotate(45deg);
}

CSS Transitions - Smooth Animations

Transitions smoothly animate CSS property changes over time:

.box {
    width: 100px;
    background-color: blue;
    transition: width 0.3s ease, background-color 0.3s ease;  /* Smooth changes */
}

.box:hover {
    width: 200px;
    background-color: red;  /* Smoothly changes over 0.3 seconds */
}

Transition Properties

transition-property (What to Animate)

transition-property: width;     /* Animate width */
transition-property: all;       /* Animate all properties (common) */
transition-property: width, height, background-color;  /* Multiple properties */

transition-duration (How Long)

transition-duration: 0.3s;      /* 300 milliseconds */
transition-duration: 1s;        /* 1 second */
transition-duration: 0.5s, 1s;  /* Different times for different properties */

transition-timing-function (Animation Curve)

transition-timing-function: ease;         /* Start slow, speed up, slow down */
transition-timing-function: ease-in;      /* Start slow, speed up */
transition-timing-function: ease-out;     /* Start fast, slow down (common) */
transition-timing-function: ease-in-out;  /* Smooth both ends */
transition-timing-function: linear;       /* Constant speed */

Shorthand

/* property duration timing-function delay */
transition: all 0.3s ease;
transition: width 0.5s ease-out 0.1s;  /* 0.1s delay before animation starts */

Real-World Example 1: Button Hover Effect

<button class="button">Click Me</button>

<style>
.button {
    padding: 12px 24px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;  /* Smooth transition for all properties */
}

.button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);  /* Move up slightly */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button:active {
    transform: translateY(0);  /* Return to original position */
}
</style>

Real-World Example 2: Image Zoom on Hover

<img src="photo.jpg" class="hover-zoom" alt="Photo">

<style>
.hover-zoom {
    transition: transform 0.3s ease;
}

.hover-zoom:hover {
    transform: scale(1.1);  /* Zoom 10% */
}
</style>

Real-World Example 3: Card Lift Effect

<div class="card">
    <h3>Card Title</h3>
    <p>Card content here...</p>
</div>

<style>
.card {
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);  /* Move up */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);  /* Add shadow */
}
</style>

Real-World Example 4: Loading Spinner

<div class="spinner"></div>

<style>
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f0f0f0;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

CSS Animations (@keyframes)

For more complex animations, use @keyframes to define animation sequences:

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.element {
    animation: fade-in 0.5s ease;
}

Animation Properties

.element {
    animation-name: fade-in;              /* Which @keyframes to use */
    animation-duration: 0.5s;             /* How long */
    animation-timing-function: ease;     /* Animation curve */
    animation-delay: 0.2s;                /* Delay before starting */
    animation-iteration-count: infinite;  /* How many times (or number) */
    animation-direction: normal;          /* Or reverse, alternate */
}

Real-World Example 5: Pulse Animation

<div class="pulse">Notify Me</div>

<style>
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

.pulse {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    animation: pulse 2s infinite;
}
</style>

Performance Tips

• Animate transform and opacity: These are GPU-accelerated (smooth)
• Avoid animating: Width, height, position (these are slow)
• Use will-change sparingly: Only when needed for performance
• Keep animations short: 0.2s-0.5s for interactions, 0.5s-1s for attention

Common Animation Patterns

Fade In

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

Slide In

@keyframes slide-in {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

Scale Up

@keyframes scale-up {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

Bounce

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

Summary

You now understand:

• Transform functions: translate, scale, rotate, skew
• Combining transforms for complex effects
• Transitions for smooth property changes
• Animation timing functions and curves
• @keyframes for complex animations
• Real-world patterns: hover effects, spinners, pulses, fades

Transforms and transitions bring websites to life with smooth, professional animations. Combined with Flexbox and Grid, you now have all the core CSS skills needed for modern web design.