我正在尝试使用纯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>
在不同时间弹跳图像:
添加元素带班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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句