I have a div with an animated pulsing border, achieved through CSS keyframes. The issue I am facing is that the animation affects the entire content within the div, whereas I want it to apply only to the border itself. Here's my code:
<div class="main">
<div class="border">
-Text Here-
</div>
</div>
Here is the CSS code for the pulse animation:
@keyframes pulse {
0% { opacity: 0; animation-timing-function: ease-in;}
20% { opacity: .2; animation-timing-function: ease-in;}
40% { opacity: .4; animation-timing-function: ease-in;}
45% { opacity: .8; animation-timing-function: ease-in;}
50%% { opacity: 1; animation-timing-function: ease-in;}
50%% { opacity: 1; animation-timing-function: ease-out;}
55% { opacity: .8; animation-timing-function: ease-out;}
60% { opacity: .4; animation-timing-function: ease-out;}
80% { opacity: .2; animation-timing-function: ease-out;}
100% { opacity: 0; animation-timing-function: ease-out;}
}
.border {
border-radius: 25px;
border: 8px solid #2C3E50;
animation-name: pulse;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.main{
padding: 50px;
width: 500px;
height: 500px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
In addition to fixing the animation target, I also wish to trigger the animation when the user clicks anywhere inside the div, and keep it running even after clicking outside the div. Any suggestions or solutions would be greatly appreciated as I'm not very proficient in CSS.