Breaking News: Grepper is joining You.com. Read the official announcement!

animation reverse

Sasuke Khan answered on May 18, 2022 Popularity 10/10 Helpfulness 6/10

answer animation reverse

animation reverse

Comment

<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>

Popularity 10/10 Helpfulness 6/10 Language css

Source: Grepper

Tags: animation css reverse

Link to this answer
Share Copy Link

Contributed on May 18 2022

Sasuke Khan

0 Answers Avg Quality 2/10

animation reverse

Contents

More Related Answers

animation reverse

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.