Performant Animations

Width

You can change the width of an element with transform: scaleX().

.widen {
	animation: widen 2s infinite alternate;
}

@keyframes widen {
	to {
		transform: scaleX(2);
	}
}

You can use transform: scale() if you wish to change the width and height together.

Height

You can change the height of an element with transform: scaleY().

.heighten {
	animation: heighten linear 2s infinite alternate;
}

@keyframes heighten {
	to {
		transform: scaleY(2);
	}
}

You can use transform: scale() if you wish to change the width and height together.

Directional Rotation

You can change the direction of an element with transform: rotate().

.rotate {
	animation: rotate linear 2s infinite alternate;
}

@keyframes rotate {
	to {
		transform: rotate(90deg);
	}
}

.rotateSideways {
	animation: rotateSideways linear 2s infinite alternate;
}

@keyframes rotateSideways {
	to {
		transform: rotateY(360deg);
	}
}

Lengthways Rotation

You can rotate an element lengthways with transform:rotateX().

.rotateLengthways {
	animation: rotateLengthways linear 2s infinite alternate;
}

@keyframes rotateLengthways {
	to {
		transform: rotateX(360deg);
	}
}

This was counter-intuitive for me when I was began learning transformations. I thought it would be rotateY() to get this effect.

Horizontal Movement

You can move an element horizontally with transform:translateX().

.moveHorizontal {
	animation: moveHorizontal linear 2s infinite alternate;
}

@keyframes moveHorizontal {
	to {
		transform: translateX(150%);
	}
}

Vertical Movement

You can move an element vertically with transform:translateY()

			.moveVertical {
	animation: moveVertical linear 2s infinite alternate;
}

@keyframes moveVertical {
	to {
		transform: translateY(30px);
	}
}

Diagonal Movement

You can move an element direction diagonally by using transform:translate() to move the element horizontally and vertically at the same time.

.moveDiagonally1 {
	animation: moveDiagonally1 linear 2s infinite alternate;
}

@keyframes moveDiagonally1 {
	to {
		transform: translate(-50%, 50%);
	}
}

If you want the element to face in the direction of movement, you need to rotate the element and use translate() to move it in the correct direction.

The order of transformations is important, transform:rotate() translate() and transform:translate() rotate() give different results.

			.moveDiagonally2 {
	animation: moveDiagonally2 linear 2s infinite alternate;
}

@keyframes moveDiagonally2 {
	0% {
		transform: rotate(45deg) translateY(0);
	}
	100% {
		transform: rotate(45deg) translateY(105%);
	}
}

Moving Closer/Further Away

You can use transform: scale() or transform: translateZ().

Using transform: scale() is shrinking or enlarging an element. It is kind of cheating! It works well to create a perception of depth for simple movement e.g. straight lines.

.scale {
	animation: scale linear 2s infinite alternate;
}

@keyframes scale {
	to {
			transform: scale(0);
	}
}

For more complex movements, you need to make a translation along the Z-axis. The Z-axis is the depth dimension. Using transform: translate3d() will give you complete control of moving an element in all 3 dimensions.

Hide/Show

Use opacity to control visibility of an element. You can use it for toggling between states and flashing objects at a particular frequency.

.visibility {
	animation: visibility linear 1s infinite alternate;
}

@keyframes visibility {
	to {
		opacity: 0;
	}
}