Performant Animations

Favour using the properties transform and opacity for your animations. You will be surprised by how much you can achieve with only these 2 properties. Below, I demonstrate some of the actions you can do with these properties.

Size

Width

Changing width of a rectangle

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

Changing height of a rectangle.

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.

Rotation

Directional Rotation

a pink arrow
Rotating right arrow clockwise 90 degrees.

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

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

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

Sideways Rotation

a pink arrow
This is a right arrow being rotated 360 degrees on Y axis. 
.rotateSideways {
	animation: rotateSideways linear 2s infinite alternate;
}

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

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

Lengthways Rotation

a pink arrow pointing up
This is an up arrow being rotated 360 degrees on the X axis.

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.

Movement

Horizontal Movement

a pink arrow pointing to the right
Moving right arrow horizontally.

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

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

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

Vertical Movement

a pink arrow pointing up
Moving up arrow vertically.

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

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

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

Diagonal Movement

a pink arrow pointing up
Moving right arrow diagonally (north-east).

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%);
	}
}
a pink arrow pointing up
Rotating and moving right arrow diagonally (north-east).

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

an outline of the front of a train
Moving train closer and 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.

Visibility

Hide/Show

Hiding/showing rectangle.

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;
	}
}