Animate CSS outline-color

With CSS, how can I animate the outline-color property? I want the div to look like the following after

1 Answer
Nancy Den

To implement animation on outline-color property with CSS, you can try to run the following code:


Live Demo

<!DOCTYPE html>
         div {
            width: 550px;
            height: 350px;
            outline: 2px solid blue;
            animation: myanim 3s infinite;
         @keyframes myanim {
            50% {
               outline-color: orange;
      <h1>CSS outline-color property</h1>
      <div> </div> 

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.