sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

修改动画

Browse Source
This commit is contained in:
结发受长生 2019-05-17 17:50:36 +08:00
parent a56e371bb0
commit 5111f61f87
2 changed files with 17 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
themes/yilia/source-src/css/core/_animation.scss
View File

@ -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% {

2
themes/yilia/source-src/css/grid.scss
View File

@ -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;