Continuously Border Color changing CSS Animation

By Aakarshan Jaiswal October 31, 2020

Continuously Color changing CSS Animation

Border.html

<html>

<head>

<title>Border Change Color</title>

</head>

<body>

Hello, welcome to LearnoPhile... This is a border color changing CSS Animation<br>So this is all about making border color change using CSS Keyframes<br>If you like this video then please SUBCRIBE our channel LEARNOPHILE and Share video with your friends.<br>

Hit the LIKE button and Notification Bell....Thanks for watching...See you soon in our next video.... :) !!!<br>

You can get the CODE of this from link in the description... Or you can directly go too our blog - Digi App-Mart (digiappmart.blogspot.com)... !!!

</div>

</body>

</html>

style.css

.background{

background-color: chocolate;

padding: 5px;

border-radius: 7px;

animation: bordercolor 7s linear infinite;

}

.foreground{

background-color: white;

color: cornflowerblue;

padding: 5px;

border-radius: 7px;

}

@keyframes bordercolor{

0%{background-color: blueviolet}

30%{background-color: darkorange}

50%{background-color: chartreuse}

70%{background-color: deepskyblue}

100%{background-color: yellow}

}

For live preview go to the following link -
jdoodle.com/h/Jr

Click on below link for web development playlist 👇👇👇 https://youtube.com/playlist?list=PL66oavwdqCzKlztC6Te8OM4VCsfT7XoMD Click on below link for CSS playlist 👇👇👇 https://youtube.com/playlist?list=PL66oavwdqCzJqMotPAy8FakYhhX0tXHEh Click on below link for HTML playlist 👇👇👇 https://youtube.com/playlist?list=PL66oavwdqCzJzpvmK-HhmAaCc5xI0lO1f

Search This Blog

Digi App-Mart