CSS ANİMASYON 3 (RENK GEÇİŞLİ BORDER)

CSS

body {  
		background-color: #000;
		height:100vh;
		display:flex;
		justify-content:center;
		align-items:center; 
	}

	@keyframes after{   
		0% {	background-image:linear-gradient(#f00,#00F,#0f0); }
		30% { 	background-image:linear-gradient(to left,#f00,#00F,#0f0); } 
		60% { 	background-image:linear-gradient(to top,#f00,#00F,#0f0); } 
		100% { 	background-image:linear-gradient(to right,#f00,#00F,#0f0); } 
	}


	.card {
		width:250px;
		height: 250px;
		background-color: #000;	 
		color:#ddd;
		padding: 1rem;
		border-radius: 20px;
		font-family: calibri;
		text-align:center;
		position: relative;
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;

	}

	.card::after{
		content:"";
		background-color: #fff;
		position: absolute;
		width:100%;
		height: 100%;
		top:0;
		left:0;
		z-index: -1;
		padding: 5px;
		transform:translate(-5px,-5px);
		border-radius:20px;
		background-image:linear-gradient(#f00,#00F);
		animation-name:after;
		animation-duration:.3s;
		animation-iteration-count:infinite;
	}

HTML

<div class="card">
		<h2> Lorem ipsum</h2><br><br>
		<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
</div>