How can I put animation onto my bordered html element with css but NOT have it's border animate-CodePudding

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!

CodePudding user response：

You can just separate and move the text into a span and apply the animation to the span. See snippet below.

<html>

<head>

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

  <style>
    body {
      padding: 0;
      margin: 0;
      font-family: sans-serif;
    }

    .pageName {
     
      width: 14.0vh;
      padding: 1.5vh 1.5vh 1.5vh 3.5vh;
      border-width: 0.5vh;
      border-style: double;
      border-radius: 1.0vh;
      color: #006400;
      margin: auto;
    }

    .pageName span {
      animation: blinker 5s linear infinite;
      font-family: Monaco;
      font-weight: bold;
      font-size: 2.0vh;
      color: #006400;
    }

    @keyframes blinker {
      50% {
        opacity: .1;
      }
    }
  </style>
</head>

<body>

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

</body>

</html>

For some reason in the code snippet editor, the layout gets messed up, but if you copy the markup and run it locally it should look as you designed it.

CodePudding user response：

Try wrapping the div you have with a container and target only the internal div with the animation

.container {
    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;
     border-width: 0.5vh;
     border-style: double;
     border-radius: 1.0vh;
}

.pageName{
   
     animation: blinker 5s linear infinite;
     
 }
 
 @keyframes blinker {
   50% {
     opacity: .25;

   }
 }

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