By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

custom css animation

P

Per Frits

New Member
Hello friends

I jumped on to animista.net and created a modern, simple and usable text animation, unlike the awful, over the top, build-in entrance animations in Elementor, which comes from 100 year old css catalog (more or less )

But unfortunately I am not a web designer, and certainly not a coder, so I have no idea what to do with the codes from animista.net.
Is there a kind soul who can help me with that?

Maybe the keyframes in the main html, and the class on the element?? I have no clue *HA HA*

Thanks a lot!

/Per

The code look like this:

CLASS:
Code:
.slide-right {
-webkit-animation: slide-right 0.5s cubic-bezier (0.250, 0.460, 0.450, 0.940) both;
animation: slide-right 0.5s cubic-bezier (0.250, 0.460, 0.450, 0.940) both;
}

KEYFRAMES:
CSS:
@ -webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX (0);
            transform: translateX (0);
  }
  100% {
    -webkit-transform: translateX (100px);
            transform: translateX (100px);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX (0);
            transform: translateX (0);
  }
  100% {
    -webkit-transform: translateX (100px);
            transform: translateX (100px);
  }
}
 

Latest posts

Latest Resources

Other Elementor Resources

elementor official
Top