Creating a “levitation” animation for an image.

To create an animated levitation in Elementor, you need to add a CSS animation to the properties you used to create the levitation effect. To do this, you will need to slightly modify the previous code.

Here is an example of an animated image levitation:

CSS

.levitate {
  animation: levitate-animation 2s ease-in-out infinite alternate;
  transform-origin: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transform: translate3d(0, 0, 0);
}
@keyframes levitate-animation {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -10px, 0);
  }
}

In this code, we used the @keyframes CSS animation to define an animation that will change the value of the transform property from the initial position to the levitation position. We also changed the value of box-shadow and added the transform-origin property to make the animation smoother.

To use this code, you can add a new CSS class to your Elementor elements and paste the code into the CSS editor. After that, you will see your image move up and down by 10 pixels over 2 seconds. If you want to change the animation speed or levitation height, you can change the values in the CSS animation or element properties.

It is important to remember that animation can slow down the loading of a web page and degrade its performance, so it is recommended to use it with caution and only where it is necessary to achieve the desired effect.

How to make a footer fixed at the bottom regardless of page content

Text underline on hover

Text underline overlay effect.