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!

2 answers

  • answered 2021-11-23 02:34 Authentic Science

    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.

  • answered 2021-11-23 03:01 Santiago Sierra

    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>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum