Release 25.43.4

Tactics 3.0.13

light_mode

dark_mode

Keyframes

Keyframes are used to define the animation behavior of an element. They allow you to specify the start and end points of an animation, as well as any intermediate steps that should occur during the animation.

All universes

CSS : Universes/_base/_common/_css/_global/_keyframes/_fade_in.scss
Universes/_base/_common/_css/_global/_keyframes/_fade_out.scss
Universes/_base/_common/_css/_global/_keyframes/_pop.scss
Universes/_base/_common/_css/_global/_keyframes/_pulse_infinite.scss
Universes/_base/_common/_css/_global/_keyframes/_pulse.scss
Universes/_base/_common/_css/_global/_keyframes/_push.scss
Universes/_base/_common/_css/_global/_keyframes/_slide_in_down.scss
Universes/_base/_common/_css/_global/_keyframes/_slide_down.scss
Universes/_base/_common/_css/_global/_keyframes/_slide_in_up.scss
Universes/_base/_common/_css/_global/_keyframes/_slide_up.scss
JS : Universes/_common/_js/_keyframes.js
Universes/_common/_js/_animation/_push.js

Keyframes

These keyframes animations are triggered by simple CSS class, They can be used to animate any element on the page, including buttons, images, and text, etc...

Fade link

Useful for example for event cards, challenge card, game cards, etc...

Fade in

CSS class : is-fadeIn
Animation duration : 450ms
CSS variable : --fadeInAnimationDuration

Fade out

CSS class : is-fadeOut
Animation duration : 450ms
CSS variable : --fadeOutAnimationDuration

Push/Pop link

Useful for example for clicking a button or the appearance of a notification.

Push

CSS class : is-push
Animation duration : 450ms
CSS variable : --pushAnimationDuration

Pop

CSS class : is-pop
Animation duration : 450ms
CSS variable : --popAnimationDuration

Pulse link

Useful for example to highlight a button.

Default

CSS class : is-pulse
Animation duration : 450ms
CSS variable : --pulseAnimationDuration

Infinite

CSS class : is-pulseInfinite
Animation duration : 450ms
CSS variable : --pulseInfinteAnimationDuration

Slide link

Useful for example for the appearance of a collapsed list component or a dropdown.

Slide down

CSS class : is-slideDown
Animation duration : 650ms
CSS variable : --slideDownAnimationDuration

Slide up

CSS class : is-slideUp
Animation duration : 250ms
CSS variable : --slideUpAnimationDuration

Slide in link

Useful for example for the appearance of a group of event cards.

Slide in down

CSS class : is-slideInDown
Animation duration : 250ms
CSS variable : --slideInDownAnimationDuration

Slide in up

CSS class : is-slideInUp
Animation duration : 250ms
CSS variable : --slideInUpAnimationDuration

Bounce link

Useful for example to create attention-grabbing motion for notifications or icons.

Bounce

CSS class : is-bounce
Animation duration : 450ms
CSS variable : --bounceAnimationDuration

Bounce in link

Useful for example to create attention-grabbing motion for notifications or icons.

Bounce in

CSS class : is-bounceIn
Animation duration : 450ms
CSS variable : --bounceInAnimationDuration

Bounce in up

CSS class : is-bounceInUp
Animation duration : 450ms
CSS variable : --bounceInUpAnimationDuration

Bounce in down

CSS class : is-bounceInDown
Animation duration : 450ms
CSS variable : --bounceInDownAnimationDuration

Bounce out link

Useful for example to create attention-grabbing motion for notifications or icons.

Bounce out

CSS class : is-bounceOut
Animation duration : 450ms
CSS variable : --bounceOutAnimationDuration

Bounce out up

CSS class : is-bounceOutUp
Animation duration : 450ms
CSS variable : --bounceOutUpAnimationDuration

Bounce out down

CSS class : is-bounceOutDown
Animation duration : 450ms
CSS variable : --bounceOutDownAnimationDuration