Next: , Previous: , Up: API  


1.16 (olive-css decl transitions)

1.16.1 Parameters

Parameter: animation-classes

Default value:

(#<rule selector: "@@keyframes spin" declarations: (#<rule selector: "to" declarations: (#<declaration property: transform value: "rotate(360deg)">)>)> #<rule selector: "@@keyframes ping" declarations: (#<rule selector: "75%, 100%" declarations: (#<declaration property: transform value: "scale(2)"> #<declaration property: opacity value: 0>)>)> #<rule selector: "@@keyframes pulse" declarations: (#<rule selector: "50%" declarations: (#<declaration property: opacity value: 0.5>)>)> #<rule selector: "@@keyframes bounce" declarations: (#<rule selector: "0%, 100%" declarations: (#<declaration property: transform value: "translateY(-25%)"> #<declaration property: animation-timing-function value: "cubic-bezier(0.8, 0, 1, 1)">)> #<rule selector: "50%" declarations: (#<declaration property: transform value: "translateY(0)"> #<declaration property: animation-timing-function value: "cubic-bezier(0, 0, 0.2, 1)">)>)> #<rule selector: ".animate-none" declarations: (#<declaration property: animation value: none>)> #<rule selector: ".animate-spin" declarations: (#<declaration property: animation value: "spin 1s linear infinite">)> #<rule selector: ".animate-ping" declarations: (#<declaration property: animation value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite">)> #<rule selector: ".animate-pulse" declarations: (#<declaration property: animation value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite">)> #<rule selector: ".animate-bounce" declarations: (#<declaration property: animation value: "bounce 1s infinite">)>)
Parameter: transition-classes

Default value:

((#<rule selector: ".transition-none" declarations: (#<declaration property: transition-property value: none> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition-all" declarations: (#<declaration property: transition-property value: all> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition" declarations: (#<declaration property: transition-property value: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter"> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition-colors" declarations: (#<declaration property: transition-property value: "color, background-color, border-color, text-decoration-color, fill, stroke"> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition-opacity" declarations: (#<declaration property: transition-property value: opacity> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition-shadow" declarations: (#<declaration property: transition-property value: box-shadow> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition-transform" declarations: (#<declaration property: transition-property value: "transform, translate, scale, rotate"> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)>) (#<rule selector: ".duration-0" declarations: (#<declaration property: transition-duration value: "0ms">)> #<rule selector: ".duration-75" declarations: (#<declaration property: transition-duration value: "75ms">)> #<rule selector: ".duration-100" declarations: (#<declaration property: transition-duration value: "100ms">)> #<rule selector: ".duration-150" declarations: (#<declaration property: transition-duration value: "150ms">)> #<rule selector: ".duration-200" declarations: (#<declaration property: transition-duration value: "200ms">)> #<rule selector: ".duration-300" declarations: (#<declaration property: transition-duration value: "300ms">)> #<rule selector: ".duration-500" declarations: (#<declaration property: transition-duration value: "500ms">)> #<rule selector: ".duration-700" declarations: (#<declaration property: transition-duration value: "700ms">)> #<rule selector: ".duration-1000" declarations: (#<declaration property: transition-duration value: "1000ms">)>) (#<rule selector: ".delay-0" declarations: (#<declaration property: transition-delay value: "0ms">)> #<rule selector: ".delay-75" declarations: (#<declaration property: transition-delay value: "75ms">)> #<rule selector: ".delay-100" declarations: (#<declaration property: transition-delay value: "100ms">)> #<rule selector: ".delay-150" declarations: (#<declaration property: transition-delay value: "150ms">)> #<rule selector: ".delay-200" declarations: (#<declaration property: transition-delay value: "200ms">)> #<rule selector: ".delay-300" declarations: (#<declaration property: transition-delay value: "300ms">)> #<rule selector: ".delay-500" declarations: (#<declaration property: transition-delay value: "500ms">)> #<rule selector: ".delay-700" declarations: (#<declaration property: transition-delay value: "700ms">)> #<rule selector: ".delay-1000" declarations: (#<declaration property: transition-delay value: "1000ms">)>) (#<rule selector: ".ease-linear" declarations: (#<declaration property: transition-timing-function value: linear>)> #<rule selector: ".ease-in" declarations: (#<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 1, 1)">)> #<rule selector: ".ease-out" declarations: (#<declaration property: transition-timing-function value: "cubic-bezier(0, 0, 0.2, 1)">)> #<rule selector: ".ease-in-out" declarations: (#<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)">)>))
Parameter: transition-delay

Default value:

(#<rule selector: ".delay-0" declarations: (#<declaration property: transition-delay value: "0ms">)> #<rule selector: ".delay-75" declarations: (#<declaration property: transition-delay value: "75ms">)> #<rule selector: ".delay-100" declarations: (#<declaration property: transition-delay value: "100ms">)> #<rule selector: ".delay-150" declarations: (#<declaration property: transition-delay value: "150ms">)> #<rule selector: ".delay-200" declarations: (#<declaration property: transition-delay value: "200ms">)> #<rule selector: ".delay-300" declarations: (#<declaration property: transition-delay value: "300ms">)> #<rule selector: ".delay-500" declarations: (#<declaration property: transition-delay value: "500ms">)> #<rule selector: ".delay-700" declarations: (#<declaration property: transition-delay value: "700ms">)> #<rule selector: ".delay-1000" declarations: (#<declaration property: transition-delay value: "1000ms">)>)
Parameter: transition-duration

Default value:

(#<rule selector: ".duration-0" declarations: (#<declaration property: transition-duration value: "0ms">)> #<rule selector: ".duration-75" declarations: (#<declaration property: transition-duration value: "75ms">)> #<rule selector: ".duration-100" declarations: (#<declaration property: transition-duration value: "100ms">)> #<rule selector: ".duration-150" declarations: (#<declaration property: transition-duration value: "150ms">)> #<rule selector: ".duration-200" declarations: (#<declaration property: transition-duration value: "200ms">)> #<rule selector: ".duration-300" declarations: (#<declaration property: transition-duration value: "300ms">)> #<rule selector: ".duration-500" declarations: (#<declaration property: transition-duration value: "500ms">)> #<rule selector: ".duration-700" declarations: (#<declaration property: transition-duration value: "700ms">)> #<rule selector: ".duration-1000" declarations: (#<declaration property: transition-duration value: "1000ms">)>)
Parameter: transition-property

Default value:

(#<rule selector: ".transition-none" declarations: (#<declaration property: transition-property value: none> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition-all" declarations: (#<declaration property: transition-property value: all> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition" declarations: (#<declaration property: transition-property value: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter"> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition-colors" declarations: (#<declaration property: transition-property value: "color, background-color, border-color, text-decoration-color, fill, stroke"> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition-opacity" declarations: (#<declaration property: transition-property value: opacity> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition-shadow" declarations: (#<declaration property: transition-property value: box-shadow> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)> #<rule selector: ".transition-transform" declarations: (#<declaration property: transition-property value: "transform, translate, scale, rotate"> #<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)"> #<declaration property: transition-duration value: "150ms">)>)
Parameter: transition-timing

Default value:

(#<rule selector: ".ease-linear" declarations: (#<declaration property: transition-timing-function value: linear>)> #<rule selector: ".ease-in" declarations: (#<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 1, 1)">)> #<rule selector: ".ease-out" declarations: (#<declaration property: transition-timing-function value: "cubic-bezier(0, 0, 0.2, 1)">)> #<rule selector: ".ease-in-out" declarations: (#<declaration property: transition-timing-function value: "cubic-bezier(0.4, 0, 0.2, 1)">)>)

Next: (olive-css decl typography), Previous: (olive-css decl transforms), Up: API