CSS Animatable outline Property Example

<!DOCTYPE html>
<html>
<head>
<style>
.container1,
.container2,
.container3 {
	display: inline-block;
    width: 100px;
    height: 100px;
    margin: 20px; 
    text-align: center;
    line-height: 100px;
    box-shadow: 0 0 10px 0 #aaa;
    border-radius: 20px;
    border: 2px solid #333;
}

.container1{animation: anim1 5s infinite 1s;}
.container2{animation: anim2 5s infinite 2s;}
.container3{animation: anim3 5s infinite 3s;}

@keyframes anim1 { 50% {outline: 10px solid #f00;}}
@keyframes anim2 { 50% {outline: 10px solid #0f0;}}
@keyframes anim3 { 50% {outline: 10px solid #00f;}}
</style>
</head>
<body>

<h1>Animatable 'outline' Property</h1>
<hr>

<p>Experience the changing outline of the boxes.</p>
  
<div class="container1">1
</div>
<div class="container2">2
</div>
<div class="container3">3
</div>

</body>
</html>