Skip to content

CSS Animations

Different approaches

To add CSS animations to an element on a WeWeb page:

  1. select that element, on the page
  2. go to the CSS styles tab of that element, and
  3. choose your preferred way of creating an animation in the Animation dropdown

Animation dropdown

There are three main ways to get started:

  1. Manually add keyframes.
  2. Import keyframes.
  3. Ask WeWeb Copilot.

Keyframes editor

If you're familiar with keyframes, you can create your own using our no-code keyframes editor:

The keyframes editor in WeWeb

In the example above, we:

  • copy Keyframe #1 which creates Keyframe #2
  • move Keyframe #2 on the animation timeline
  • change the value of Keyframe #2 and changing it to seconds instead of percentage
  • delete Keyframe #2 to get back where we started

Import keyframes

To save time, you can also paste and import keyframes in the WeWeb keyframes editor:

Import keyframes

In the example above, we:

WeWeb Copilot

If CSS animations to come easily to you, we recommend asking WeWeb Copilot for help to get started:

WeWeb Copilot generating a CSS animation

In the example above, we:

  • first asked WeWeb Copilot to "make an animation where the text grows larger and larger then smaller and smaller fairly slowly",
  • then used the WeWeb editor to slow down the animation.

TIP

You can also edit the keyframes generated by WeWeb Copilot in the keyframes editor:

Edit keyframes generated by WeWeb Copilot

Copy/paste an animation

To reuse an animation, you can copy it and paste it on a similar element (e.g. here, we are copy/pasting an animation between two text elements):

Copy paste CSS animations in WeWeb

WARNING

You can only paste animations that were copied from the same type of element (e.g. text on text, container on container, etc.)