Animations CheatSheet

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.

• animation

Example custom CSS:

bricks

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

oxygen

.loaded Custom CSS

animation: var(--o-animation-fade-in) forwards;

Animations

link Animations

Description	CSS Variable	Utility 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

Description	Triggers on Hover state	Triggers 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

Description	Triggers on viewport entry	Triggers 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