如何使用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>