Animation to any element

[GemmieDodger]

Hi,

Please can I add an animation on load, which can be added to any element via. a class.

@keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }

.animation-element-onload { animation: 1s ease-out 0s 1 slideInFromLeft; }

Thank you, Gemma

[AllThingsSmitty]

Sure, do you have a demo example showing this? Feel free to submit a pull request with your recommendation. Please add a sentence or two explaining why this would be a good "pro" tip. More information on submitting is in the contribution guidelines.

[GemmieDodger]

Here's a codepen. https://codepen.io/gemmiedodger/pen/gOPbZyg

I'll have a read of the guidelines, thank you. This is my first ever contribution so please let me know if I do something wrong!

[ghost]

Anyway to add animations onScroll? Without the use of an external script or library?

[v007rj]

@GemmieDodger
You can run a CSS animation on page load without using any JavaScript. You just have to use CSS3 Keyframes. Try using Keyframe animations it would work .

[ankit11hab]

You can try adding to your code. In the div class you want to animate, you just need to add -> data-aos="fade-left"(for example). You can make required changes like offset, delay, duration, etc. like this

Please follow this link for the full description of using this method. https://github.com/michalsnik/aos