如何在伪元素上使用带有 AOS 的动画？

Question

Normally in HTML file I use AOS like this

<li data-aos="fade-left" class="fields__box">

I try in different way use AOS with pseudo element in my CSS file but I don't do this in the right. Do you have some idea how can I do that? Thanks for your help

 &::before {
        content: "";
        position: absolute;        
        background-image: url(images/logoBig.png);
        z-index: -1;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 70%;
        background-position: center bottom;
        // data-aos="fade-up";
    }

Answer 1

I haven't used Animate on Scroll (AOS) before, but based on a reading of the docs andCSS Tricks post , I think it can be done.

Here's what AOS is doing, JavaScript-wise:

The idea behind AOS is straightforward: watch all elements and their positions based on settings you provide them. Then add/remove the class aos-animate . Of course, in practice, it's not always that easy, but the idea behind AOS is as simple as that. Every aspect of animation is handled by CSS.

Based on the source code for the fade-up animation, you could try:

<li data-aos="fade-before-up" class="fields__box">

&::before {
    /* ... your properties to style the before element ... */
    transition-property: opacity, transform;
    opacity: 0    
    transform: translate3d(0, 100px, 0);
}

&.aos-animate::before {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

Key points:

• I haven't tested this. Sorry. If you'd like to create a CodePen or a JSFiddle that replicates the current behavior you're seeing, I'll see if I can tweak it.
• The data-aos attribute on the HTML element shouldn't match an actual AOS animation. It's just to get the library to put the aos-animate class on the element.
• The ::before pseudo-element is initially styled as 0 opacity and 100px below. When AOS adds the aos-animate class to the <li> , then the ::before element can be transitioned.