Adding performant transitions rule to linter

[wuz]

Using transition values that affect non-compositing rendering in the browser causes performance issues. For example, consider this div that moves 15px to the right on hover:

div {
    transition: right 0.5s linear;
    position: absolute;
    right: 15px;
}
div:hover {
    right: 0px;
}

This transition requires the browser to do a re-layout, calculating the position of all elements. This transition would be much better suited to a transform, such as:

div {
    transition: right 0.5s linear;
    position: absolute;
    right: 15px;
}
div:hover {
    transform: translateX(15px);
}

Using performant transitions makes animations run at 60fps and look smooth across browsers.

Rule Details

Rule ID: performant-transitions

This rule is aimed at creating performant web animations. As such, it warns when transition, -webkit-transition, -ms-transition, and transition-property are used with values other than transform and opacity.

The following patterns are considered warnings:

div {
    transition: width 0.5s linear;
}

div {
   transition: left 0.5s ease-in-out;
}

The following patterns are considered okay and do not cause warnings:

/* using transform */
div {
    transition: transform 0.2s linear;
}

/* using opacity */
div {
   transition: opacity 0.5s ease-in-out;
}

[frvge]

lgtm. Thanks for your contribution @wuz .