Adding a pulsing effect to a heading text

How To
1

How to add a simple pulsing effect to a heading text using css?

2

Hi @rdc_webdev,

you can add animations to any element like you would normally do.

First create the keyframes with a generator like this: CSS Keyframe Animation Generator | Web Code Tools

Next, give your headline a class of “pulsate” for example (under style » css » CSS Classes). Then add the class with the animation properties from the generator under Bricks » Settings » Custom Code » Custom CSS like this:

.pulsate {
  animation: myPulse 2s ease 0s infinite normal forwards;
}

@keyframes myPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

And your’re done.

Edit: The second option is to use the built-in entry animations. Select your element, search for “animation” in the options panel on the left, set your settings and you’re done too. This option seems to be only for entry animations. So if you’re looking for 24/7 pulsing elements, use my first approach.

Regards,
timmse

1 Like