How can I put animation onto my bordered html element with css but NOT have it’s border animate as well?


How can I put animation onto my bordered html element with css but NOT have it’s border animate as well? What happens now is the entire thing animates. Here is the code:

.pageName{
   width: 14.0vh;
   padding: 1.5vh 1.5vh 1.5vh 3.5vh;
   font-family: Monaco;
   font-weight: bold;
   font-size: 2.0vh;
   color: #006400;
    margin: auto;
    animation: blinker 5s linear infinite;
    border-width: 0.5vh;
    border-style: double;
    border-radius: 1.0vh;
}

@keyframes blinker {
  50% {
    opacity: .25;
  }
}

<div class="pageName">Title Page</div>

Thank you!



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here