@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');

​

html, body {

    width: 100%;

    height: 100%;

    display: flex;

    background: #000;

}

​

p {

        margin: auto;

        font-family: 'Reggae One', cursive;

        font-size: 48px;

        color: #fff;

        mask: radial-gradient(circle at 0 50%, #000, transparent 10%, transparent 0);

        mask-size: 100%;

        animation: scale 5s infinite;

}

​

.radial {

    mask: radial-gradient(circle at 50% 0, #000, transparent 20%, transparent 0);

    mask-size: 100% 100%;

    animation: scale2 5s infinite;

}

​

@keyframes scale {

    0% {

        mask-size: 100%;

    }

    50%,

    100% {

        mask-size: 2000%;

    }

}

​

@keyframes scale2 {

    0% {

        mask-size: 100% 100%;

    }

    50%,

    100% {

        mask-size: 100% 2000%

    }

}

​

// p:hover {

//     transition: 3s all;

//     mask-size: 1500%;

// }