diff --git a/themes/yilia/source-src/css/core/_animation.scss b/themes/yilia/source-src/css/core/_animation.scss index 8d2134e..e991f13 100644 --- a/themes/yilia/source-src/css/core/_animation.scss +++ b/themes/yilia/source-src/css/core/_animation.scss @@ -251,101 +251,51 @@ /*弹性动画*/ @keyframes leftIn { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } + from {transform: translate3d(0, 0, 0);} + to {transform: translate3d(333px, 0, 0);} +} - 0% { - transform: translate3d(0, 0, 0); - } - - 60% { - transform: translate3d(358px, 0, 0); - } - - 75% { - transform: translate3d(323px, 0, 0); - } - - 90% { - transform: translate3d(338px, 0, 0); - } - - to { - transform: translate3d(333px, 0, 0); - } +%anmCommon { + animation-duration: .3s; + animation-fill-mode: both; + animation-timing-function: ease-in-out; } %anmLeftIn { - animation-duration: .8s; - animation-fill-mode: both; + @extend %anmCommon; animation-name: leftIn; } @keyframes leftOut { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - - 0% { - transform: translate3d(333px, 0, 0); - } - - 60% { - transform: translate3d(-25px, 0, 0); - } - - 75% { - transform: translate3d(10px, 0, 0); - } - - 90% { - transform: translate3d(-5px, 0, 0); - } - - to { - transform: translate3d(0, 0, 0); - } + from {transform: translate3d(333px, 0, 0);} + to {transform: translate3d(0, 0, 0);} } %anmLeftOut { - animation-duration: .8s; + @extend %anmCommon; animation-name: leftOut; } @keyframes smallLeftIn { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - 0% {transform: translate3d(0, 0, 0);} - 60% {transform: translate3d(325px, 0, 0);} - 75% {transform: translate3d(290px, 0, 0);} - 90% {transform: translate3d(305px, 0, 0);} + from {transform: translate3d(0, 0, 0);} to {transform: translate3d(300px, 0, 0);} } %anmSmallLeftIn { - animation-duration: .8s; - animation-fill-mode: both; + @extend %anmCommon; animation-name: smallLeftIn; } @keyframes smallleftOut { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - 0% {transform: translate3d(333px, 0, 0);} - 60% {transform: translate3d(-25px, 0, 0);} - 75% {transform: translate3d(10px, 0, 0);} - 90% {transform: translate3d(-5px, 0, 0);} + from {transform: translate3d(300px, 0, 0);} to {transform: translate3d(0, 0, 0);} } %anmSmallLeftOut { - animation-duration: .8s; - animation-fill-mode: both; + @extend %anmCommon; animation-name: smallleftOut; } + // 头像旋转动画 @keyframes profilepic { 0% { diff --git a/themes/yilia/source-src/css/grid.scss b/themes/yilia/source-src/css/grid.scss index 72be606..a08568c 100644 --- a/themes/yilia/source-src/css/grid.scss +++ b/themes/yilia/source-src/css/grid.scss @@ -24,7 +24,7 @@ html, body, #container { display: none; } &.show { - background: linear-gradient(200deg,#a0cfe4,#e8c37e); + background: linear-gradient(200deg,#5aa5c6,#a4854b); .anm-canvas { display: block; position: fixed;