CSS

CSS transforms and transitions

You can change CSS elements with CSS animations. An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want.

Transforms

The transform property allow you to rotate, scale, move or skew HTML elements.

transform: rotate(angle)

The rotate() value is used to rotate an element.

.diamond {
background-color: red;
height: 50px;
width: 50px;
transform: rotate(45deg);
}
Example 2.6.1
Visual example of 2.6.1
unicorn
Example 2.6.2

transform: scale(x,y)

The scale(x,y) value will - as the name suggests - make the element scale to a certain size.

.scale {
transform: scale(3, 3);
}
Example 2.6.3
unicorn
Visual example of 2.6.3

Transitions

CSS transitions make it possible to change property values smoothly, over a given duration of time.

transition-property

The transition-property property specify the property that the transition is for

.colorChange {
width: 200px;
height: 50px;
background-color: green;
transition-property: background-color;

.colorChange:hover
background-color: limegreen;
}
Example 2.6.4
Visual example of 2.6.4

transition-duration

This property is used to define how much time the transition should take from 0-100% complete. By default, the value is set to 0s, meaning that the transition happens right away, but we can "slow down" the process:

.colorChange {
width: 200px;
height: 50px;
background-color: green;
transition-property: background-color;
transition-duration: 2s;

.colorChange:hover
background-color: limegreen;
}
Example 2.6.5
Visual example of 2.6.5