I'm trying to use bounce animate for simple text but it doesn't work

I'm trying to use bounce animation for simple text with HTML and CSS. And for making my work easier I copied code from https://animate.style/ but unfortunately, it didn't work. I searched a lot on google to fix this issue but I couldn't.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    <style>
        @-webkit-keyframes bounce {
            from,20%,53%,to {
                -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }

            40%,43% {
                -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
                transform: translate3d(0, -30px, 0) scaleY(1.1);
            }

            70% {
                -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
                transform: translate3d(0, -15px, 0) scaleY(1.05);
            }

            80% {
                -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
                transform: translate3d(0, 0, 0) scaleY(0.95);
            }

            90% {
                -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
                transform: translate3d(0, -4px, 0) scaleY(1.02);
            }
            }
        @keyframes bounce {
            from, 20%, 53%, to {
                -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }

            40%, 43% {
                -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
                transform: translate3d(0, -30px, 0) scaleY(1.1);
            }

            70% {
                -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
                transform: translate3d(0, -15px, 0) scaleY(1.05);
            }

            80% {
                -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
                transform: translate3d(0, 0, 0) scaleY(0.95);
            }

            90% {
                -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
                transform: translate3d(0, -4px, 0) scaleY(1.02);
            }
            }
        .animate__bounce {
            -webkit-animation-name: bounce;
            animation-name: bounce;
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            }
    </style>
</head>
<body>
    <h1 class="animate__bounce">Animate Me</h1>
</body>
</html>
I'm trying to use bounce animate for simple text but it doesn't work

0 Answers
