How do I get the orange background to change to blue faster?-CodePudding

Animation occurs after clicking on the play button.

Currently it takes forever for the orange background to change to blue.

How do I have it occur faster?

.video-one {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      transition: all 8s ease-in 0s;
      transition-delay: 2s;
      background: orange;
      background-position: 0 0;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 1;
      animation: fadeInImage 2s ease-in 2s forwards;
      opacity: 0;
    }
    
    @keyframes fadeInImage {
      to {
        opacity: 1;
      }
    }
    
    .slide .video-one {
      background: blue;
      background-position: 0 0;
      animation: fadeInImage2 1ms ease 0s forwards;
      opacity: 0;
    }
    
    @keyframes fadeInImage2 {
      to {
        opacity: 1;
      }
    }

CodePudding user response：

It is because the animation duration is controlled by the transition that you have defined in .video-one class.

Try this

.video-one {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      transition: all 0.5s ease-in 0s;
      transition-delay: 2s;
      background: orange;
      background-position: 0 0;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 1;
      animation: fadeInImage 2s ease-in 2s forwards;
      opacity: 0;
    }

You'll see that the whole animation will go faster. If you want the curtain to go up slowly but the background to change quickly you will have to define different animations for the different properties.