mirror of
https://github.com/swc-project/swc.git
synced 2024-12-19 03:31:45 +03:00
101 lines
2.1 KiB
CSS
101 lines
2.1 KiB
CSS
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);
|
|
}
|
|
|