[Edit]

CSS - pulsating color animated border (with border-radius)

1 contributors

2 contributions

0 discussions

3 points

Created by:

Evania

584

In this article, we would like to show you how to create pulsating color animated border using CSS.

Practical example

Edit

In order to create pulsating effect, we need to:

set the element's border initial color,
use @keyframes to create animation that changes border color,
assign the animation to the element, set its execution time and duration.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    .element {
        padding: 5px;
        border: 10px solid lightgreen;  /* sets initial border color                */
        animation: pulse 2s infinite;   /* sets effect, execution time and duration */
    }
​
    @keyframes pulse {
        0% {
            border-color: lightgreen;  /* initial border color */
        }
        50% {
            border-color: green;       /* second border color  */
        }
        100% {
            border-color: lightgreen;  /* initial border color */
        }
    }
​
  </style>
</head>
<body>
  <div class="element">Some text here ...</div>
</body>
</html>