CSS Transforms, Transitions, and Animations

Transforms

CSS3 introduced additional methods for positioning and modifying components. Alternative approaches to size, position, and adjust items can now be used to explore general layout techniques. The transform property allows for all of these new techniques. There are two types of transform properties: two-dimensional and three-dimensional. Each of these has its own set of characteristics and values.

Transform Syntax

div {
  -webkit-transform: scale(1.5);
     -moz-transform: scale(1.5);
       -o-transform: scale(1.5);
          transform: scale(1.5);
}

Transitions & Animations

The ability to write behaviors for transitions and animations was one of CSS3’s innovations. For years, front end developers have been requesting the option to build these interactions using HTML and CSS instead of JavaScript or Flash. When a state change happens, you can use CSS3 transitions to change the appearance and behavior of an element. such as when it is hovered over, focused on, active, or targeted.