https://hunghg255.github.io/madies-clone/js/animate.js

1document.addEventListener('DOMContentLoaded', function() {
2    const allElementAnimate = document.querySelectorAll('[data-animate]');
3   
4    let styleAnimate = '';
5    allElementAnimate.forEach(e => {
6        styleAnimate += `
7            .${e.className.split(' ').join('.')} {animation-name: ${e.dataset.animateName};
8                animation-duration: ${e.dataset.animateDuration};
9                animation-delay: ${e.dataset.animateDelay};
10                -webkit-animation-timing-function: ${e.dataset.animateTf};
11                -moz-animation-timing-function: ${e.dataset.animateTf};
12                -o-animation-timing-function: ${e.dataset.animateTf};
13                animation-timing-function: ${e.dataset.animateTf};
14                -webkit-animation-fill-mode: both;
15                -moz-animation-fill-mode: both;
16                -o-animation-fill-mode: both;
17                animation-fill-mode: both;
18            }
19        `
20    });
21
22    const style = document.createElement('style');
23    style.innerHTML = styleAnimate;
24    document.head.appendChild(style);
25}, false);