@charset "UTF-8";
/*fadeOpacity 从隐藏到显示*/
@-webkit-keyframes fadeOpacity { 0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fadeOpacity { 0% {
opacity:0
}
100% {
opacity:1
}
}
.fadeOpacity { -webkit-animation-name:fadeOpacity; animation-name:fadeOpacity }
/*fadeInLeft 从左往右短距离滑动并从隐藏到显示*/
@-webkit-keyframes fadeInLeft { 0% {
opacity:0;
-webkit-transform:translate3d(-30px, 0, 0);
transform:translate3d(-30px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeft { 0% {
opacity:0;
-webkit-transform:translate3d(-30px, 0, 0);
-ms-transform:translate3d(-30px, 0, 0);
transform:translate3d(-30px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.fadeInLeft { -webkit-animation-name:fadeInLeft; animation-name:fadeInLeft }
/*fadeInRight 从右往左短距离滑动并从隐藏到显示*/
@-webkit-keyframes fadeInRight { 0% {
opacity:0;
-webkit-transform:translate3d(30px, 0, 0);
transform:translate3d(30px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInRight { 0% {
opacity:0;
-webkit-transform:translate3d(30px, 0, 0);
-ms-transform:translate3d(30px, 0, 0);
transform:translate3d(30px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.fadeInRight { -webkit-animation-name:fadeInRight; animation-name:fadeInRight }
/*fadeInUp 从下往上短距离滑动并从隐藏到显示*/
@-webkit-keyframes fadeInUp { 0% {
opacity:0;
-webkit-transform:translate3d(0, 30px, 0);
transform:translate3d(0, 30px, 0)
}
100% {
opacity:0.9;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInUp { 0% {
opacity:0;
-webkit-transform:translate3d(0, 30px, 0);
-ms-transform:translate3d(0, 30px, 0);
transform:translate3d(0, 30px, 0)
}
100% {
opacity:0.9;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.fadeInUp { -webkit-animation-name:fadeInUp; animation-name:fadeInUp }