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.
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...
CSS : Universes/_common/_css/_global/_keyframes/_blur_in.scss
Universes/_common/_css/_global/_keyframes/_blur_out.scss
Universes/_common/_css/_global/_keyframes/_bounce_in_down.scss
Universes/_common/_css/_global/_keyframes/_bounce_in_up.scss
Universes/_common/_css/_global/_keyframes/_bounce_in.scss
Universes/_common/_css/_global/_keyframes/_bounce_out_down.scss
Universes/_common/_css/_global/_keyframes/_bounce_out_up.scss
Universes/_common/_css/_global/_keyframes/_bounce_out.scss
Universes/_common/_css/_global/_keyframes/_bounce.scss
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/_scale_in.scss
Universes/_base/_common/_css/_global/_keyframes/_scale_out.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
Blur
Useful for example to create progressive appearance or disappearance of elements on the page.
Blur in
CSS class : is-blurIn
Animation duration : 450ms
Animation delay : 0s
CSS variables : --blurInAnimationDuration
--blurInAnimationDelay
Blur out
CSS class : is-blurOut
Animation duration : 450ms
Animation delay : 0s
CSS variables : --blurOutAnimationDuration
--blurOutAnimationDelay
Bounce
Useful for example to create attention-grabbing motion for notifications or icons.
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.
Default
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
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
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
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
Scale
Useful for example to create progressive appearance or disappearance of elements on the page.
Scale in
CSS class : is-scaleIn
Animation duration : 450ms
Animation delay : 0s
CSS variables : --scaleInAnimationDuration
--scaleInAnimationDelay
Scale out
CSS class : is-scaleOut
Animation duration : 450ms
Animation delay : 0s
CSS variables : --scaleOutAnimationDuration
--scaleOutAnimationDelay
Slide
Useful for example for the appearance of a collapsed list component or a dropdown, or the appearance of a group of event cards..
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 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
Combined
If you want to combine multiple keyframe animations, you have to create a custom CSS class that includes all the desired keyframe animations.
Then, you can trigger this custom class using the same method as for individual keyframe animations.
Here is an example of a combined animation that includes custom animations.
Progressive appearance
With fade in, scale in and blur out