Animate two difference segments in the same home page CSS-CodePudding

I am having two separated and different segments in my homepage that I am trying to animate.

Each one is animated in a different way. One is Horizontally and the other is vertically.

If I have the code for one only segment in my CSS file, the segment would work perfectly. Otherwise, when I add the code for the other segment everything doesn't work

This is the code for the first segment



@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 7));
            transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 7));
            transform: translateX(calc(-250px * 7));
  }
}
.crls {
  background: transparent;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.crls::before, .crls::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.crls::after {
  right: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
.crls::before {
  left: 0;
  top: 0;
}
.crls .crls1-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.crls .crls1 {
  height: 100px;
  width: 250px;
}

The code below is for the 2nd segment


@-webkit-keyframes master1-cnt-bg {
      0.0% {
          background-color: #F5C59C
      }
      3.7037037037037037% {
          background-color: #F5C59C
      }
      11.11111111111111% {
          background-color: #ECC9CB
      }
      14.814814814814815% {
          background-color: #ECC9CB
      }
      22.22222222222222% {
          background-color: #D9E2CB
      }
      25.925925925925927% {
          background-color: #D9E2CB
      }
      33.333333333333336% {
          background-color: #f6c599
      }
      37.03703703703704% {
          background-color: #f6c599
      }
      44.44444444444444% {
          background-color: #c4bbd3
      }
      48.148148148148145% {
          background-color: #c4bbd3
      }
      55.55555555555556% {
          background-color: #F9E7AF
      }
      59.25925925925926% {
          background-color: #F9E7AF
      }
      66.66666666666667% {
          background-color: #B4E2EE
      }
      70.37037037037037% {
          background-color: #B4E2EE
      }
      77.77777777777777% {
          background-color: #cbe5f4
      }
      81.48148148148148% {
          background-color: #cbe5f4
      }
      88.88888888888889% {
          background-color: #d2e7e2
      }
      92.5925925925926% {
          background-color: #d2e7e2
      }
      100.0% {
          background-color: #F5C59C
      }
  }

  @keyframes master1-cnt-bg {
      0.0% {
          background-color: #F5C59C
      }
      3.7037037037037037% {
          background-color: #F5C59C
      }
      11.11111111111111% {
          background-color: #ECC9CB
      }
      14.814814814814815% {
          background-color: #ECC9CB
      }
      22.22222222222222% {
          background-color: #D9E2CB
      }
      25.925925925925927% {
          background-color: #D9E2CB
      }
      33.333333333333336% {
          background-color: #f6c599
      }
      37.03703703703704% {
          background-color: #f6c599
      }
      44.44444444444444% {
          background-color: #c4bbd3
      }
      48.148148148148145% {
          background-color: #c4bbd3
      }
      55.55555555555556% {
          background-color: #F9E7AF
      }
      59.25925925925926% {
          background-color: #F9E7AF
      }
      66.66666666666667% {
          background-color: #B4E2EE
      }
      70.37037037037037% {
          background-color: #B4E2EE
      }
      77.77777777777777% {
          background-color: #cbe5f4
      }
      81.48148148148148% {
          background-color: #cbe5f4
      }
      88.88888888888889% {
          background-color: #d2e7e2
      }
      92.5925925925926% {
          background-color: #d2e7e2
      }
      100.0% {
          background-color: #F5C59C
      }
  }

  @-webkit-keyframes master1-cnt-bg-mobile {
      0.0% {
          background-color: #F5C59C
      }
      3.7037037037037037% {
          background-color: #F5C59C
      }
      11.11111111111111% {
          background-color: #ECC9CB
      }
      14.814814814814815% {
          background-color: #ECC9CB
      }
      22.22222222222222% {
          background-color: #D9E2CB
      }
      25.925925925925927% {
          background-color: #D9E2CB
      }
      33.333333333333336% {
          background-color: #f6c599
      }
      37.03703703703704% {
          background-color: #f6c599
      }
      44.44444444444444% {
          background-color: #c4bbd3
      }
      48.148148148148145% {
          background-color: #c4bbd3
      }
      55.55555555555556% {
          background-color: #F9E7AF
      }
      59.25925925925926% {
          background-color: #F9E7AF
      }
      66.66666666666667% {
          background-color: #B4E2EE
      }
      70.37037037037037% {
          background-color: #B4E2EE
      }
      77.77777777777777% {
          background-color: #cbe5f4
      }
      81.48148148148148% {
          background-color: #cbe5f4
      }
      88.88888888888889% {
          background-color: #d2e7e2
      }
      92.5925925925926% {
          background-color: #d2e7e2
      }
      100.0% {
          background-color: #F5C59C
      }
  }

  @keyframes master1-cnt-bg-mobile {
      0.0% {
          background-color: #F5C59C
      }
      3.7037037037037037% {
          background-color: #F5C59C
      }
      11.11111111111111% {
          background-color: #ECC9CB
      }
      14.814814814814815% {
          background-color: #ECC9CB
      }
      22.22222222222222% {
          background-color: #D9E2CB
      }
      25.925925925925927% {
          background-color: #D9E2CB
      }
      33.333333333333336% {
          background-color: #f6c599
      }
      37.03703703703704% {
          background-color: #f6c599
      }
      44.44444444444444% {
          background-color: #c4bbd3
      }
      48.148148148148145% {
          background-color: #c4bbd3
      }
      55.55555555555556% {
          background-color: #F9E7AF
      }
      59.25925925925926% {
          background-color: #F9E7AF
      }
      66.66666666666667% {
          background-color: #B4E2EE
      }
      70.37037037037037% {
          background-color: #B4E2EE
      }
      77.77777777777777% {
          background-color: #cbe5f4
      }
      81.48148148148148% {
          background-color: #cbe5f4
      }
      88.88888888888889% {
          background-color: #d2e7e2
      }
      92.5925925925926% {
          background-color: #d2e7e2
      }
      100.0% {
          background-color: #F5C59C
      }
  }

  @-webkit-keyframes scroll {
      0.0% {
          -webkit-transform: translateY(0px);
          transform: translateY(0px)
      }
      3.7037037037037037% {
          -webkit-transform: translateY(0px);
          transform: translateY(0px)
      }
      11.11111111111111% {
          -webkit-transform: translateY(-66px);
          transform: translateY(-66px)
      }
      14.814814814814815% {
          -webkit-transform: translateY(-66px);
          transform: translateY(-66px)
      }
      22.22222222222222% {
          -webkit-transform: translateY(-132px);
          transform: translateY(-132px)
      }
      25.925925925925927% {
          -webkit-transform: translateY(-132px);
          transform: translateY(-132px)
      }
      33.333333333333336% {
          -webkit-transform: translateY(-198px);
          transform: translateY(-198px)
      }
      37.03703703703704% {
          -webkit-transform: translateY(-198px);
          transform: translateY(-198px)
      }
      44.44444444444444% {
          -webkit-transform: translateY(-264px);
          transform: translateY(-264px)
      }
      48.148148148148145% {
          -webkit-transform: translateY(-264px);
          transform: translateY(-264px)
      }
      55.55555555555556% {
          -webkit-transform: translateY(-330px);
          transform: translateY(-330px)
      }
      59.25925925925926% {
          -webkit-transform: translateY(-330px);
          transform: translateY(-330px)
      }
      66.66666666666667% {
          -webkit-transform: translateY(-396px);
          transform: translateY(-396px)
      }
      70.37037037037037% {
          -webkit-transform: translateY(-396px);
          transform: translateY(-396px)
      }
      77.77777777777777% {
          -webkit-transform: translateY(-462px);
          transform: translateY(-462px)
      }
      81.48148148148148% {
          -webkit-transform: translateY(-462px);
          transform: translateY(-462px)
      }
      88.88888888888889% {
          -webkit-transform: translateY(-528px);
          transform: translateY(-528px)
      }
      92.5925925925926% {
          -webkit-transform: translateY(-528px);
          transform: translateY(-528px)
      }
      100.0% {
          -webkit-transform: translateY(-594px);
          transform: translateY(-594px)
      }
  }

  @keyframes scroll {
      0.0% {
          -webkit-transform: translateY(0px);
          transform: translateY(0px)
      }
      3.7037037037037037% {
          -webkit-transform: translateY(0px);
          transform: translateY(0px)
      }
      11.11111111111111% {
          -webkit-transform: translateY(-66px);
          transform: translateY(-66px)
      }
      14.814814814814815% {
          -webkit-transform: translateY(-66px);
          transform: translateY(-66px)
      }
      22.22222222222222% {
          -webkit-transform: translateY(-132px);
          transform: translateY(-132px)
      }
      25.925925925925927% {
          -webkit-transform: translateY(-132px);
          transform: translateY(-132px)
      }
      33.333333333333336% {
          -webkit-transform: translateY(-198px);
          transform: translateY(-198px)
      }
      37.03703703703704% {
          -webkit-transform: translateY(-198px);
          transform: translateY(-198px)
      }
      44.44444444444444% {
          -webkit-transform: translateY(-264px);
          transform: translateY(-264px)
      }
      48.148148148148145% {
          -webkit-transform: translateY(-264px);
          transform: translateY(-264px)
      }
      55.55555555555556% {
          -webkit-transform: translateY(-330px);
          transform: translateY(-330px)
      }
      59.25925925925926% {
          -webkit-transform: translateY(-330px);
          transform: translateY(-330px)
      }
      66.66666666666667% {
          -webkit-transform: translateY(-396px);
          transform: translateY(-396px)
      }
      70.37037037037037% {
          -webkit-transform: translateY(-396px);
          transform: translateY(-396px)
      }
      77.77777777777777% {
          -webkit-transform: translateY(-462px);
          transform: translateY(-462px)
      }
      81.48148148148148% {
          -webkit-transform: translateY(-462px);
          transform: translateY(-462px)
      }
      88.88888888888889% {
          -webkit-transform: translateY(-528px);
          transform: translateY(-528px)
      }
      92.5925925925926% {
          -webkit-transform: translateY(-528px);
          transform: translateY(-528px)
      }
      100.0% {
          -webkit-transform: translateY(-594px);
          transform: translateY(-594px)
      }
  }

  @-webkit-keyframes scroll-mobile {
      0.0% {
          -webkit-transform: translateY(0px);
          transform: translateY(0px)
      }
      3.7037037037037037% {
          -webkit-transform: translateY(0px);
          transform: translateY(0px)
      }
      11.11111111111111% {
          -webkit-transform: translateY(-48px);
          transform: translateY(-48px)
      }
      14.814814814814815% {
          -webkit-transform: translateY(-48px);
          transform: translateY(-48px)
      }
      22.22222222222222% {
          -webkit-transform: translateY(-96px);
          transform: translateY(-96px)
      }
      25.925925925925927% {
          -webkit-transform: translateY(-96px);
          transform: translateY(-96px)
      }
      33.333333333333336% {
          -webkit-transform: translateY(-144px);
          transform: translateY(-144px)
      }
      37.03703703703704% {
          -webkit-transform: translateY(-144px);
          transform: translateY(-144px)
      }
      44.44444444444444% {
          -webkit-transform: translateY(-192px);
          transform: translateY(-192px)
      }
      48.148148148148145% {
          -webkit-transform: translateY(-192px);
          transform: translateY(-192px)
      }
      55.55555555555556% {
          -webkit-transform: translateY(-240px);
          transform: translateY(-240px)
      }
      59.25925925925926% {
          -webkit-transform: translateY(-240px);
          transform: translateY(-240px)
      }
      66.66666666666667% {
          -webkit-transform: translateY(-288px);
          transform: translateY(-288px)
      }
      70.37037037037037% {
          -webkit-transform: translateY(-288px);
          transform: translateY(-288px)
      }
      77.77777777777777% {
          -webkit-transform: translateY(-336px);
          transform: translateY(-336px)
      }
      81.48148148148148% {
          -webkit-transform: translateY(-336px);
          transform: translateY(-336px)
      }
      88.88888888888889% {
          -webkit-transform: translateY(-384px);
          transform: translateY(-384px)
      }
      92.5925925925926% {
          -webkit-transform: translateY(-384px);
          transform: translateY(-384px)
      }
      100.0% {
          -webkit-transform: translateY(-432px);
          transform: translateY(-432px)
      }
  }

  @keyframes scroll-mobile {
      0.0% {
          -webkit-transform: translateY(0px);
          transform: translateY(0px)
      }
      3.7037037037037037% {
          -webkit-transform: translateY(0px);
          transform: translateY(0px)
      }
      11.11111111111111% {
          -webkit-transform: translateY(-48px);
          transform: translateY(-48px)
      }
      14.814814814814815% {
          -webkit-transform: translateY(-48px);
          transform: translateY(-48px)
      }
      22.22222222222222% {
          -webkit-transform: translateY(-96px);
          transform: translateY(-96px)
      }
      25.925925925925927% {
          -webkit-transform: translateY(-96px);
          transform: translateY(-96px)
      }
      33.333333333333336% {
          -webkit-transform: translateY(-144px);
          transform: translateY(-144px)
      }
      37.03703703703704% {
          -webkit-transform: translateY(-144px);
          transform: translateY(-144px)
      }
      44.44444444444444% {
          -webkit-transform: translateY(-192px);
          transform: translateY(-192px)
      }
      48.148148148148145% {
          -webkit-transform: translateY(-192px);
          transform: translateY(-192px)
      }
      55.55555555555556% {
          -webkit-transform: translateY(-240px);
          transform: translateY(-240px)
      }
      59.25925925925926% {
          -webkit-transform: translateY(-240px);
          transform: translateY(-240px)
      }
      66.66666666666667% {
          -webkit-transform: translateY(-288px);
          transform: translateY(-288px)
      }
      70.37037037037037% {
          -webkit-transform: translateY(-288px);
          transform: translateY(-288px)
      }
      77.77777777777777% {
          -webkit-transform: translateY(-336px);
          transform: translateY(-336px)
      }
      81.48148148148148% {
          -webkit-transform: translateY(-336px);
          transform: translateY(-336px)
      }
      88.88888888888889% {
          -webkit-transform: translateY(-384px);
          transform: translateY(-384px)
      }
      92.5925925925926% {
          -webkit-transform: translateY(-384px);
          transform: translateY(-384px)
      }
      100.0% {
          -webkit-transform: translateY(-432px);
          transform: translateY(-432px)
      }
  }

It seems to me that the issue is caused by '@-webkit-keyframes'

CodePudding user response：

You have two animations names the same way on the first and the 2nd segment:

@keyframes scroll. Try changing the name of one of them to scroll_two or anything. Ps:im new sorry if this doesnt help

CodePudding user response：

The solution here was to change the name of the @-webkit-keyframes for the first segment and enter the same name in the animation function