Jumping Text Animation | Learning Axis

HTML

CSS

@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");
        body {
            background-color: #06bc9d;
            overflow: hidden;
            font-family: "Luckiest Guy", cursive;
            -webkit-font-smoothing: antialiased;
        }
        h1 {
            cursor: default;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100px;
            margin: auto;
            display: block;
            text-align: center;
        }
        h1 span {
            position: relative;
            top: 20px;
            display: inline-block;
            animation: bounce 0.3s ease infinite alternate;
            font-size: 80px;
            color: #fff;
            text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
                0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
                0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
        }
        @keyframes bounce {
            100% {
                top: -20px;
                text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
                    0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,
                    0 50px 25px rgba(0, 0, 0, 0.2);
            }
        }