css3常用动画样式文件move.css
move.css
zoomIn zoomInDown
outer-circle
arrowTop
expandOpen
fadeIn fadeInNormal fadeInUp fadeInRight fadeInDown fadeInLeft
moveDown 上往下进入 moveUp 由下往上进入 moveLeft 由右往左进入 moveRight由左往 右进入
rotateIn 旋转进入 rotateInDownLeft 左下角切入 rotateInDownRight 右下角切入 reverseRotataZ
flipInY 弹性 flipInX
lightSpeedIn 由右向左进入，
slideDown 由上向下进入 slideUp slideLeft slideRight
pullUp 由中间上下折叠展开 pullDown
stretchLeft 中间向两边展开 stretchRight
@keyframes outer-circle {
0% {
transform: scale(1)
}
50% {
transform: scale(.8)
}
100%{
transform: scale(1)
}
}
@-webkit-keyframes outer-circle {
0% {
-webkit-transform: scale(1)
}
50% {
-webkit-transform: scale(.8)
}
100% {
-webkit-transform: scale(1)
}
}
@keyframes arrowTop{
0%{-webkit-transform: translate(0,42px); opacity: 0;}
60%{-webkit-transform: translate(0,12px); opacity: 1;}
100%{-webkit-transform: translate(0,0); opacity: 0;}
}
@-webkit-keyframes arrowTop{
0%{-webkit-transform: translate(0,42px); opacity: 0;}
60%{-webkit-transform: translate(0,12px); opacity: 1;}
100%{-webkit-transform: translate(0,0); opacity: 0;}
}
.animated { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3) translateZ(0); transform: scale3d(0.3, 0.3, 0.3) translateZ(0); } 50% { opacity: 1; } } @-moz-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3) translateZ(0); -moz-transform: scale3d(0.3, 0.3, 0.3) translateZ(0); transform: scale3d(0.3, 0.3, 0.3) translateZ(0); } 50% { opacity: 1; } } @-o-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3) translateZ(0); transform: scale3d(0.3, 0.3, 0.3) translateZ(0); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3) translateZ(0); -moz-transform: scale3d(0.3, 0.3, 0.3) translateZ(0); transform: scale3d(0.3, 0.3, 0.3) translateZ(0); } 50% { opacity: 1; } } .animated.zoomIn { -webkit-animation-name: zoomIn; -moz-animation-name: zoomIn; -o-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDownfeiji { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(300px, -500px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.55, 0.675, 1); } 60% { opacity: 1; } 100% { -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } } @-moz-keyframes zoomInDownfeiji { 0% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(300px, -500px, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.55, 0.675, 1); } 60% { opacity: 1; } 100% { -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } } @-o-keyframes zoomInDownfeiji { 0% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(300px, -500px, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.55, 0.675, 1); } 60% { opacity: 1; } 100% { -o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } } @keyframes zoomInDownfeiji { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(300px, -500px, 0); animation-timing-function: cubic-bezier(0.55, 0.55, 0.675, 1); } 60% { opacity: 1; } 100% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animated.zoomInDown { -webkit-animation-name: zoomInDown; -moz-animation-name: zoomInDown; -o-animation-name: zoomInDown; animation-name: zoomInDown; } @-moz-keyframes expandOpen { 0% { opacity: 0; -moz-transform: scale(1.8) translateZ(0); transform: scale(1.8) translateZ(0); } 50% { opacity: 1; -moz-transform: scale(0.95) translateZ(0); transform: scale(0.95) translateZ(0); } 80% { -moz-transform: scale(1.05) translateZ(0); transform: scale(1.05) translateZ(0); } 90% { -moz-transform: scale(0.98) translateZ(0); transform: scale(0.98) translateZ(0); } 100% { -moz-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); } } @-o-keyframes expandOpen { 0% { opacity: 0; transform: scale(1.8) translateZ(0); } 50% { opacity: 1; transform: scale(0.95) translateZ(0); } 80% { transform: scale(1.05) translateZ(0); } 90% { transform: scale(0.98) translateZ(0); } 100% { transform: scale(1) translateZ(0); } } @keyframes expandOpen { 0% { opacity: 0; -webkit-transform: scale(1.8) translateZ(0); -moz-transform: scale(1.8) translateZ(0); transform: scale(1.8) translateZ(0); } 50% { opacity: 1; -webkit-transform: scale(0.95) translateZ(0); -moz-transform: scale(0.95) translateZ(0); transform: scale(0.95) translateZ(0); } 80% { -webkit-transform: scale(1.05) translateZ(0); -moz-transform: scale(1.05) translateZ(0); transform: scale(1.05) translateZ(0); } 90% { -webkit-transform: scale(0.98) translateZ(0); -moz-transform: scale(0.98) translateZ(0); transform: scale(0.98) translateZ(0); } 100% { -webkit-transform: scale(1) translateZ(0); -moz-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); } } @-webkit-keyframes expandOpen { 0% { opacity: 0; -webkit-transform: scale(1.8) translateZ(0); } 50% { opacity: 1; -webkit-transform: scale(0.95) translateZ(0); } 80% { -webkit-transform: scale(1.05) translateZ(0); } 90% { -webkit-transform: scale(0.98) translateZ(0); } 100% { -webkit-transform: scale(1) translateZ(0); } } .animated.expandOpen { -moz-animation-name: expandOpen; -o-animation-name: expandOpen; animation-name: expandOpen; -webkit-animation-name: expandOpen; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; } @-moz-keyframes fadeInNormal { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeInNormal { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInNormal { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInNormal { 0% { opacity: 0; } 100% { opacity: 1; } } /* ============================================== fadeIn ============================================== */ .animated.fadeIn { -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-name: fadeIn; -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @-moz-keyframes fadeIn { 0% { -moz-transform: scale(0) translateZ(0); transform: scale(0) translateZ(0); opacity: 0; } 60% { -moz-transform: scale(1.1) translateZ(0); transform: scale(1.1) translateZ(0); opacity: 1; } 80% { -moz-transform: scale(0.9) translateZ(0); transform: scale(0.9) translateZ(0); opacity: 1; } 100% { -moz-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); opacity: 1; } } @-o-keyframes fadeIn { 0% { transform: scale(0) translateZ(0); opacity: 0; } 60% { transform: scale(1.1) translateZ(0); opacity: 1; } 80% { transform: scale(0.9) translateZ(0); opacity: 1; } 100% { transform: scale(1) translateZ(0); opacity: 1; } } @keyframes fadeIn { 0% { -webkit-transform: scale(0) translateZ(0); -moz-transform: scale(0) translateZ(0); transform: scale(0) translateZ(0); opacity: 0; } 60% { -webkit-transform: scale(1.1) translateZ(0); -moz-transform: scale(1.1) translateZ(0); transform: scale(1.1) translateZ(0); opacity: 1; } 80% { -webkit-transform: scale(0.9) translateZ(0); -moz-transform: scale(0.9) translateZ(0); transform: scale(0.9) translateZ(0); opacity: 1; } 100% { -webkit-transform: scale(1) translateZ(0); -moz-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0) translateZ(0); opacity: 0; } 60% { -webkit-transform: scale(1.1) translateZ(0); opacity: 1; } 80% { -webkit-transform: scale(0.9) translateZ(0); opacity: 1; } 100% { -webkit-transform: scale(1) translateZ(0); opacity: 1; } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animated.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animated.fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animated.fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animated.fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } /* ============================================== moveDown ============================================== */ .animated.moveDown { -moz-animation-name: moveDown; -o-animation-name: moveDown; animation-name: moveDown; -webkit-animation-name: moveDown; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @-moz-keyframes moveDown { 0% { opacity: 0; -moz-transform: translateY(-100%); transform: translateY(-100%); } 100% { opacity: 1; -moz-transform: translateY(0%); transform: translateY(0%); } } @-o-keyframes moveDown { 0% { opacity: 0; -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { opacity: 1; -o-transform: translateY(0%); transform: translateY(0%); } } @keyframes moveDown { 0% { opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes moveDown { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0%); } } /* ============================================== moveUp ============================================== */ @-moz-keyframes moveUp { 0% { opacity: 0; -moz-transform: translateY(100%); transform: translateY(100%); } 100% { opacity: 1; -moz-transform: translateY(0%); transform: translateY(0%); } } @-o-keyframes moveUp { 0% { opacity: 0; -o-transform: translateY(100%); transform: translateY(100%); } 100% { opacity: 1; -o-transform: translateY(0%); transform: translateY(0%); } } @keyframes moveUp { 0% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes moveUp { 0% { opacity: 0; -webkit-transform: translateY(100%); } 100% { opacity: 1; -webkit-transform: translateY(0%); } } /* ============================================== moveLeft ============================================== */ .animated.moveLeft { -moz-animation-name: moveLeft; -o-animation-name: moveLeft; animation-name: moveLeft; -webkit-animation-name: moveLeft; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @-moz-keyframes moveLeft { 0% { opacity: 0; -moz-transform: translateX(150%); transform: translateX(150%); } 100% { opacity: 1; -moz-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes moveLeft { 0% { opacity: 0; -o-transform: translateX(150%); transform: translateX(150%); } 100% { opacity: 1; -o-transform: translateX(0%); transform: translateX(0%); } } @keyframes moveLeft { 0% { opacity: 0; -webkit-transform: translateX(150%); -moz-transform: translateX(150%); -o-transform: translateX(150%); transform: translateX(150%); } 100% { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes moveLeft { 0% { opacity: 0; -webkit-transform: translateX(150%); } 100% { opacity: 1; -webkit-transform: translateX(0%); } } /* ============================================== moveRight ============================================== */ .animated.moveRight { -moz-animation-name: moveRight; -o-animation-name: moveRight; animation-name: moveRight; -webkit-animation-name: moveRight; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @-moz-keyframes moveRight { 0% { opacity: 0; -moz-transform: translateX(-150%); transform: translateX(-150%); } 100% { opacity: 1; -moz-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes moveRight { 0% { opacity: 0; -o-transform: translateX(-150%); transform: translateX(-150%); } 100% { opacity: 1; -o-transform: translateX(0%); transform: translateX(0%); } } @keyframes moveRight { 0% { opacity: 0; -webkit-transform: translateX(-150%); -moz-transform: translateX(-150%); -o-transform: translateX(-150%); transform: translateX(-150%); } 100% { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes moveRight { 0% { opacity: 0; -webkit-transform: translateX(-150%); } 100% { opacity: 1; -webkit-transform: translateX(0%); } } @-webkit-keyframes rotateIn { from { opacity: 0; -webkit-transform: rotate(-220deg); } to { opacity: 1; -webkit-transform: rotate(0deg); } } @-moz-keyframes rotateIn { from { opacity: 0; -moz-transform: rotate(-220deg); } to { opacity: 1; -moz-transform: rotate(0deg); } } @-o-keyframes rotateIn { from { opacity: 0; -o-transform: rotate(-220deg); } to { opacity: 1; -o-transform: rotate(0deg); } } @keyframes rotateIn { from { opacity: 0; -webkit-transform: rotate(-220deg); -moz-transform: rotate(-220deg); -o-transform: rotate(-220deg); transform: rotate(-220deg); } to { opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } .animated.rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg) translateZ(0); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0) translateZ(0); opacity: 1; } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg) translateZ(0); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0) translateZ(0); opacity: 1; } } @-o-keyframes rotateInDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg) translateZ(0); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0) translateZ(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg) translateZ(0); -moz-transform: rotate(-90deg) translateZ(0); transform: rotate(-90deg) translateZ(0); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0) translateZ(0); -moz-transform: rotate(0) translateZ(0); transform: rotate(0) translateZ(0); opacity: 1; } } .animated.rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg) translateZ(0); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0) translateZ(0); opacity: 1; } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg) translateZ(0); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0) translateZ(0); opacity: 1; } } @-o-keyframes rotateInDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(90deg) translateZ(0); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0) translateZ(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg) translateZ(0); -moz-transform: rotate(90deg) translateZ(0); transform: rotate(90deg) translateZ(0); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0) translateZ(0); -moz-transform: rotate(0) translateZ(0); transform: rotate(0) translateZ(0); opacity: 1; } } .animated.rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg) translateZ(0); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg) translateZ(0); } 70% { -webkit-transform: perspective(400px) rotateY(10deg) translateZ(0); } 100% { -webkit-transform: perspective(400px) rotateY(0deg) translateZ(0); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg) translateZ(0); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg) translateZ(0); } 70% { -moz-transform: perspective(400px) rotateY(10deg) translateZ(0); } 100% { -moz-transform: perspective(400px) rotateY(0deg) translateZ(0); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg) translateZ(0); opacity: 0; } 40% { -o-transform: perspective(400px) rotateY(-10deg) translateZ(0); } 70% { -o-transform: perspective(400px) rotateY(10deg) translateZ(0); } 100% { -o-transform: perspective(400px) rotateY(0deg) translateZ(0); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg) translateZ(0); -moz-transform: perspective(400px) rotateY(90deg) translateZ(0); transform: perspective(400px) rotateY(90deg) translateZ(0); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg) translateZ(0); -moz-transform: perspective(400px) rotateY(-10deg) translateZ(0); transform: perspective(400px) rotateY(-10deg) translateZ(0); } 70% { -webkit-transform: perspective(400px) rotateY(10deg) translateZ(0); -moz-transform: perspective(400px) rotateY(10deg) translateZ(0); transform: perspective(400px) rotateY(10deg) translateZ(0); } 100% { -webkit-transform: perspective(400px) rotateY(0deg) translateZ(0); -moz-transform: perspective(400px) rotateY(0deg) translateZ(0); transform: perspective(400px) rotateY(0deg) translateZ(0); opacity: 1; } } .animated.flipInY { -o-backface-visibility: visible !important; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-animation-name: flipInY; -o-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .animated.flipInX { -o-backface-visibility: visible !important; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-animation-name: flipInX; -o-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-moz-keyframes lightSpeedIn { 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-o-keyframes lightSpeedIn { 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .animated.lightSpeedIn { -webkit-animation-name: lightSpeedIn; -moz-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animated.lightSpeedIn { -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; } /* ============================================== slideDown ============================================== */ /*.animated.slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; } */ @-moz-keyframes slideDown { 0% { opacity: 0; -moz-transform: translateY(-100%) translateZ(0); transform: translateY(-100%) translateZ(0); } 50% { opacity: 1; -moz-transform: translateY(8%); transform: translateY(8%); } 65% { -moz-transform: translateY(-4%); transform: translateY(-4%); } 80% { -moz-transform: translateY(4%); transform: translateY(4%); } 95% { -moz-transform: translateY(-2%); transform: translateY(-2%); } 100% { -moz-transform: translateY(0%); transform: translateY(0%); } } @-o-keyframes slideDown { 0% { opacity: 0; transform: translateY(-100%) translateZ(0); } 50% { opacity: 1; -o-transform: translateY(8%); transform: translateY(8%); } 65% { -o-transform: translateY(-4%); transform: translateY(-4%); } 80% { -o-transform: translateY(4%); transform: translateY(4%); } 95% { -o-transform: translateY(-2%); transform: translateY(-2%); } 100% { -o-transform: translateY(0%); transform: translateY(0%); } } @keyframes slideDown { 0% { opacity: 0; -webkit-transform: translateY(-100%) translateZ(0); -moz-transform: translateY(-100%) translateZ(0); transform: translateY(-100%) translateZ(0); } 50% { opacity: 1; -webkit-transform: translateY(8%); -moz-transform: translateY(8%); -o-transform: translateY(8%); transform: translateY(8%); } 65% { -webkit-transform: translateY(-4%); -moz-transform: translateY(-4%); -o-transform: translateY(-4%); transform: translateY(-4%); } 80% { -webkit-transform: translateY(4%); -moz-transform: translateY(4%); -o-transform: translateY(4%); transform: translateY(4%); } 95% { -webkit-transform: translateY(-2%); -moz-transform: translateY(-2%); -o-transform: translateY(-2%); transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 50% { opacity: 1; -webkit-transform: translateY(8%); } 65% { -webkit-transform: translateY(-4%); } 80% { -webkit-transform: translateY(4%); } 95% { -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideUp ============================================== */ .animated.slideUp { -moz-animation-name: slideUp; -o-animation-name: slideUp; animation-name: slideUp; -webkit-animation-name: slideUp; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @-moz-keyframes slideUp { 0% { opacity: 0; -moz-transform: translateY(100%); transform: translateY(100%); } 50% { opacity: 1; -moz-transform: translateY(-8%); transform: translateY(-8%); } 65% { -moz-transform: translateY(4%); transform: translateY(4%); } 80% { -moz-transform: translateY(-4%); transform: translateY(-4%); } 95% { -moz-transform: translateY(2%); transform: translateY(2%); } 100% { -moz-transform: translateY(0%); transform: translateY(0%); } } @-o-keyframes slideUp { 0% { opacity: 0; -o-transform: translateY(100%); transform: translateY(100%); } 50% { opacity: 1; -o-transform: translateY(-8%); transform: translateY(-8%); } 65% { -o-transform: translateY(4%); transform: translateY(4%); } 80% { -o-transform: translateY(-4%); transform: translateY(-4%); } 95% { -o-transform: translateY(2%); transform: translateY(2%); } 100% { -o-transform: translateY(0%); transform: translateY(0%); } } @keyframes slideUp { 0% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 50% { opacity: 1; -webkit-transform: translateY(-8%); -moz-transform: translateY(-8%); -o-transform: translateY(-8%); transform: translateY(-8%); } 65% { -webkit-transform: translateY(4%); -moz-transform: translateY(4%); -o-transform: translateY(4%); transform: translateY(4%); } 80% { -webkit-transform: translateY(-4%); -moz-transform: translateY(-4%); -o-transform: translateY(-4%); transform: translateY(-4%); } 95% { -webkit-transform: translateY(2%); -moz-transform: translateY(2%); -o-transform: translateY(2%); transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { opacity: 0; -webkit-transform: translateY(100%); } 50% { opacity: 1; -webkit-transform: translateY(-8%); } 65% { -webkit-transform: translateY(4%); } 80% { -webkit-transform: translateY(-4%); } 95% { -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideLeft ============================================== */ .animated.slideLeft { -moz-animation-name: slideLeft; -o-animation-name: slideLeft; animation-name: slideLeft; -webkit-animation-name: slideLeft; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @-moz-keyframes slideLeft { 0% { opacity: 0; -moz-transform: translateX(150%); transform: translateX(150%); } 50% { opacity: 1; -moz-transform: translateX(-8%); transform: translateX(-8%); } 65% { -moz-transform: translateX(4%); transform: translateX(4%); } 80% { -moz-transform: translateX(-4%); transform: translateX(-4%); } 95% { -moz-transform: translateX(2%); transform: translateX(2%); } 100% { -moz-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes slideLeft { 0% { opacity: 0; -o-transform: translateX(150%); transform: translateX(150%); } 50% { opacity: 1; -o-transform: translateX(-8%); transform: translateX(-8%); } 65% { -o-transform: translateX(4%); transform: translateX(4%); } 80% { -o-transform: translateX(-4%); transform: translateX(-4%); } 95% { -o-transform: translateX(2%); transform: translateX(2%); } 100% { -o-transform: translateX(0%); transform: translateX(0%); } } @keyframes slideLeft { 0% { opacity: 0; -webkit-transform: translateX(150%); -moz-transform: translateX(150%); -o-transform: translateX(150%); transform: translateX(150%); } 50% { opacity: 1; -webkit-transform: translateX(-8%); -moz-transform: translateX(-8%); -o-transform: translateX(-8%); transform: translateX(-8%); } 65% { -webkit-transform: translateX(4%); -moz-transform: translateX(4%); -o-transform: translateX(4%); transform: translateX(4%); } 80% { -webkit-transform: translateX(-4%); -moz-transform: translateX(-4%); -o-transform: translateX(-4%); transform: translateX(-4%); } 95% { -webkit-transform: translateX(2%); -moz-transform: translateX(2%); -o-transform: translateX(2%); transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { opacity: 0; -webkit-transform: translateX(150%); } 50% { opacity: 1; -webkit-transform: translateX(-8%); } 65% { -webkit-transform: translateX(4%); } 80% { -webkit-transform: translateX(-4%); } 95% { -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideRight ============================================== */ .animated.slideRight { -moz-animation-name: slideRight; -o-animation-name: slideRight; animation-name: slideRight; -webkit-animation-name: slideRight; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @-moz-keyframes slideRight { 0% { opacity: 0; -moz-transform: translateX(-150%); transform: translateX(-150%); } 50% { opacity: 1; -moz-transform: translateX(8%); transform: translateX(8%); } 65% { -moz-transform: translateX(-4%); transform: translateX(-4%); } 80% { -moz-transform: translateX(4%); transform: translateX(4%); } 95% { -moz-transform: translateX(-2%); transform: translateX(-2%); } 100% { -moz-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes slideRight { 0% { opacity: 0; -o-transform: translateX(-150%); transform: translateX(-150%); } 50% { opacity: 1; -o-transform: translateX(8%); transform: translateX(8%); } 65% { -o-transform: translateX(-4%); transform: translateX(-4%); } 80% { -o-transform: translateX(4%); transform: translateX(4%); } 95% { -o-transform: translateX(-2%); transform: translateX(-2%); } 100% { -o-transform: translateX(0%); transform: translateX(0%); } } @keyframes slideRight { 0% { opacity: 0; -webkit-transform: translateX(-150%); -moz-transform: translateX(-150%); -o-transform: translateX(-150%); transform: translateX(-150%); } 50% { opacity: 1; -webkit-transform: translateX(8%); -moz-transform: translateX(8%); -o-transform: translateX(8%); transform: translateX(8%); } 65% { -webkit-transform: translateX(-4%); -moz-transform: translateX(-4%); -o-transform: translateX(-4%); transform: translateX(-4%); } 80% { -webkit-transform: translateX(4%); -moz-transform: translateX(4%); -o-transform: translateX(4%); transform: translateX(4%); } 95% { -webkit-transform: translateX(-2%); -moz-transform: translateX(-2%); -o-transform: translateX(-2%); transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { opacity: 0; -webkit-transform: translateX(-150%); } 50% { opacity: 1; -webkit-transform: translateX(8%); } 65% { -webkit-transform: translateX(-4%); } 80% { -webkit-transform: translateX(4%); } 95% { -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== pullUp ============================================== */ .animated.pullUp { -moz-animation-name: pullUp; -o-animation-name: pullUp; animation-name: pullUp; -webkit-animation-name: pullUp; -moz-animation-duration: 1.1s; -o-animation-duration: 1.1s; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @-moz-keyframes pullUp { 0% { opacity: 0; -moz-transform: scaleY(0.1) translateZ(0); transform: scaleY(0.1) translateZ(0); } 40% { opacity: 1; -moz-transform: scaleY(1.02); transform: scaleY(1.02); } 60% { -moz-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.01); transform: scaleY(1.01); } 100% { -moz-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.01); transform: scaleY(1.01); } 100% { -moz-transform: scaleY(1); transform: scaleY(1); } } @-o-keyframes pullUp { 0% { opacity: 0; transform: scaleY(0.1) translateZ(0); } 40% { opacity: 1; -o-transform: scaleY(1.02); transform: scaleY(1.02); } 60% { -o-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -o-transform: scaleY(1.01); transform: scaleY(1.01); } 100% { -o-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -o-transform: scaleY(1.01); transform: scaleY(1.01); } 100% { -o-transform: scaleY(1); transform: scaleY(1); } } @keyframes pullUp { 0% { opacity: 0; -webkit-transform: scaleY(0.1) translateZ(0); -moz-transform: scaleY(0.1) translateZ(0); transform: scaleY(0.1) translateZ(0); } 40% { opacity: 1; -webkit-transform: scaleY(1.02); -moz-transform: scaleY(1.02); -o-transform: scaleY(1.02); transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); -moz-transform: scaleY(0.98); -o-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); -moz-transform: scaleY(1.01); -o-transform: scaleY(1.01); transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); -moz-transform: scaleY(0.98); -o-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); -moz-transform: scaleY(1.01); -o-transform: scaleY(1.01); transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { opacity: 0; -webkit-transform: scaleY(0.1) translateZ(0); } 40% { opacity: 1; -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== pullDown ============================================== */ .animated.pullDown { -moz-animation-name: pullDown; -o-animation-name: pullDown; animation-name: pullDown; -webkit-animation-name: pullDown; -moz-animation-duration: 1.1s; -o-animation-duration: 1.1s; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @-moz-keyframes pullDown { 0% { opacity: 0; -moz-transform: scaleY(0.1) translateZ(0); transform: scaleY(0.1) translateZ(0); } 40% { opacity: 1; -moz-transform: scaleY(1.02) translateZ(0); transform: scaleY(1.02) translateZ(0); } 60% { -moz-transform: scaleY(0.98) translateZ(0); transform: scaleY(0.98) translateZ(0); } 80% { -moz-transform: scaleY(1.01) translateZ(0); transform: scaleY(1.01) translateZ(0); } 100% { -moz-transform: scaleY(0.98) translateZ(0); transform: scaleY(0.98) translateZ(0); } 80% { -moz-transform: scaleY(1.01) translateZ(0); transform: scaleY(1.01) translateZ(0); } 100% { -moz-transform: scaleY(1) translateZ(0); transform: scaleY(1) translateZ(0); } } @-o-keyframes pullDown { 0% { opacity: 0; transform: scaleY(0.1) translateZ(0); } 40% { opacity: 1; transform: scaleY(1.02) translateZ(0); } 60% { transform: scaleY(0.98) translateZ(0); } 80% { transform: scaleY(1.01) translateZ(0); } 100% { transform: scaleY(0.98) translateZ(0); } 80% { transform: scaleY(1.01) translateZ(0); } 100% { transform: scaleY(1) translateZ(0); } } @keyframes pullDown { 0% { opacity: 0; -webkit-transform: scaleY(0.1) translateZ(0); -moz-transform: scaleY(0.1) translateZ(0); transform: scaleY(0.1) translateZ(0); } 40% { opacity: 1; -webkit-transform: scaleY(1.02) translateZ(0); -moz-transform: scaleY(1.02) translateZ(0); transform: scaleY(1.02) translateZ(0); } 60% { -webkit-transform: scaleY(0.98) translateZ(0); -moz-transform: scaleY(0.98) translateZ(0); transform: scaleY(0.98) translateZ(0); } 80% { -webkit-transform: scaleY(1.01) translateZ(0); -moz-transform: scaleY(1.01) translateZ(0); transform: scaleY(1.01) translateZ(0); } 100% { -webkit-transform: scaleY(0.98) translateZ(0); -moz-transform: scaleY(0.98) translateZ(0); transform: scaleY(0.98) translateZ(0); } 80% { -webkit-transform: scaleY(1.01) translateZ(0); -moz-transform: scaleY(1.01) translateZ(0); transform: scaleY(1.01) translateZ(0); } 100% { -webkit-transform: scaleY(1) translateZ(0); -moz-transform: scaleY(1) translateZ(0); transform: scaleY(1) translateZ(0); } } @-webkit-keyframes pullDown { 0% { opacity: 0; -webkit-transform: scaleY(0.1) translateZ(0); } 40% { opacity: 1; -webkit-transform: scaleY(1.02) translateZ(0); } 60% { -webkit-transform: scaleY(0.98) translateZ(0); } 80% { -webkit-transform: scaleY(1.01) translateZ(0); } 100% { -webkit-transform: scaleY(0.98) translateZ(0); } 80% { -webkit-transform: scaleY(1.01) translateZ(0); } 100% { -webkit-transform: scaleY(1) translateZ(0); } } /* ============================================== stretchLeft ============================================== */ .animated.stretchLeft { -moz-animation-name: stretchLeft; -o-animation-name: stretchLeft; animation-name: stretchLeft; -webkit-animation-name: stretchLeft; -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; -moz-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @-moz-keyframes stretchLeft { 0% { opacity: 0; -moz-transform: scaleX(0.3); transform: scaleX(0.3); } 40% { opacity: 1; -moz-transform: scaleX(1.02); transform: scaleX(1.02); } 60% { -moz-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -moz-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -moz-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -moz-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -moz-transform: scaleX(1); transform: scaleX(1); } } @-o-keyframes stretchLeft { 0% { opacity: 0; -o-transform: scaleX(0.3); transform: scaleX(0.3); } 40% { opacity: 1; -o-transform: scaleX(1.02); transform: scaleX(1.02); } 60% { -o-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -o-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -o-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -o-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -o-transform: scaleX(1); transform: scaleX(1); } } @keyframes stretchLeft { 0% { opacity: 0; -webkit-transform: scaleX(0.3); -moz-transform: scaleX(0.3); -o-transform: scaleX(0.3); transform: scaleX(0.3); } 40% { opacity: 1; -webkit-transform: scaleX(1.02); -moz-transform: scaleX(1.02); -o-transform: scaleX(1.02); transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); -moz-transform: scaleX(0.98); -o-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); -moz-transform: scaleX(1.01); -o-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); -moz-transform: scaleX(0.98); -o-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); -moz-transform: scaleX(1.01); -o-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { opacity: 0; -webkit-transform: scaleX(0.3); } 40% { opacity: 1; -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ============================================== stretchRight ============================================== */ .animated.stretchRight { -moz-animation-name: stretchRight; -o-animation-name: stretchRight; animation-name: stretchRight; -webkit-animation-name: stretchRight; -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @-moz-keyframes stretchRight { 0% { opacity: 0; -moz-transform: scaleX(0.3); transform: scaleX(0.3); } 40% { opacity: 1; -moz-transform: scaleX(1.02); transform: scaleX(1.02); } 60% { -moz-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -moz-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -moz-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -moz-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -moz-transform: scaleX(1); transform: scaleX(1); } } @-o-keyframes stretchRight { 0% { opacity: 0; -o-transform: scaleX(0.3); transform: scaleX(0.3); } 40% { opacity: 1; -o-transform: scaleX(1.02); transform: scaleX(1.02); } 60% { -o-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -o-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -o-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -o-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -o-transform: scaleX(1); transform: scaleX(1); } } @keyframes stretchRight { 0% { opacity: 0; -webkit-transform: scaleX(0.3); -moz-transform: scaleX(0.3); -o-transform: scaleX(0.3); transform: scaleX(0.3); } 40% { opacity: 1; -webkit-transform: scaleX(1.02); -moz-transform: scaleX(1.02); -o-transform: scaleX(1.02); transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); -moz-transform: scaleX(0.98); -o-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); -moz-transform: scaleX(1.01); -o-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); -moz-transform: scaleX(0.98); -o-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); -moz-transform: scaleX(1.01); -o-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { opacity: 0; -webkit-transform: scaleX(0.3); } 40% { opacity: 1; -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } @keyframes reverseRotataZ{ 0%{-webkit-transform:rotateZ(0deg)}100%{-webkit-transform:rotateZ(-360deg)}} @-webkit-keyframes reverseRotataZ{ 0%{-webkit-transform:rotateZ(0deg)}100%{-webkit-transform:rotateZ(-360deg)}} @-moz-keyframes reverseRotataZ{ 0%{-moz-transform:rotateZ(0deg)}100%{-moz-transform:rotateZ(-360deg)}} @-ms-keyframes reverseRotataZ{ 0%{-ms-transform:rotateZ(0deg)}100%{-ms-transform:rotateZ(-360deg)}}
