Reciprocal animation effect

This is the 17th day of my participation in the August More text Challenge. For details, see:August is more challenging

BattleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if you need to reprint can contact the author authorization

background

In fact, countdown animation is a kind of loading animation, in the user’s mind, a good application, tool, website should be well made and can respond to their needs quickly. When I was releasing the first version of a product, I logged in to verify loading… The delay was 2-3 seconds, and as a result, the feedback email was flooded with users on the same day. Most users thought that these few seconds were an interface suddenly stuck or a software BUG. In fact, we were just verifying the login information. This is a very bad user experience, and while early adopters may give your product a second chance, the vast majority of them lose information about the product and don’t use it anymore, leading to massive user churn.

Solution: Use load animations to provide even feedback and reduce user anxiety

Loading animation categories: progress bar loading animation, infinite loop loading animation and skeleton loading animation

Excellent loading animation features

1. The core isReduce animation time
2. givenThe specific time
3. Tell the userWhy wait
4. Make the waiting process less boringUse fun animations
5. Reduce the user’s psychological perception of waiting timecolor,Some relevant knowledge,A product operation teaching
6. Pass the company brand image throughCorporate philosophy,Company Values,The company's mascot

The final result

1. Add HTML files

<div class="counter">
    <div class="nums">
        <span class="in">3</span>
        <span>2</span>
        <span>1</span>
        <span>0</span>
    </div>
    <h4>Get Ready</h4>
</div>

<div class="final">
    <h1>GO</h1>
    <button id="replay">
        <span>Replay</span>
    </button>
</div>
Copy the code

Add CSS files

1. Set up the* 为 box-sizing: border-box
2. Set up thebodyTo center the project

* * {{box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
}
Copy the code

The main CSS code

h4 {
    font-size: 20px;
    margin: 5px;
    text-transform: uppercase;
}

.counter {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.counter.hide {
    transform: translate(-50%, -50%) scale(0);
    animation: hide 0.2 s ease-out;
}

@keyframes hide {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-50%, -50%) scale(0); }}.final {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    text-align: center;
}

.final.show {
    transform: translate(-50%, -50%) scale(1);
    animation: show 0.2 s ease-out;
}

@keyframes show {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }

    30% {
        transform: translate(-50%, -50%) scale(1.4);
    }

    100% {
        transform: translate(-50%, -50%) scale(1); }}.nums {
    color: #3498db;
    font-size: 50px;
    position: relative;
    overflow: hidden;
    width: 250px;
    height: 50px;
}

.nums span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(120deg);
    transform-origin: bottom center;
}

.nums span.in {
    transform: translate(-50%, -50%) rotate(0deg);
    animation: goIn 0.5 s ease-in-out;
}

.nums span.out {
    animation: goOut 0.5 s ease-in-out;
}

@keyframes goIn {
    0% {
        transform: translate(-50%, -50%) rotate(120deg);
    }

    30% {
        transform: translate(-50%, -50%) rotate(-20deg);
    }

    60% {
        transform: translate(-50%, -50%) rotate(10deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg); }}@keyframes goOut {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    60% {
        transform: translate(-50%, -50%) rotate(20deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-120deg); }}#replay {
    background-color: #3498db;
    border-radius: 3px;
    border: none;
    color: aliceblue;
    padding: 5px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3 s;
}

#replay span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.3 s;
}

#replay span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5 s;
}

#replay:hover span {
    padding-right: 25px;
}

#replay:hover span:after {
    opacity: 1;
    right: 0;
}
Copy the code

Add JS file

The main logic

const nums = document.querySelectorAll('.nums span')
const counter = document.querySelector('.counter')
const finalMessage = document.querySelector('.final')
const replay = document.querySelector('#replay')

runAnimation()

function resetDOM() {
    counter.classList.remove('hide')
    finalMessage.classList.remove('show')

    nums.forEach((num) = > {
        num.classList.value = ' '
    })

    nums[0].classList.add('in')}function runAnimation() {
    nums.forEach((num, idx) = > {
        const nextToLast = nums.length - 1

        num.addEventListener('animationend'.(e) = > {
            if (e.animationName === 'goIn'&& idx ! == nextToLast) { num.classList.remove('in')
                num.classList.add('out')}else if (e.animationName === 'goOut' && num.nextElementSibling) {
                num.nextElementSibling.classList.add('in')}else {
                counter.classList.add('hide')
                finalMessage.classList.add('show')
            }
        })
    })
}

replay.addEventListener('click'.() = > {
    resetDOM()
    runAnimation()
})
Copy the code

❤️ Thank you all

If this post is helpful to you, give it a thumbs-up. Your thumbs-up are my motivation.

If you like this post, you can “like” + “bookmark” + “forward” to more friends.