How do you fix the sss animation?



  • Hi.

    Can you tell me how to fix the sss animation right?

    Three pictures change each other by turning Y. The problem is, at the end, a dramatic return to the beginning of the cycle, i.e. animation just starts at the beginning, and we have to do a "pet."

    For convenience codepen - http://codepen.io/Andrey-m/pen/bpRwEe

    If you see it, it's all clear, pay attention to the slide after the third slide's animation, it's going to be like a jump at the beginning.

    .banner {
      width: 300px;
      height: 143px;
      border: 1px solid red;
      margin: 30px auto;
      position: relative;
    }
    .position {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      text-align: center;
      padding: 35px 15px;
    }
    h2 {
      font-size: 26px;
      background-color: pink;
    }
    .side1 {
      animation: rotate 5s infinite linear;
      -webkit-animation: rotate 5s infinite linear;
    }
    @-webkit-keyframes rotate {
      0% {
        -webkit-transform: rotateY(0deg);
      }
      20% {
        -webkit-transform: rotateY(0deg);
      }
      30% {
        -webkit-transform: rotateY(90deg);
      }
      40% {
        -webkit-transform: rotateY(90deg);
      }
      60% {
        -webkit-transform: rotateY(90deg);
      }
      80% {
        -webkit-transform: rotateY(90deg);
      }
      100% {
        -webkit-transform: rotateY(90deg);
      }
    }
    @keyframes rotate {
      0% {
        -webkit-transform: rotateY(0deg);
      }
      20% {
        -webkit-transform: rotateY(0deg);
      }
      30% {
        -webkit-transform: rotateY(90deg);
      }
      40% {
        -webkit-transform: rotateY(90deg);
      }
      60% {
        -webkit-transform: rotateY(90deg);
      }
      80% {
        -webkit-transform: rotateY(90deg);
      }
      100% {
        -webkit-transform: rotateY(90deg);
      }
    }
    .side2 {
      animation: rotate2 5s infinite linear;
      -webkit-animation: rotate2 5s infinite linear;
    }
    @-webkit-keyframes rotate2 {
      0% {
        -webkit-transform: rotateY(90deg);
      }
      20% {
        -webkit-transform: rotateY(90deg);
      }
      30% {
        -webkit-transform: rotateY(90deg);
      }
      40% {
        -webkit-transform: rotateY(0deg);
      }
      60% {
        -webkit-transform: rotateY(0deg);
      }
      70% {
        -webkit-transform: rotateY(90deg);
      }
      80% {
        -webkit-transform: rotateY(90deg);
      }
      100% {
        -webkit-transform: rotateY(90deg);
      }
    }
    @keyframes rotate2 {
      0% {
        -webkit-transform: rotateY(90deg);
      }
      20% {
        -webkit-transform: rotateY(90deg);
      }
      30% {
        -webkit-transform: rotateY(90deg);
      }
      40% {
        -webkit-transform: rotateY(0deg);
      }
      60% {
        -webkit-transform: rotateY(0deg);
      }
      70% {
        -webkit-transform: rotateY(90deg);
      }
      80% {
        -webkit-transform: rotateY(90deg);
      }
      100% {
        -webkit-transform: rotateY(90deg);
      }
    }
    .side3 {
      animation: rotate3 5s infinite linear;
      -webkit-animation: rotate3 5s infinite linear;
    }
    @keyframes rotate3 {
      0% {
        -webkit-transform: rotateY(90deg);
      }
      0% {
        -webkit-transform: rotateY(90deg);
      }
      20% {
        -webkit-transform: rotateY(90deg);
      }
      40% {
        -webkit-transform: rotateY(90deg);
      }
      60% {
        -webkit-transform: rotateY(90deg);
      }
      70% {
        -webkit-transform: rotateY(90deg);
      }
      80% {
        -webkit-transform: rotateY(0deg);
      }
      100% {
        -webkit-transform: rotateY(0deg);
      }
    }
    @-webkit-keyframes rotate3 {
      0% {
        -webkit-transform: rotateY(90deg);
      }
      0% {
        -webkit-transform: rotateY(90deg);
      }
      20% {
        -webkit-transform: rotateY(90deg);
      }
      40% {
        -webkit-transform: rotateY(90deg);
      }
      60% {
        -webkit-transform: rotateY(90deg);
      }
      70% {
        -webkit-transform: rotateY(90deg);
      }
      80% {
        -webkit-transform: rotateY(0deg);
      }
      100% {
        -webkit-transform: rotateY(0deg);
      }
    }
    <div class="banner">
      <div class="side1 position">
        <h2>1111111111111111</h2>
      </div>
      <div class="side2 position">
        <h2>2222222222222222</h2>
      </div>
      <div class="side3 position">
        <h2>3333333333333333</h2>
      </div>
    </div>

    Thank you!



  • The problem was, you had an incorrect logic of animation. The final position of animation and primary need to match what you didn't have. The following example illustrates the exemplary logic of the calculation for these animations. Next on your own... ♪

    .banner {
      width: 300px;
      height: 143px;
      border: 1px solid red;
      margin: 30px auto;
      position: relative;
    }
    

    .position {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    text-align: center;
    padding: 35px 15px;
    }

    h2 {
    font-size: 26px;
    background-color: pink;
    }

    .side1 {
    animation: rotate 5s infinite linear;
    -webkit-animation: rotate 5s infinite linear;
    }
    @-webkit-keyframes rotate {
    0% {
    -webkit-transform: rotateY(0deg);
    }
    16.6% {
    -webkit-transform: rotateY(90deg);
    }
    33.2% {
    -webkit-transform: rotateY(90deg);
    }
    49.8% {
    -webkit-transform: rotateY(90deg);
    }
    66.4% {
    -webkit-transform: rotateY(90deg);
    }
    83.0% {
    -webkit-transform: rotateY(90deg);
    }
    99.6% {
    -webkit-transform: rotateY(0deg);
    }
    }
    @keyframes rotate {
    0% {
    -webkit-transform: rotateY(0deg);
    }
    16.6% {
    -webkit-transform: rotateY(90deg);
    }
    33.2% {
    -webkit-transform: rotateY(90deg);
    }
    49.8% {
    -webkit-transform: rotateY(90deg);
    }
    66.4% {
    -webkit-transform: rotateY(90deg);
    }
    83.0% {
    -webkit-transform: rotateY(90deg);
    }
    99.6% {
    -webkit-transform: rotateY(0deg);
    }
    }
    .side2 {
    animation: rotate2 5s infinite linear;
    -webkit-animation: rotate2 5s infinite linear;
    }
    @-webkit-keyframes rotate2 {
    0% {
    -webkit-transform: rotateY(90deg);
    }
    16.6% {
    -webkit-transform: rotateY(90deg);
    }
    33.2% {
    -webkit-transform: rotateY(0deg);
    }
    49.8% {
    -webkit-transform: rotateY(90deg);
    }
    66.4% {
    -webkit-transform: rotateY(90deg);
    }
    83.0% {
    -webkit-transform: rotateY(90deg);
    }
    99.6% {
    -webkit-transform: rotateY(90deg);
    }
    }
    @keyframes rotate2 {
    0% {
    -webkit-transform: rotateY(90deg);
    }
    16.6% {
    -webkit-transform: rotateY(90deg);
    }
    33.2% {
    -webkit-transform: rotateY(0deg);
    }
    49.8% {
    -webkit-transform: rotateY(90deg);
    }
    66.4% {
    -webkit-transform: rotateY(90deg);
    }
    83.0% {
    -webkit-transform: rotateY(90deg);
    }
    99.6% {
    -webkit-transform: rotateY(90deg);
    }
    }
    .side3 {
    animation: rotate3 5s infinite linear;
    -webkit-animation: rotate3 5s infinite linear;
    }
    @keyframes rotate3 {
    0% {
    -webkit-transform: rotateY(90deg);
    }
    16.6% {
    -webkit-transform: rotateY(90deg);
    }
    33.2% {
    -webkit-transform: rotateY(90deg);
    }
    49.8% {
    -webkit-transform: rotateY(90deg);
    }
    66.4% {
    -webkit-transform: rotateY(0deg);
    }
    83.0% {
    -webkit-transform: rotateY(90deg);
    }
    99.6% {
    -webkit-transform: rotateY(90deg);
    }
    }
    @-webkit-keyframes rotate3 {
    0% {
    -webkit-transform: rotateY(90deg);
    }
    16.6% {
    -webkit-transform: rotateY(90deg);
    }
    33.2% {
    -webkit-transform: rotateY(90deg);
    }
    49.8% {
    -webkit-transform: rotateY(90deg);
    }
    66.4% {
    -webkit-transform: rotateY(0deg);
    }
    83.0% {
    -webkit-transform: rotateY(90deg);
    }
    99.6% {
    -webkit-transform: rotateY(90deg);
    }
    }

          <div class="banner">
    <div class="side1 position">
    <h2>1111111111111111</h2>
    </div>
    <div class="side2 position">
    <h2>2222222222222222</h2>
    </div>
    <div class="side3 position">
    <h2>3333333333333333</h2>
    </div>
    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2