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;
}
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:
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:
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
, andtransition-property
are used with values other thantransform
andopacity
.The following patterns are considered warnings:
The following patterns are considered okay and do not cause warnings: