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 : Betclic/_base/_common/_css/_global/_keyframes/_fade_in.scss
Betclic/_base/_common/_css/_global/_keyframes/_fade_out.scss
Betclic/_base/_common/_css/_global/_keyframes/_pop.scss
Betclic/_base/_common/_css/_global/_keyframes/_pulse_infinite.scss
Betclic/_base/_common/_css/_global/_keyframes/_pulse.scss
Betclic/_base/_common/_css/_global/_keyframes/_push.scss
Betclic/_base/_common/_css/_global/_keyframes/_slide_in_down.scss
Betclic/_base/_common/_css/_global/_keyframes/_slide_down.scss
Betclic/_base/_common/_css/_global/_keyframes/_slide_in_up.scss
Betclic/_base/_common/_css/_global/_keyframes/_slide_up.scss
JS : Betclic/_common/_js/_keyframes.js
Betclic/_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