/* * 垂直放大 */ .scale-up-ver-bottom { -webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } .scale-up-ver-bottom-infinite { -webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both; animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both; } @keyframes scale-up-ver-bottom { 0% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); -webkit-transform-origin: 50%; transform-origin: 50%; } 80% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; transform-origin: 50%; } 85% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 95% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } /* * 交替垂直放大 */ .scale-up-ver-bottom-alternate { -webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both; animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both; } .scale-up-ver-bottom-alternate-infinite { -webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both; animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both; } @keyframes scale-up-ver-bottom-alternate { 0% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; } } /* * 中间区域放大 */ .scale-up-ver-center { -webkit-animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } .scale-up-ver-center-infinite { -webkit-animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both; animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both; } @keyframes scale-up-ver-center { 0% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); } } /* * 淡出 . */fade-out-fwd { -webkit-animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .fade-out-fwd-infinite { -webkit-animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both; animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both; } @keyframes fade-out-fwd { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(80px); transform: translateZ(80px); opacity: 0; } } /* * 淡入 */ .fade-in-bck { -webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } .fade-in-bck-infinite { -webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both; animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both; } /* * 淡入淡出 */ .fade-in-bck-alternate { -webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both; animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both; } .fade-in-bck-alternate-infinite { -webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both; animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both; } @keyframes fade-in-bck { 0% { -webkit-transform: translateZ(80px); transform: translateZ(80px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } /* * 文字铺开 */ .tracking-in-expand { -webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; } .tracking-in-expand-infinite { -webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both; animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both; } @keyframes tracking-in-expand { 0% { letter-spacing: -0.5em; opacity: 0; } 40% { opacity: 0.6; } 100% { opacity: 1; } } /* * 心跳 */ .heartbeat { -webkit-animation: heartbeat 1s ease-in-out both; animation: heartbeat 1s ease-in-out both; } .heartbeat-infinite { -webkit-animation: heartbeat 1s ease-in-out infinite both; animation: heartbeat 1s ease-in-out infinite both; } @keyframes heartbeat { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /* * 脉动 */ .pulsate-bck { -webkit-animation: pulsate-bck 1s ease-in-out both; animation: pulsate-bck 1s ease-in-out both; } .pulsate-bck-infinite { -webkit-animation: pulsate-bck 1s ease-in-out infinite both; animation: pulsate-bck 1s ease-in-out infinite both; } @keyframes pulsate-bck { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } /* * 向上弹跳 */ .bounce-top { -webkit-animation: bounce-top 1.5s both; animation: bounce-top 1.5s both; } .bounce-top-infinite { -webkit-animation: bounce-top 1.5s infinite both; animation: bounce-top 1.5s infinite both; } @keyframes bounce-top { 0%, 30%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 15% { -webkit-transform: translateY(-40px); transform: translateY(-40px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: translateY(-20px); transform: translateY(-20px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 75% { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } /* * 向下弹跳 */ .bounce-bottom { -webkit-animation: bounce-bottom 1.5s both; animation: bounce-bottom 1.5s both; } .bounce-bottom-infinite { -webkit-animation: bounce-bottom 1.5s infinite both; animation: bounce-bottom 1.5s infinite both; } @keyframes bounce-bottom { 0%, 30%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 15% { -webkit-transform: translateY(40px); transform: translateY(40px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 75% { -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } /* * 向左弹跳 */ .bounce-left { -webkit-animation: bounce-left 1.5s both; animation: bounce-left 1.5s both; } .bounce-left-infinite { -webkit-animation: bounce-left 1.5s infinite both; animation: bounce-left 1.5s infinite both; } @keyframes bounce-left { 0%, 30%, 60%, 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 15% { -webkit-transform: translateX(-40px); transform: translateX(-40px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 75% { -webkit-transform: translateX(-8px); transform: translateX(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } /* * 向右弹跳 */ .bounce-right { -webkit-animation: bounce-right 1.5s both; animation: bounce-right 1.5s both; } .bounce-right-infinite { -webkit-animation: bounce-right 1.5s infinite both; animation: bounce-right 1.5s infinite both; } @keyframes bounce-right { 0%, 30%, 60%, 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 15% { -webkit-transform: translateX(40px); transform: translateX(40px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: translateX(20px); transform: translateX(20px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 75% { -webkit-transform: translateX(8px); transform: translateX(8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } /* * 左侧弹跳 */ .bounce-in-left { -webkit-animation: bounce-in-left 2s both; animation: bounce-in-left 2s both; } .bounce-in-left-infinite { -webkit-animation: bounce-in-left 2s infinite both; animation: bounce-in-left 2s infinite both; } @keyframes bounce-in-left { 0% { -webkit-transform: translateX(-500px); transform: translateX(-500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateX(-68px); transform: translateX(-68px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateX(-28px); transform: translateX(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateX(-8px); transform: translateX(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /* * 翻转 */ .flip-in-diag-2-tl { -webkit-animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .flip-in-diag-2-tl-infinite { -webkit-animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both; animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both; } @keyframes flip-in-diag-2-tl { 0% { -webkit-transform: rotate3d(-1, 1, 0, 80deg); transform: rotate3d(-1, 1, 0, 80deg); opacity: 0; } 100% { -webkit-transform: rotate3d(1, 1, 0, 0deg); transform: rotate3d(1, 1, 0, 0deg); opacity: 1; } } /* * 从左滑动 */ .slide-in-left { -webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .slide-in-left-infinite { -webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both; animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both; } @keyframes slide-in-left { 0% { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /* * 在fwd中心滑动 */ .slide-in-fwd-center { -webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .slide-in-fwd-center-infinite { -webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both; animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both; } @keyframes slide-in-fwd-center { 0% { -webkit-transform: translateZ(-1400px); transform: translateZ(-1400px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } /* * 左前轮旋转 */ .swirl-in-left-fwd { -webkit-animation: swirl-in-left-fwd 2s ease-out both; animation: swirl-in-left-fwd 2s ease-out both; } .swirl-in-left-fwd-infinite { -webkit-animation: swirl-in-left-fwd 2s ease-out infinite both; animation: swirl-in-left-fwd 2s ease-out infinite both; } @keyframes swirl-in-left-fwd { 0% { -webkit-transform: rotate(-540deg) scale(0); transform: rotate(-540deg) scale(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; opacity: 0; } 100% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; opacity: 1; } } /* * 摇动 */ .shake-bottom { -webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } .shake-bottom-infinite { -webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both; animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both; } @keyframes shake-bottom { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); -webkit-transform-origin: 50%; transform-origin: 50%; } 80% { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transform-origin: 50%; transform-origin: 50%; } 85% { -webkit-transform: rotate(-16deg); transform: rotate(-16deg); } 95% { -webkit-transform: rotate(16deg); transform: rotate(16deg); } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 50%; transform-origin: 50%; } } /* * 震动 */ .vibrate { -webkit-animation: vibrate 0.3s linear both; animation: vibrate 0.3s linear both; } .vibrate-infinite { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @keyframes vibrate { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); } 40% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } 60% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 80% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 100% { -webkit-transform: translate(0); transform: translate(0); } } /* * 模糊显示 */ .text-focus-in { -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; } .text-focus-in-infinite { -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both; animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both; } @keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } /* * 果冻 */ .jello-horizontal { -webkit-animation: jello-horizontal 0.9s both; animation: jello-horizontal 0.9s both; } .jello-horizontal-infinite { -webkit-animation: jello-horizontal 0.9s infinite both; animation: jello-horizontal 0.9s infinite both; } @keyframes jello-horizontal { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }