/* 上下晃动 5px */
@keyframes icon-arrow-shake {
0%,50%,100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
75% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
}
/* 顺时针旋转 360° */
@keyframes clockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 逆时针旋转 360° */
@keyframes anticlockwise {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
/* 逆时针旋转 60°,然后复原 */
@keyframes nReRotate60 {
0%,100% {
transform: rotate(0deg);
}
50% {
transform: rotate(-60deg);
}
}
/* 顺时针旋转 90° */
@keyframes rotate90 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(90deg);
}
}
/* 逆时针旋转 90°,然后复原 */
@keyframes nReRotate90 {
0%,100% {
transform: rotate(0deg);
}
50% {
transform: rotate(-90deg);
}
}
/* 顺时针旋转 90°,然后复原 */
@keyframes reRotate90 {
0%,100% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
}
/* 顺时针旋转 180° */
@keyframes rotate180 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
@keyframes box-in {
0%,10% {
transform: scale(.3,.3);
-webkit-transform: scale(.3,.3);
opacity: .2
}
90%,100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1
}
}
@keyframes fade-in {
0%,10% {
opacity: .2
}
90%,100% {
opacity: 1
}
}
@keyframes blink {
0% { opacity: .8; }
50% { opacity: .4; }
100% { opacity: .8; }
}
@-webkit-keyframes blink{
0% { opacity: .8; }
50% { opacity: .4; }
100% { opacity: .8; }
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
}
}
@keyframes wideIn {
0%{
width: 0;
}
}
@-webkit-keyframes wideIn {
0%{
width: 0;
}
}
@keyframes rotate60 {
from{
transform: rotate(-60deg);
}
to{
transform: rotate(0deg);
}
}
@-webkit-keyframes rotate60 {
from{
-webkit-transform: rotate(-60deg);
}
to{
-webkit-transform: rotate(0deg);
}
}
@keyframes rotate-60 {
from{
transform: rotate(60deg);
}
to{
transform: rotate(0deg);
}
}
@-webkit-keyframes rotate-90 {
from{
-webkit-transform: rotate(90deg);
}
to{
-webkit-transform: rotate(0deg);
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
transform: -webkit-transform3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
}
}
@keyframes scalIn {
0%{
opacity: 0.5;
transform: scale(0);
}
100%{
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes scalIn {
0%{
opacity: 0.5;
-webkit-transform: scale(0);
}
100%{
opacity: 1;
-webkit-transform: scale(1);
}
}
@keyframes rotate360{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate360{
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate-360{
from{
transform: rotate(0deg);
}
to{
transform: rotate(-360deg);
}
}
@-webkit-keyframes rotate-360{
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(-360deg);
}
}
@keyframes bounce{
0%{
top: 0;
}
25%{
top: -5px;
}
50%{
top:0;
}
75%{
top: 15px;
}
100%{
top:0;
}
}
@-webkit-keyframes bounce{
0%{
top: 0;
}
25%{
top: -5px;
}
50%{
top:0;
}
75%{
top: 15px;
}
100%{
top:0;
}
}