Skip to main content

Learn How to Create a PopUp Animation With HTML5 & CSS3

Input:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <style>
    .ball{
    height: 150px;
    width: 150px;
    background: #009578;
    border-radius: 50%;
    animation: ball 2s infinite;
    }
    
    @keyframes ball{
    0%{
    opacity: 0;
    transform: scale(0);
    }
    50%{
    opacity: 1;
    transform: scale(1);
    }
    100%{
    opacity: 0;
    transform: scale(1);
    }
    }
    </style>
</head>
<body>
    <div class="ball"></div>
</body>
</html>

Output:

Index