init
This commit is contained in:
228
uni_modules/nutui-uni/styles/animation/icon.scss
Normal file
228
uni_modules/nutui-uni/styles/animation/icon.scss
Normal file
@@ -0,0 +1,228 @@
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 跳动
|
||||
@keyframes nutJump {
|
||||
to {
|
||||
transform: scale3d(0.8, 1, 0.9) translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nutJump {
|
||||
to {
|
||||
transform: scale3d(0.8, 1, 0.9) translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nutJumpOne {
|
||||
50% {
|
||||
transform: scale3d(0.8, 1, 0.9) translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nutJumpOne {
|
||||
50% {
|
||||
transform: scale3d(0.8, 1, 0.9) translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 闪烁
|
||||
@keyframes nutBlink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nutBlink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 呼吸
|
||||
@keyframes nutBreathe {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nutBreathe {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
// 闪现
|
||||
@keyframes nutFlash {
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nutFlash {
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 弹动
|
||||
@keyframes nutBounce {
|
||||
0%,
|
||||
20%,
|
||||
53%,
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
40%,
|
||||
43% {
|
||||
transform: translate3d(0, -30px, 0) scaleY(1.1);
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate3d(0, -15px, 0) scaleY(1.05);
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
}
|
||||
|
||||
80% {
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, 0, 0) scaleY(0.95);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0, -4px, 0) scaleY(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nutBounce {
|
||||
0%,
|
||||
20%,
|
||||
53%,
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
40%,
|
||||
43% {
|
||||
transform: translate3d(0, -30px, 0) scaleY(1.1);
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate3d(0, -15px, 0) scaleY(1.05);
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
}
|
||||
|
||||
80% {
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, 0, 0) scaleY(0.95);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0, -4px, 0) scaleY(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
// 抖动
|
||||
@keyframes nutShake {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
6.5% {
|
||||
transform: translateX(-6px) rotateY(-9deg);
|
||||
}
|
||||
|
||||
18.5% {
|
||||
transform: translateX(5px) rotateY(7deg);
|
||||
}
|
||||
|
||||
31.5% {
|
||||
transform: translateX(-3px) rotateY(-5deg);
|
||||
}
|
||||
|
||||
43.5% {
|
||||
transform: translateX(2px) rotateY(3deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nutShake {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
6.5% {
|
||||
transform: translateX(-6px) rotateY(-9deg);
|
||||
}
|
||||
|
||||
18.5% {
|
||||
transform: translateX(5px) rotateY(7deg);
|
||||
}
|
||||
|
||||
31.5% {
|
||||
transform: translateX(-3px) rotateY(-5deg);
|
||||
}
|
||||
|
||||
43.5% {
|
||||
transform: translateX(2px) rotateY(3deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user