如何使用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">$6 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 ">$6 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">$6 231 515.23</span> 
 
     </li> 
 
    </div> 
 
    </div> 
 

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

Answer 1

在不同的时间弹跳图片：

与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">$6 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 ">$6 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">$6 231 515.23</span> 
 
     </li> 
 
    </div> 
 
    </div> 
 

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

Answer 2

转到此链接，在那里你会找到如何创建它。 http://www.tutorialspoint.com/css/css_animation_bounce.htm

Answer 3

使用单一bounce类所有li和不同animated类像animated1, animated2, animated3然后用animation-delay为animated2和animated3：

查看根据你的例子c下面的颂歌：

@-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">$6 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 ">$6 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">$6 231 515.23</span> 
 
     </li> 
 
    </div> 
 
    </div> 
 

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