Bummer! This is just a preview. You need to be signed in with an account to view the entire instruction.

Well done!

You have completed (UPI) Chapter 11: How to use CSS transitions, transforms, animations, and filters!

Instruction

Example: Moving an Element with Translate

Translate moves an element along the X or Y axis without affecting the document layout.

.movable {
    transition: transform 0.5s;
}
.movable:hover {
    transform: translateX(50px); /* Moves the element 50px to the right */
}