EN
CSS - pulsating color animated border (with border-radius)
3
points
In this article, we would like to show you how to create pulsating color animated border using CSS.
Practical example
In order to create pulsating effect, we need to:
- set the element's border initial color,
- use
@keyframesto create animation that changes border color, - assign the animation to the element, set its execution time and duration.
// ONLINE-RUNNER:browser;
<!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>