WeWeb Documentation

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

You can find the all the definitions of the CSS animation properties here.

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

To add an animation, select the keyframe where you want to define properties. Then, you can modify any CSS property from the style panel. You can identify properties set on a keyframe with their green highlight. Do that for the initial keyframe, the final one, and all the intermediate ones to create a smooth animation.

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.)