“Animação reversa” Respostas de código

Propriedade da direção da animação

animation-direction  can have the following values -
(1) normal : forward direction, this is the default value.
(2) reverse : the animation sets in the reverse direction ( backward ).
(3) alternate : the animation plays normal first and then reverse.
(4) alternate-reverse: the animation plays reverse first and then normal.


NOTE: animation-duration also matters in animation-direction.
FIRE IN CODING

Animação reversa

<style>
        html {
            scroll-behavior: smooth
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: content-box;
        }

        :root {
            --main-color: #000;
        }

        body {
            background: var(--main-color);
            width: 100%;
            height: 100%;
        }

        @keyframes spin {
            0% {
                transform: rotateY(0deg);
            }

            100% {
                transform: rotateY(180deg);
            }
        }

        div {
            background: black;
            padding: 1rem;
            display: inline-block;
        }

        .item {
            /* because span cant be animated */
            display: block;
            color: yellow;
            font-size: 2rem;
        }

        .item.active {
            animation: spin 1s forwards;
            animation-timing-function: ease-in-out;
        }

        .item.in-active {
            animation-direction: reverse;
        }

    </style>
</head>

<body>
    <div>
        <span class="item">ABC</span>
    </div>
    
    <script>
        let item = document.querySelector('.item')

        // play normal
        item.addEventListener('mouseover', () => {
            item.classList.add('active')
        })

        // play in reverse
        item.addEventListener('mouseout', () => {
            item.style.opacity = 0 // avoid showing the init style while switching the 'active' class

            item.classList.add('in-active')
            item.classList.remove('active')

            // force dom update
            setTimeout(() => {
                item.classList.add('active')
                item.style.opacity = ''
            }, 5)

            item.addEventListener('animationend', onanimationend)
        })

        function onanimationend() {
            item.classList.remove('active', 'in-active')
            item.removeEventListener('animationend', onanimationend)
        }
    </script>
</body>
Gleaming Grivet

Respostas semelhantes a “Animação reversa”

Perguntas semelhantes a “Animação reversa”

Procure respostas de código populares por idioma

Procurar outros idiomas de código