Animate with animate .css

To create a basic 1-2-3 countdown with Animate.css, you can use the following HTML and CSS. This code will create a simple countdown from 3 to 1, where each number fades in and out using Animate.css animations.

Here's a basic example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-2-3 Countdown with Animate.css</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
        .countdown {
            font-size: 5em;
            text-align: center;
            margin-top: 20%;
            opacity: 0;
        }

        .countdown.show {
            animation: fadeInOut 1s ease-in-out forwards;
        }

        @keyframes fadeInOut {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
</head>
<body>

    <div class="countdown animate__animated" id="countdown">3</div>

    <script>
        const countdownElement = document.getElementById('countdown');
        const numbers = ['3', '2', '1'];
        let currentNumber = 0;

        function startCountdown() {
            countdownElement.textContent = numbers[currentNumber];
            countdownElement.classList.add('show', 'animate__fadeIn');
            setTimeout(() => {
                countdownElement.classList.remove('show', 'animate__fadeIn');
                currentNumber++;
                if (currentNumber < numbers.length) {
                    setTimeout(startCountdown, 1000); // Delay for the next number
                }
            }, 1000); // Match this duration with the animation time
        }

        window.onload = startCountdown;
    </script>

</body>
</html>

Explanation:

Animate.css is linked via a CDN in the <head> of the document.
The numbers (3, 2, 1) are shown in sequence inside the countdown <div>.
The numbers fade in and out using a custom @keyframes animation named fadeInOut.
The startCountdown function controls the timing of each number's appearance and disappearance, using setTimeout to manage the transitions.

This example creates a simple countdown effect where each number fades in and out using the built-in fadeIn effect from Animate.css combined with custom CSS for the fade-out effect.

rifaterdemsahin / videoedittors

Animate with animate .css #1

HTML

Explanation: