尝试使用Animate.CSS仅滑动h3
(不是整个滑块)bounceInLeft
,但它仅适用于Chrome,Opera 但不适用于Firefox浏览器。
请参阅此Fiddle>在Chrome上,然后是Firefox。
CSS:
/******************
* Bounce in Left *
*******************/
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-1000px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-1000px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-1000px);
}
80% {
-moz-transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-o-keyframes bounceInLeft {
0% {
opacity: 0;
-o-transform: translateX(-1000px);
}
80% {
-o-transform: translateX(-10px);
}
100% {
-o-transform: translateX(0);
}
}
.animated.bounceInLeft {
-webkit-animation-name: bounceInLeft;
-moz-animation-name: bounceInLeft;
-o-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
/****************
* bounceInRight *
****************/
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(1000px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(1000px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(1000px);
}
80% {
-moz-transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-o-keyframes bounceInRight {
0% {
opacity: 0;
-o-transform: translateX(1000px);
}
80% {
-o-transform: translateX(10px);
}
100% {
-o-transform: translateX(0);
}
}
.animated.bounceInRight {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
-o-animation-name: bounceInRight;
animation-name: bounceInRight;
}
/* Description */
#headslide p {
-webkit-animation-name:bounceInRight;
-moz-animation-name:bounceInRight;
-o-animation-name:bounceInRight;
animation-name:bounceInRight;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-moz-animation-fill-mode:both;
animation-fill-mode:both;
box-shadow:0 1px 4px rgba(0,0,0,0.1);
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-moz-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-o-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-ms-box-shadow:0 1px 4px rgba(0,0,0,0.1);
margin:0;
}
/* Title */
#headslide h3 {
-webkit-animation-name:bounceInLeft;
-moz-animation-name:bounceInLeft;
-o-animation-name:bounceInLeft;
animation-name:bounceInLeft;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-moz-animation-fill-mode:both;
animation-fill-mode:both;
background: #fff;
font-size: 110%;
line-height: 1.4;
padding: 1% 2%;
margin: 0;
font-weight:normal;
text-transform:uppercase;
}
默认情况下,此Slider具有淡入淡出过渡,因此它显示Firefox上的淡入淡出过渡,而我的bounceInLeft/bounceInRight
关键帧仅适用于Chrome和Opera。
我只是试图滑动h3
,而不是整个滑块。
为什么Animate.css无法在Firefox上运行?我怎样才能解决这个问题?
是否可以使用jQuery解决这个问题?感谢。