a { transition: color 200ms, transform 200ms; transform: rotate(10deg); } div { transition-property: filter; animation-name: rotating; } .good { transition-property: filter; transition-duration: 1s; } .good2 { transition-property: color, filter; transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1); } .bad { /* safe with different node types */ transition-property: color, filter; transition-duration: 1s, 2s; } .revert { transition: 200ms transform; } input[type=range]::-moz-range-thumb { transition: color 200ms, transform 200ms; transform: rotate(10deg); } input[type=range]::-webkit-slider-thumb { transition: none; transition-property: all; } button::-moz-submit-invalid { opacity: 1; transform: translateX(45px); transition: opacity 0.5s 2s, transform 0.5s 0.5s; } @supports (transition: opacity 0.5s 2s, transform 0.5s 0.5s) { button::-moz-submit-invalid { opacity: 1; transform: translateX(45px); transition: opacity 0.5s 2s, transform 0.5s 0.5s; } button { opacity: 1; transform: translateX(45px); transition: opacity 0.5s 2s, transform 0.5s 0.5s; } } button::-webkit-search-cancel-button { display: flex; transition: color 200ms, transform 200ms; transform: rotate(10deg); } button::-webkit-search-cancel-button { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-transition: color 200ms, -webkit-transform 200ms; transition: color 200ms, -webkit-transform 200ms; transition: color 200ms, transform 200ms; transition: color 200ms, transform 200ms, -webkit-transform 200ms; -webkit-transform: rotate(10deg); transform: rotate(10deg); } .a::-webkit-search-cancel-button { display: flex; flex-flow: row; order: 0; flex: 0 1 2; transition: flex 200ms; } .no-warn { transition-property: color, opacity; transition-duration: 1s, 2s; } div { transition-property: transform; transform: rotate(10deg); } div { transition: calc(1s); }