index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Animations</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src='main.js'></script>
</head>
<body class="body">
    <h1 style="color: darkmagenta; font-size: 28px; font-weight: bold;" class="mb-5">CSS ANIMATIONS</h1>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 m-4 rubber-band">
                <button>RubberBand</button>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 m-4 flash">
                <button>Flash</button>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 m-4 tada">
                 <button>Tada</button>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 m-4 heart">
                <button>HeartBeat</button>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 m-4 zoom">
                <button>ZoomIn</button>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 m-4 head-shake">
                <button>Headshake</button>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 m-4 fade-in">
                <button>FadeIn</button>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 m-4 rotate">
                <button>Rotate</button>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 m-4 jello">
                <button>Jello</button>
            </div>
        </div>
    </div>
</body>
</html>