CodeLab
Tutorials For Everyone
Run
<!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>