CSS Animatable outline-offset 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;outline: 10px solid #f00;}
.container2{animation: anim2 5s infinite 2s;outline: 10px solid #0f0;}
.container3{animation: anim3 5s infinite 3s;outline: 10px solid #00f;}

@keyframes anim1 { 50% {outline-offset:10px;}}
@keyframes anim2 { 50% {outline-offset:10px;}}
@keyframes anim3 { 50% {outline-offset:10px;}}
</style>
</head>
<body>

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

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

</body>
</html>