如何使用 PURE CSS 创建 CSS3 反弹效果

Question

我正在尝试使用纯 CSS 在 IMAGES 动画结束时创建弹跳效果，但我有 3 张图像，我想为每张图像添加不同时间格式的弹跳效果。由于我的 CSS 仅适用于一张图片，因此如何更改此 CSS 的格式？

请指教

这是我目前的情况：

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

<ul class="clearfix">
  <div id="ubercontainer">
    <div id="container">

      <img src="../images/sideGAME1.jpg" / class="sideGMimg5">
      <li class="bounce animated ">
        <img src="../images/sideGAME2.jpg " / class="sideGMimg1 ">
        <span class="Jacpots_1">Major Millions</span>
        <br />
        <span id="firstword" class="introchange1"> 231 515.23</span> 
      </li>
      <li class="bounce2 animated2">
        <img src="../images/sideGAME3.jpg" / class="sideGMimg2">
        <span class="Jacpots_2 ">Mega Moolah</span>
        <br />
        <span id="secondword " class="introchange2 "> 231 515.23</span> 
      </li>
      <li class="bounce3 animated3 ">
        <img src="../images/sideGAME4.jpg " / class="sideGMimg3 ">
        <span class="Jacpots_3">Mega Moolah Isis</span>
        <br />
        <span id="thirdword" class="introchange3"> 231 515.23</span> 
      </li>
    </div>
  </div>

  <!-- <span class="Jacpots_1">abc</span> -->
</ul>

Answer 1

在不同时间弹跳图像：

添加具有 class bounce、bounce2 和 bounce3 的元素。我的代码片段中的 CSS 有反弹效果的动画延迟。

如果要去掉无限动画，只需将infinite字改为linear即可。

我已经使用了你的代码作为示例：

img {
  width: 50px;
}
.bounce {
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  -moz-animation: bounce 2s infinite;
  -o-animation: bounce 2s infinite;
}
.bounce2 {
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  -moz-animation: bounce 2s infinite;
  -o-animation: bounce 2s infinite;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.bounce3 {
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  -moz-animation: bounce 2s infinite;
  -o-animation: bounce 2s infinite;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
  }
}
@-o-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -o-transform: translateY(0);
  }
  40% {
    -o-transform: translateY(-30px);
  }
  60% {
    -o-transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

<ul class="clearfix">
  <div id="ubercontainer">
    <div id="container">

      <img src="../images/sideGAME1.jpg" / class="sideGMimg5 bounce">

      <li class="bounce animated ">
        <img src="../images/sideGAME2.jpg " / class="sideGMimg1 ">
        <span class="Jacpots_1">Major Millions</span>
        <br />
        <span id="firstword" class="introchange1"> 231 515.23</span> 
      </li>

      <li class="bounce2 animated2">
        <img src="../images/sideGAME3.jpg" / class="sideGMimg2">
        <span class="Jacpots_2 ">Mega Moolah</span>
        <br />
        <span id="secondword " class="introchange2 "> 231 515.23</span> 
      </li>

      <li class="bounce3 animated3 ">
        <img src="../images/sideGAME4.jpg " / class="sideGMimg3">
        <span class="Jacpots_3">Mega Moolah Isis</span>
        <br />
        <span id="thirdword" class="introchange3"> 231 515.23</span> 
      </li>
    </div>
  </div>

  <!-- <span class="Jacpots_1">abc</span> -->
</ul>

Answer 2

对所有 li 和不同的 animated class 使用单个 bounce class，例如 animated1, animated2, animated3，然后使用 animation-delay 对于 animated2 和 animated3 :

根据您的代码查看示例：

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.animated1 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated2 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.animated3 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

<ul class="clearfix">
  <div id="ubercontainer">
    <div id="container">

      <img src="../images/sideGAME1.jpg" / class="sideGMimg5">
      <li class="bounce animated1 ">
        <img src="../images/sideGAME2.jpg " / class="sideGMimg1 ">
        <span class="Jacpots_1">Major Millions</span>
        <br />
        <span id="firstword" class="introchange1"> 231 515.23</span>
      </li>
      <li class="bounce animated2">
        <img src="../images/sideGAME3.jpg" / class="sideGMimg2">
        <span class="Jacpots_2 ">Mega Moolah</span>
        <br />
        <span id="secondword " class="introchange2 "> 231 515.23</span>
      </li>
      <li class="bounce animated3 ">
        <img src="../images/sideGAME4.jpg " / class="sideGMimg3 ">
        <span class="Jacpots_3">Mega Moolah Isis</span>
        <br />
        <span id="thirdword" class="introchange3"> 231 515.23</span>
      </li>
    </div>
  </div>

  <!-- <span class="Jacpots_1">abc</span> -->
</ul>

如何使用 PURE CSS 创建 CSS3 反弹效果

How to create CSS3 bounce effect with PURE CSS

css

bounce