html animation on scroll code example
Example 1: animation on scroll css
svg {
position: fixed;
animation: rotate 1s linear infinite;
animation-delay: calc(var(--scroll) * -1s);
}
Example 2: aos animate
<script>
AOS.init();
</script>
Example 3: aos css animation
<div data-aos="zoom-in-left"></div>
Example 4: aos animate
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
Example 5: scrolling animation css
.inline-photo {
border: 1em solid #fff;
border-bottom: 4em solid #fff;
border-radius: .25em;
box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
margin: 2em auto;
opacity: 0;
transform: translateY(4em) rotateZ(-5deg);
transition: transform 4s .25s cubic-bezier(0,1,.3,1),
opacity .3s .25s ease-out;
max-width: 600px;
width: 90%;
will-change: transform, opacity;
}
Example 6: aos css animation
<div data-aos="zoom-in-right"></div>