Animated Border Practice


by Jeremy Caudle
code

Worked on animating borders today. Lots more to learn about and tweak before I get something I like, but it was good practice.

Today I'm trying out animating borders. I want to see what it would look like to animated the different borders at different times. I don't think I like this effect too much.

View the code:

HTML and JS 
<div class="codedoodle-block">
		<p>Today I'm trying out animating borders. I want to see what it would look like to animated the different borders at different times. I don't think I like this effect too much.</p>
		</div>
CSS 
@keyframes borders {
		0% {border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent;}
		25% {border-bottom-color:red;}
		50% {border-bottom-color:transparent; border-right-color:red;}
		75% {border-right-color: transparent; border-top-color:red;}
		100% {border-top-color: transparent; border-left-color: red;}
			}
				
			.codedoodle-block {
				margin: 1rem 0;
				padding: .5rem;
				background-color: rgba(0, 0, 0, .2);
				max-width: 30rem;
			}
			
			.codedoodle-block p {
			margin: .5rem;
			padding: .5rem;
				animation: borders 5s ease-out 2s infinite alternate;
				border: solid 5px transparent;
			}

Tags