Any idea how to solve fast animating background picture-CodePudding

This is my css code for the animating background, but its too fast, everything happens in like a second. please can somebody help me any ideas how to fix that. I'm quite new here

    .one{ 
animation: changeBg 1s infinite; 
width:100%; 
height:450px; }

    @keyframes changeBg{
     0%,100%  {background-image: url("../project1/img/hero1.jpg");
    }
    25% {
       background-image: url("../project1/img/hero2.jpg");
     }
    50% {
       background-image: url("../project1/img/hero3.jpg");
     }
    75% {
        background-image: url("../project1/img/hero4.jpg");
     }

CodePudding user response：

.one{ 
  animation: changeBg 3s infinite; 
  width:100%; /*      ^^^^ */
  height:450px; 
}

Change 1s to whatever duration you want

Can either be in seconds (s), or milliseconds (ms)
W3 Schools: animation-duration

CodePudding user response：

the 1s in animation: changeBg 1s infinite; is your timing. You can increase that and additionally you can add animation timing function like ease, linear...etc