How to take a break during a CSS animation to pause at the center point of the transition?

Question

I made a sort of header with an animated information banner (on 3 lines) starting at each end. (ex: for the 1st and 3rd line, from left to right and for the 2nd line from right to left). What I would like is to take a break of a few seconds when the 3 bands are all aligned (in the center) then continue the animation.

I would prefer a solution without using javascript but unfortunately I think it seems impossible?

Problem: The 1st and 3rd banner always start to appear before the 2nd and therefore when they are aligned, they are never in the center.



 
   VIDEO LIBRARY 
      
   
      
        
 



 

           
              
            
                
       
                    MANAGEMENT
                
                
                
        
                    OF MY
                
                
                
        
                    VIDEO LIBRARY

user_514878 · Answer

Instead of using from and to in your keyframes, you can set steps using percentages.

In the code below, from 0% to 45% of animation, the animation moves from 0 to 500px. Then from 45 - 55% it stays at 500px (i.e. pauses). Then from 55 - 100% it moves from 500 - 1000px:

@keyframes defilement {
    0% {left: 0;}
    45% {left: 500px;}
    55% {left: 500px;}
    100% {left: 1000px;}
}

Responsive solution: blocks will stop in the centre an any size screen.

If you do not have fixed width and would like a more responsive way to calculate the midpoint, you can use percentages: Start at 0%, end at 100%, then 50% for the centre.

However if you position the left of the block at the very centre, it will be a bit too far right. The correct position for the left of the block is actually 50% - 125px (half of the width of the div). And we can actually use using the CSS calc function to do this!

Also to make all blocks appear at the same time, we need to change the starting point for -250px so the 3 blocks all start off the screen and then slide in together.

@keyframes defilement {
    0%   { left: -250px;}
    45%  { left: calc(50% - 125px); }
    55%  { left: calc(50% - 125px); }
    100% { left: 100%;}
}

Working example:

.bandeau {
  height: 120px;
  width: 100%;
  padding-top: 5px;
  border-radius: 25px;
  background: rgb(26, 133, 230);
}

@keyframes defilement {
    0%   { left: -250px; }
    45%  { left: calc(50% - 125px); }
    55%  { left: calc(50% - 125px); }
    100% { left: 100%; }
}

.defil {
  margin: 10px;
  position: relative;
  height: 20px;
  background-color: black;
  border: 1px solid black;
  overflow: hidden;
  text-align: center;
}

.defil div {
  position: absolute;
  top: 0;

  width: 250px;
  height: 20px;
  background-color: blue;
  opacity: 1;
}

.ex1 div {
  animation: defilement 20s linear infinite;
}

.ex2 div {
  top: 0;
  right: 0;
  background-color: white;
  animation: defilement 20s linear infinite reverse;
}

.ex3 div {
  background-color: red;
  animation: defilement 20s linear infinite;
}



  
    MANAGEMENT
  

  
    OF MY
  

  
    VIDEO LIBRARY

For more information on keyframes, take a look at Mozilla MDN Docs for CSS3 Keyframes

How to take a break during a CSS animation to pause at the center point of the transition?

1 Answers