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 <script src="https://unpkg.com/aos@next/dist/aos.js"></script> 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

<script> AOS.init( { offset: 60, duration: 1000 } ); </script>

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