Studio Web
Switch Design System theme
Betclic / Clickbet
Shortcut : MAJ + T
Switch theme mode
Light / Dark
Shortcut : MAJ + D
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.
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
Useful for example for event cards, challenge card, game cards, etc...
Fade in
CSS class : is-fadeIn
Animation duration : 0s, 450ms
Animation delay : 0s, 0s
CSS variables : --fadeInTempoAnimationDuration
--fadeInAnimationDuration
--fadeInAnimationDelay
--fadeInTempoAnimationDelay
Fade out
CSS class : is-fadeOut
Animation duration : 450ms, 450ms
Animation delay : 0s, 0s
CSS variables : --fadeOutTempoAnimationDuration
--fadeOutAnimationDuration
--fadeOutTempoAnimationDelay
--fadeOutAnimationDelay
Push/Pop
Useful for example for clicking a button or the appearance of a notification.
Push
CSS class : is-push
Animation duration : 450ms
Animation delay : 0s
CSS variables : --pushAnimationDuration
--pushAnimationDelay
Pop
CSS class : is-pop
Animation duration : 450ms
Animation delay : 0s
CSS variables : --popAnimationDuration
--popAnimationDelay
Pulse
Useful for example to highlight a button.
Default
CSS class : is-pulse
Animation duration : 450ms
Animation delay : 0s
CSS variables : --pulseAnimationDuration
--pulseAnimationDelay
Infinite
CSS class : is-pulseInfinite
Animation duration : 1s (infinite)
Animation delay : 0s
CSS variables : --pulseInfinteAnimationDuration
--pulseInfinteAnimationDelay
Slide
Useful for example for the appearance of a collapsed list component or a dropdown.
Slide down
CSS class : is-slideDown
Animation duration : 650ms, 650ms
Animation delay : 0s, 650ms
CSS variables : --slideDownTempoAnimationDuration
--slideDownAnimationDuration
--slideDownTempoAnimationDelay
--slideDownAnimationDelay
Slide up
CSS class : is-slideUp
Animation duration : 250ms
Animation delay : 0s
CSS variables : --slideUpAnimationDuration
--slideUpAnimationDelay
Slide in
Useful for example for the appearance of a group of event cards.
Slide in down
CSS class : is-slideInDown
Animation duration : 250ms, 650ms
Animation delay : 0s, 250ms
CSS variables : --slideInDownTempoAnimationDuration
--slideInDownAnimationDuration
--slideInDownTempoAnimationDelay
--slideInDownAnimationDelay
Slide in up
CSS class : is-slideInUp
Animation duration : 250ms
Animation delay : 0s
CSS variables : --slideInUpAnimationDuration
--slideInUpAnimationDelay
Bounce
Useful for example to create attention-grabbing motion for notifications or icons.
Bounce
CSS class : is-bounce
Animation duration : 450ms
Animation delay : 0s
CSS variables : --bounceAnimationDuration
--bounceAnimationDelay
Bounce in
Useful for example to create attention-grabbing motion for notifications or icons.
Bounce in
CSS class : is-bounceIn
Animation duration : 450ms
Animation delay : 0s
CSS variables : --bounceInAnimationDuration
--bounceInAnimationDelay
Bounce in up
CSS class : is-bounceInUp
Animation duration : 450ms
Animation delay : 0s
CSS variables : --bounceInUpAnimationDuration
--bounceInUpAnimationDelay
Bounce in down
CSS class : is-bounceInDown
Animation duration : 450ms
Animation delay : 0s
CSS variables : --bounceInDownAnimationDuration
--bounceInDownAnimationDelay
Bounce out
Useful for example to create attention-grabbing motion for notifications or icons.
Bounce out
CSS class : is-bounceOut
Animation duration : 450ms
Animation delay : 0s
CSS variables : --bounceOutAnimationDuration
--bounceOutAnimationDelay
Bounce out up
CSS class : is-bounceOutUp
Animation duration : 450ms
Animation delay : 0s
CSS variables : --bounceOutUpAnimationDuration
--bounceOutUpAnimationDelay
Bounce out down
CSS class : is-bounceOutDown
Animation duration : 450ms
Animation delay : 0s
CSS variables : --bounceOutDownAnimationDuration
--bounceOutDownAnimationDelay