in

How To Set Fixed Animation Speed By Using CSS Only


I’m trying to set a fixed animation speed for my notification widget but in this code, I’m having a problem and the problem is when I’m using “animation: 30s linear infinite;” The speed is automatically getting slower & faster, which I don’t want. This means, when I have more paragraph tags the speed increases and when I have less paragraph tags the speed slows down but I want a specific/ fixed speed no matter how many paragraph tags I have, like Marquee tag.

.short-message {
   border:10px solid #303030;
   width: auto;
   height: 370px;
}
.scroll-up {
   height: 370px;
   overflow:hidden;
   display: inline-block;
}
.upper {
   animation: scroll 30s linear infinite;
   display: block;
   padding-top:370px;
}
.upper:hover {
animation-play-state: paused;
}

@keyframes scroll {
  to {
    transform: translateY(-100%);
  }
}

.karo {
   color: black;
}
.headings {
   background: #303030;
   color: white;
   
   padding: 5px;
   text-align: center;
   margin-left: 10px;
   margin-right: 10px;
}
.n-p {
   font-weight: bold;
   color: red;
   padding: 10px;
   margin-top: 5px;
   margin-bottom: 5px;
}
a {
   text-decoration: none;
   color: red;
}
.blink {
  color: grey;
  animation: blinker .7s  infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="short-message">
    <div class="scroll-up">
       <div class="upper">

        <h3 class="headings">NOTIFICATIONS</h3>

<p class="n-p"><span class="blink">➤</span><a target="blank" href=""><span class="karo">&nbsp;LINE 1:</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></p>

<p class="n-p"><span class="blink">➤</span><a target="blank" href=""><span class="karo">&nbsp;LINE 2:</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></p>

<p class="n-p"><span class="blink">➤</span><a target="blank" href=""><span class="karo">&nbsp;LINE 3:</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></p>

      </div>
   </div>
</div>

Thanks for your valuable time & suggestions.



Source: https://stackoverflow.com/questions/70631654/how-to-set-fixed-animation-speed-by-using-css-only

A template project for new Go web backend applications

5 Tiny Yet Useful Features I Would Like to See in GNOME in 2022