Aller au contenu

Animations

Ce contenu n’est pas encore disponible dans votre langue.

CSS animations allow you to create smooth and engaging visual effects on your website or web application without using JavaScript. Animations can be used to add visual interest to interactive elements like buttons and menus, or to create immersive effects like parallax scrolling and transitions between different sections of a page.

OxyProps includes a set of premade animations that you can use to add visual interest to your website or web application. You can use these animations to add visual interest to interactive elements like buttons and menus, or to create immersive effects like parallax scrolling and transitions between different sections of a page.

Here is the list of available animations CSS variables and utility classes. If you want to learn more about CSS animations, and see samples of how to use them, read on.

Base

Hover

Active

CSS Variable
var(--o-animation-blink)
Utility Classes
o-blink
o-blink-hover
o-blink-active

Base

Hover

Active

CSS Variable
var(--o-animation-bounce)
Utility Classes
o-bounce
o-bounce-hover
o-bounce-active

Base

Hover

Active

CSS Variable
var(--o-animation-fade-in)
Utility Class
o-fade-in
o-fade-in-hover
o-fade-in-active

Fade In Bloom

link Fade In Bloom

Base

Hover

Active

CSS Variable
var(--o-animation-fade-in-bloom)
Utility Class
o-fade-in-bloom
o-fade-in-bloom-hover
o-fade-in-bloom-active

Base

Hover

Active

CSS Variable
var(--o-animation-fade-out)
Utility Class
o-fade-out
o-fade-out-hover
o-fade-out-active

Fade Out Bloom

link Fade Out Bloom

Base

Hover

Active

CSS Variable
var(--o-animation-fade-out-bloom)
Utility Class
o-fade-out-bloom
o-fade-out-bloom-hover
o-fade-out-bloom-active

Base

Hover

Active

CSS Variable
var(--o-animation-float)
Utility Class
o-float
o-float-hover
o-float-active

Base

Hover

Active

CSS Variable
var(--o-animation-ping)
Utility Class
o-ping
o-ping-hover
o-ping-active

Base

Hover

Active

CSS Variable
var(--o-animation-pulse)
Utility Class
o-pulse
o-pulse-hover
o-pulse-active

Scale Down

link Scale Down

Base

Hover

Active

CSS Variable
var(--o-animation-scale-down)
Utility Class
o-scale-down
o-scale-down-hover
o-scale-down-active

Base

Hover

Active

CSS Variable
var(--o-animation-scale-up)
Utility Class
o-scale-up
o-scale-up-hover
o-scale-up-active

Base

Hover

Active

CSS Variable
var(--o-animation-shake-x)
Utility Class
o-shake-x
o-shake-x-hover
o-shake-x-active

Base

Hover

Active

CSS Variable
var(--o-animation-shake-y)
Utility Class
o-shake-y
o-shake-y-hover
o-shake-y-active

Slide In Down

link Slide In Down

Base

Hover

Active

CSS Variable
var(--o-animation-slide-in-down)
Utility Class
o-slide-in-down
o-slide-in-down-hover
o-slide-in-down-active

Slide In Left

link Slide In Left

Base

Hover

Active

CSS Variable
var(--o-animation-slide-in-left)
Utility Class
o-slide-in-left
o-slide-in-left-hover
o-slide-in-left-active

Slide In Right

link Slide In Right

Base

Hover

Active

CSS Variable
var(--o-animation-slide-in-right)
Utility Class
o-slide-in-right
o-slide-in-right-hover
o-slide-in-right-active

Slide In Up

link Slide In Up

Base

Hover

Active

CSS Variable
var(--o-animation-slide-in-up)
Utility Class
o-slide-in-up
o-slide-in-up-hover
o-slide-in-up-active

Slide Out Down

link Slide Out Down

Base

Hover

Active

CSS Variable
var(--o-animation-slide-out-down)
Utility Class
o-slide-out-down
o-slide-out-down-hover
o-slide-out-down-active

Slide Out Left

link Slide Out Left

Base

Hover

Active

CSS Variable
var(--o-animation-slide-out-left)
Utility Class
o-slide-out-left
o-slide-out-left-hover
o-slide-out-left-active

Slide Out Right

link Slide Out Right

Base

Hover

Active

CSS Variable
var(--o-animation-slide-out-right)
Utility Class
o-slide-out-right
o-slide-out-right-hover
o-slide-out-right-active

Base

Hover

Active

CSS Variable
var(--o-animation-spin)
Utility Class
o-spin
o-spin-hover
o-spin-active

Introduction to CSS Animations

link Introduction to CSS Animations

To create a CSS animation, we need to use the @keyframes rule to define the animation’s keyframes (or stages) and the animation property to specify the animation’s duration, timing, and other settings.

Defining Keyframes

link Defining Keyframes

The @keyframes rule allows you to define a series of keyframes that specify how the animation should change over time. Each keyframe represents a specific point in the animation, and can include properties that define the element’s style at that point.

Here’s an example of a @keyframes rule that defines a simple animation that changes an element’s opacity from 0 to 1 over a duration of 2 seconds:

Opacity animation
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

In this example, we’ve named the animation fade-in and defined two keyframes: 0% and 100%. The 0% keyframe sets the element’s opacity to 0 at the beginning of the animation, while the 100% keyframe sets the opacity to 1 at the end of the animation.

Applying Animations

link Applying Animations

Once you’ve defined your @keyframes rule, you can apply the animation to an element using the animation property. Here’s an example of how to apply the fade-in animation we defined earlier to a <div> element:

Applying the animation
div {
animation: fade-in 2s;
}

In this example, we’ve set the animation property to fade-in 2s, which applies the fade-in animation we defined earlier and specifies a duration of 2 seconds.

Animation Properties

link Animation Properties

In addition to the @keyframes rule and the animation property, there are a number of other CSS properties that can be used to customize the behavior and appearance of CSS animations. Here are a few examples:

  • animation-delay: specifies a delay before the animation begins
  • animation-direction: specifies whether the animation should play forwards, backwards, or alternate between forwards and backwards
  • animation-timing-function: specifies the timing function used for the animation (e.g. linear, ease-in, ease-out, ease-in-out)
  • animation-iteration-count: specifies the number of times the animation should repeat (e.g. infinite, 3)
  • animation-fill-mode: specifies what styles should be applied to the element before and after the animation plays (e.g. forwards, backwards, both)

Conclusion

link Conclusion

CSS animations are a powerful tool for adding visual interest and interactivity to your website or web application. With the @keyframes rule and the animation property, you can create smooth, engaging effects without the need for JavaScript. So why not give it a try and see what you can create!

Examples of available animations

link Examples of available animations