How To Set Fixed Animation Speed By Using CSS Only

Question

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;
  }
}


    
       

        NOTIFICATIONS

➤ LINE 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry.

➤ LINE 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry.

➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Thanks for your valuable time & suggestions.

user_17716837 · Answer

you need an absolute measure like px, rem...
or if you want a relative: make sure the measure doesn't depend on the height of the parent element

like vh depends on display height. but not the .upper is a good option
or px if there is less element the px value remain the same, if more element the px is still the same

in fact, using 100% automatically changes the value for you, if there is less element or more... (in most the cases this is amazing but in you case, you don't like this behavior)

after the change:

/* your code */

@keyframes scroll {
    to {
        transform: translateY(-100vh); /* before was: -100% */
    }
}

/* your code */

in the beta below, I will show you the animation with the time that remains on the screen, so you visualize what happens
(do not copy the code, the snippet below is only for beta... try to change with your own value... you don't need js)

let AnimationDuration = 30; // seconds

function TimeRemained() {
  if (AnimationDuration > 0) {
    AnimationDuration--;
    document.getElementById("time").innerHTML = AnimationDuration;
    setTimeout(TimeRemained, 1000);
  } else {
    clearInterval(TimeRemained);
    console.log("30 second is finished");
  }
}

TimeRemained();

.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(-100vh);
  }
}

.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;
  }
}





  
  
  
  Document
  
  



  
    30 seconds
  
  
    
      

        NOTIFICATIONS

        ➤ LINE 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry.

        ➤ LINE 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry.

        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        ➤ LINE 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry.

How To Set Fixed Animation Speed By Using CSS Only

1 Answers