@volverjs/style/dist/props/transitions.css

@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.

@media (prefers-reduced-motion: no-preference){:where(:host,:root,.theme){--transition-property-none: none;--transition-property-all: all;--transition-property-colors: color, background-color, border-color, text-decoration-color, fill, stroke;--transition-property-opacity: opacity;--transition-property-shadow: box-shadow;--transition-property-transform: transform, scale, rotate, translate, skew;--duration-75: 75ms;--duration-100: .1s;--duration-150: .15s;--duration-200: .2s;--duration-300: .3s;--duration-500: .5s;--duration-700: .7s;--duration-1000: 1s;--ease-linear: linear;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--animation-none: none;--animation-indeterminate: indeterminate 2s infinite;--animation-progress-indeterminate: progress-indeterminate 1.5s linear infinite;--animation-spin: spin 1s infinite;--animation-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animation-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animation-bounce: bounce 1s infinite;--animation-shine: shine 1.5s infinite;--animation-clippath: clippath 3s infinite;--transition-none: none;--transition-all: all var(--duration-300) var(--ease-in-out);--transition-colors: color var(--duration-300) var(--ease-in-out), background-color var(--duration-300) var(--ease-in-out), border-color var(--duration-300) var(--ease-in-out), text-decoration-color var(--duration-300) var(--ease-in-out), fill var(--duration-300) var(--ease-in-out), stroke var(--duration-300) var(--ease-in-out);--transition-opacity: opacity var(--duration-300) var(--ease-in-out);--transition-shadow: box-shadow var(--duration-300) var(--ease-in-out);--transition-transform: transform var(--duration-300) var(--ease-in-out), scale var(--duration-300) var(--ease-in-out), rotate var(--duration-300) var(--ease-in-out), translate var(--duration-300) var(--ease-in-out), skew var(--duration-300) var(--ease-in-out)}}@keyframes indeterminate{0%{scale:0 1}50%{scale:1;transform-origin:left}51%{scale:1;transform-origin:center right}to{scale:0 1;transform-origin:center right}}@keyframes spin{0%{rotate:0deg}to{rotate:360deg}}@keyframes ping{75%,to{scale:2;opacity:0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bounce{0%,to{translate:0 -25%;animation-timing-function:cubic-bezier(.8,0,1,1)}50%{translate:0;animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pie-masks{0%{opacity:1}50%,to{opacity:0}}@keyframes fade-out{95%{opacity:1}to{opacity:0}}@keyframes shine{to{background-position-x:-200%}}@keyframes clippath{0%,to{clip-path:inset(0 0 95% 0)}25%{clip-path:inset(0 95% 0 0)}50%{clip-path:inset(95% 0 0 0)}75%{clip-path:inset(0 0 0 95%)}}