CSS Practice: Transformations, Transitions, and Animations

Transformations

Try adding different transformations to the box below:

Suggested transformations: scale, rotate, skew, translate, rotate3d, translate3, transform-style, perspective, perspective-origin.

/* Example:
.transform-box:hover {
    transform: scale(1.5) rotate(45deg) skew(20deg);
    perspective: 500px;
    perspective-origin: left top;
}
*/
    

Transitions

Try adding different transition properties to the box below:

Suggested properties: transition-property, transition-duration, transition-delay, transition-timing-function (linear, ease, ease-in, ease-out, ease-in-out).

/* Example:
.transition-box:hover {
    width: 200px;
    background-color: coral;
    transition-property: width, background-color;
    transition-duration: 2s;
    transition-delay: 0.5s;
    transition-timing-function: ease-in-out;
}
*/
    

Animations

Try creating animations for the box below:

Suggested properties: keyframes, animation-name, animation-duration, animation-iteration-count, animation-direction, animation-fill-mode.

/* Example:
@keyframes exampleAnimation {
    0% {transform: translateX(0);}
    50% {transform: translateX(100px);}
    100% {transform: translateX(0);}
}

.animation-box {
    animation-name: exampleAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
*/
    

Combining Transformations, Transitions, and Animations

Try combining transformations, transitions, and animations for the box below:

/* Example:
.combined-box:hover {
    transform: rotate(360deg);
    transition: transform 2s ease-in-out;
}

@keyframes combinedAnimation {
    0% {background-color: red;}
    50% {background-color: yellow;}
    100% {background-color: green;}
}

.combined-box {
    animation-name: combinedAnimation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
*/
    

Modify the CSS within the <style> tag to see the effects in action!