Aller au contenu

Animations CheatSheet

Ce contenu n’est pas encore disponible dans votre langue.

This page lists all Animations CSS custom properties and utility classes available in the OxyProps Framework

Target CSS properties

link Target CSS properties

The animation CSS custom properties include shorthand values for:

  • animation-name
  • animation-duration
  • animation-timing-function

Therefore, they must be used on the animation shorthand CSS property.

Example custom CSS:

%root% {
animation: var(--o-animation-fade-in) forwards;
}

Animations

link Animations
DescriptionCSS VariableUtility Class / @keyframes
Bounce --o-animation-bounce o-bounce
Fade-in --o-animation-fade-in o-fade-in
Fade-out --o-animation-fade-out o-fade-out
Float --o-animation-float o-float
ping --o-animation-ping o-ping
Plink --o-animation-blink o-blink
Pulse --o-animation-pulse o-pulse
Scale-down --o-animation-scale-down o-scale-down
Scale-up --o-animation-scale-up o-scale-up
Shake-x --o-animation-shake-x o-shake-x
Shake-y --o-animation-shake-y o-shake-y
Slide-in-down --o-animation-slide-in-down o-slide-in-down
Slide-in-left --o-animation-slide-in-left o-slide-in-left
Slide-in-right --o-animation-slide-in-right o-slide-in-right
Slide-in-up --o-animation-slide-in-up o-slide-in-up
Slide-out-down --o-animation-slide-out-down o-slide-out-down
Slide-out-left --o-animation-slide-out-left o-slide-out-left
Slide-out-right --o-animation-slide-out-right o-slide-out-right
Slide-out-up --o-animation-slide-out-up o-slide-out-up
Spin --o-animation-spin o-spin

On Hover and Active states

link On Hover and Active states
DescriptionTriggers on Hover stateTriggers on Active state
Blink o-blink-hover o-blink-active
Bounce o-bounce-hover o-bounce-active
Fade-in o-fade-in-hover o-fade-in-active
Fade-out o-fade-out-hover o-fade-out-active
Float o-float-hover o-float-active
Ping o-ping-hover o-ping-active
Pulse o-pulse-hover o-pulse-active
Scale-down o-scale-down-hover o-scale-down-active
Scale-up o-scale-up-hover o-scale-up-active
Shake-x o-shake-x-hover o-shake-x-active
Shake-y o-shake-y-hover o-shake-y-active
Slide-in-down o-slide-in-down-hover o-slide-in-down-active
Slide-in-left o-slide-in-left-hover o-slide-in-left-active
Slide-in-right o-slide-in-right-hover o-slide-in-right-active
Slide-in-up o-slide-in-up-hover o-slide-in-up-active
Slide-out-down o-slide-out-down-hover o-slide-out-down-active
Slide-out-left o-slide-out-left-hover o-slide-out-left-active
Slide-out-right o-slide-out-right-hover o-slide-out-right-active
Slide-out-up o-slide-out-up-hover o-slide-out-up-active
Spin o-spin-hover o-spin-active

Scroll Driven Animations (from v1.12)

link Scroll Driven Animations (from v1.12)

Entering and exiting viewport

link Entering and exiting viewport
DescriptionTriggers on viewport entryTriggers on viewport exit
Blink o-blink-enter o-blink-exit
Bounce o-bounce-enter o-bounce-exit
Fade-in o-fade-in-enter o-fade-in-exit
Fade-out o-fade-out-enter o-fade-out-exit
Float o-float-enter o-float-exit
Ping o-ping-enter o-ping-exit
Pulse o-pulse-enter o-pulse-exit
Scale-down o-scale-down-enter o-scale-down-exit
Scale-up o-scale-up-enter o-scale-up-exit
Shake-x o-shake-x-enter o-shake-x-exit
Shake-y o-shake-y-enter o-shake-y-exit
Slide-in-down o-slide-in-down-enter o-slide-in-down-exit
Slide-in-left o-slide-in-left-enter o-slide-in-left-exit
Slide-in-right o-slide-in-right-enter o-slide-in-right-exit
Slide-in-up o-slide-in-up-enter o-slide-in-up-exit
Slide-out-down o-slide-out-down-enter o-slide-out-down-exit
Slide-out-left o-slide-out-left-enter o-slide-out-left-exit
Slide-out-right o-slide-out-right-enter o-slide-out-right-exit
Slide-out-up o-slide-out-up-enter o-slide-out-up-exit
Spin o-spin-enter o-spin-exit