Simple animation in JS+CSS

Simple exmple

by shurikation

JavaScript

function showConfirm() {
            confirm.style.display = 'block';
            let counter = 100;//transform in css - чтобы двигалось за опрделенное рвемя

            const id = setInterval(frame, 10); //запуск функции фрейм через 10 млсекунд

            function frame() {

                if (counter === 10) {//чтобы opacity не глючило, не пишем 0
                    clearInterval(id); //останавливаем setInterval - в скобках указываем ккакой именно т.е. id
                    confirm.style.display = 'none'; //скрыть блок с картинкой-анимашкой
                } else {
                    counter--;
                    confirm.style.transform = `translateY(-${counter}px)`;
                    confirm.style.opacity = '.' + counter;//плавно исчезает
                }
            }
        }