CodeLeom/animation.html

## animation.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation</title>
    <style>
        body {
            display: grid;
            place-items: center;
        }
        .pulser {
            width: 30px;
            height: 30px;
            background-color: rebeccapurple;
            border-radius: 50%;
            position: relative;
        }

        .pulser::after{
            animation: olanireti 1000ms cubic-bezier(0.9, 0.7, 0.5, 0.9) infinite;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: blueviolet;
            border-radius: 50%;
            z-index: -1;
        }

        /* 0% - 100% */
        @keyframes olanireti{
            0% {
                opacity: 0;
            }
            50% {
                transform: scale(1.4);
                opacity: 0.4;
            }
        }

        .ivy {
            animation-name: damilola;
            animation-duration: 2000ms;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-delay: 1s;
            animation-play-state: running;
            animation-fill-mode: forwards;
        }
        .aishat {
            animation: eva 2000ms linear 500ms infinite normal forwards running;
        }
    </style>
</head>
<body>
    <div class="pulser">

    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Animation</title>
	<style>
	body {
	display: grid;
	place-items: center;
	}
	.pulser {
	width: 30px;
	height: 30px;
	background-color: rebeccapurple;
	border-radius: 50%;
	position: relative;
	}

	.pulser::after{
	animation: olanireti 1000ms cubic-bezier(0.9, 0.7, 0.5, 0.9) infinite;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: blueviolet;
	border-radius: 50%;
	z-index: -1;
	}

	/* 0% - 100% */
	@keyframes olanireti{
	0% {
	opacity: 0;
	}
	50% {
	transform: scale(1.4);
	opacity: 0.4;
	}
	}

	.ivy {
	animation-name: damilola;
	animation-duration: 2000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 1s;
	animation-play-state: running;
	animation-fill-mode: forwards;
	}
	.aishat {
	animation: eva 2000ms linear 500ms infinite normal forwards running;
	}
	</style>
	</head>
	<body>
	<div class="pulser">

	</div>
	</body>
	</html>