chen
/
squareDancing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
squareDancing/css/animate.css

547 lines
7.5 KiB
CSS
Raw Blame History

@keyframes degs{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(720deg);
}
100%{
transform: rotate(0deg);
}
}
/*灯光闪烁*/
@keyframes Lighting{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
/*全屏抖动*/
@keyframes scale-body{
0%{
transform: scale(1);
}
33%{
transform: scale(1.01);
}
66%{
transform: scale(1);
}
72%{
transform: scale(1.01);
}
80%{
transform: scale(1);
}
88%{
transform: scale(1.01);
}
100%{
transform: scale(1);
}
}
@keyframes scale{
0%{
transform: scale(.9);
}
100%{
transform: scale(.91);
}
}
@keyframes blendmode{
0%{
mix-blend-mode: color-dodge;
}
33%{
mix-blend-mode: difference;
}
66%{
mix-blend-mode: luminosity;
}
100%{
mix-blend-mode: color-dodge;
}
}
/**/
@keyframes dancing-left{
0%{
left: -50px;
top: 0px;
transform:rotateY(180deg);
}
5%{
left: -40px;
top: 10px;
transform:rotateY(180deg);
}
10%{
left: -30px;
top: 0px;
transform:rotateY(180deg);
}
15%{
left: -20px;
top: 10px;
transform:rotateY(180deg);
}
20%{
left: -10px;
top: 0px;
transform:rotateY(180deg);
}
25%{
left: 0px;
top: 10px;
transform:rotateY(180deg);
}
30%{
left: 10px;
top: 0px;
transform:rotateY(180deg);
}
35%{
left: 20px;
top: 10px;
transform:rotateY(180deg);
}
40%{
left: 30px;
top: 0px;
transform:rotateY(180deg);
}
45%{
left: 40px;
top: 10px;
transform:rotateY(180deg);
}
50%{
left: 50px;
top:0px;
transform:rotateY(0deg);
}
55%{
left: 40px;
top: 10px;
transform:rotateY(0deg);
}
60%{
left: 30px;
top: 0px;
transform:rotateY(0deg);
}
65%{
left: 20px;
top: 10px;
transform:rotateY(0deg);
}
70%{
left: 10px;
top: 0px;
transform:rotateY(0deg);
}
75%{
left: 0px;
top: 10px;
transform:rotateY(0deg);
}
80%{
left: -10px;
top: 0px;
transform:rotateY(0deg);
}
85%{
left: -20px;
top:10px;
transform:rotateY(0deg);
}
90%{
left: -30px;
top: 0px;
transform:rotateY(0deg);
}
95%{
left: -40px;
top: 10px;
transform:rotateY(0deg);
}
100%{
left: -50px;
top: 0px;
transform:rotateY(180deg);
}
}
@keyframes dancing-right{
0%{
right: -50px;
top: 0px;
transform:rotateY(180deg);
}
5%{
right: -40px;
top: 10px;
transform:rotateY(180deg);
}
10%{
right: -30px;
top: 0px;
transform:rotateY(180deg);
}
15%{
right: -20px;
top: 10px;
transform:rotateY(180deg);
}
20%{
right: -10px;
top: 0px;
transform:rotateY(180deg);
}
25%{
right: 0px;
top: 10px;
transform:rotateY(180deg);
}
30%{
right: 10px;
top: 0px;
transform:rotateY(180deg);
}
35%{
right: 20px;
top: 10px;
transform:rotateY(180deg);
}
40%{
right: 30px;
top: 0px;
transform:rotateY(180deg);
}
45%{
right: 40px;
top: 10px;
transform:rotateY(180deg);
}
50%{
right: 50px;
top:0px;
transform:rotateY(0deg);
}
55%{
right: 40px;
top: 10px;
transform:rotateY(0deg);
}
60%{
right: 30px;
top: 0px;
transform:rotateY(0deg);
}
65%{
right: 20px;
top: 10px;
transform:rotateY(0deg);
}
70%{
right: 10px;
top: 0px;
transform:rotateY(0deg);
}
75%{
right: 0px;
top: 10px;
transform:rotateY(0deg);
}
80%{
right: -10px;
top: 0px;
transform:rotateY(0deg);
}
85%{
right: -20px;
top:10px;
transform:rotateY(0deg);
}
90%{
right: -30px;
top: 0px;
transform:rotateY(0deg);
}
95%{
right: -40px;
top: 10px;
transform:rotateY(0deg);
}
100%{
right: -50px;
top: 0px;
transform:rotateY(180deg);
}
}
@keyframes dancing-down{
0%{
top: -20px;
transform:rotateY(0deg);
}
25%{
top: 0px;
transform:rotateY(0deg);
}
40%{
top: -20px;
transform:rotateY(0deg);
}
50%{
top: -100px;
transform:rotateY(720deg);
}
60%{
top: -20px;
transform:rotateY(0deg);
}
75%{
top: 0px;
transform:rotateY(0deg);
}
100%{
top: -20px;
transform:rotateY(0deg);
}
}
@keyframes dancing-Wobble{
from{
transform:rotate(0deg);
transform-origin:79px 108px;
}
10%{
transform:rotate(-20deg);
transform-origin:79px 108px;
}
20%{
transform:rotate(0deg);
transform-origin:79px 108px;
}
30%{
transform:rotate(-20deg);
transform-origin:79px 108px;
}
40%{
transform:rotate(0deg);
transform-origin:79px 108px;
}
50%{
transform:rotate(-20deg);
transform-origin:79px 108px;
}
60%{
transform:rotate(0deg);
transform-origin:79px 108px;
}
70%{
transform:rotate(-20deg);
transform-origin:79px 108px;
}
80%{
transform:rotate(0deg);
transform-origin:79px 108px;
}
90%{
transform:rotate(-20deg);
transform-origin:79px 108px;
}
to{
transform:rotate(0deg);
transform-origin:79px 108px;
}
}
@keyframes dancing-Wobble-right{
from{
transform:rotate(0deg);
transform-origin:79px 108px;
}
10%{
transform:rotate(20deg);
transform-origin:79px 108px;
}
20%{
transform:rotate(0deg);
transform-origin:79px 108px;
}
30%{
transform:rotate(20deg);
transform-origin:79px 108px;
}
40%{
transform:rotate(0deg);
transform-origin:79px 108px;
}
50%{
transform:rotate(20deg);
transform-origin:79px 108px;
}
60%{
transform:rotate(0deg);
transform-origin:79px 108px;
}
70%{
transform:rotate(20deg);
transform-origin:79px 108px;
}
80%{
transform:rotate(0deg);
transform-origin:79px 108px;
}
90%{
transform:rotate(20deg);
transform-origin:79px 108px;
}
to{
transform:rotate(0deg);
transform-origin:79px 108px;
}
}
@keyframes dancing-UP{
from{
transform:scale(1,1)
}
10%{
transform:scale(1.1,1.1)
}
20%{
transform:scale(1,1)
}
30%{
transform:scale(1.1,1.1)
}
40%{
transform:scale(1,1)
}
50%{
transform:scale(1.1,1.1)
}
60%{
transform:scale(1,1)
}
70%{
transform:scale(1.1,1.1)
}
80%{
transform:scale(1,1)
}
90%{
transform:scale(1.1,1.1)
}
100%{
transform:scale(1,1)
}
}
/*镜头拉近*/
@keyframes scale-left{
0{
transform:scale(1,1);
transform-origin:0rem 18.75rem;
}
1%{
transform:scale(1.4,1.4);
transform-origin:0rem 18.75rem;
}
40%{
transform:scale(1.4,1.4);
transform-origin:100% 18.75rem;
}
70%{
transform-origin:50% 50%;
transform: scale(0.9,0.9);
}
100%{
transform-origin:50% 50%;
transform: scale(1,1);
}
}
@keyframes scale-right{
0{
transform:scale(1,1);
transform-origin:100% 18.75rem;
}
1%{
transform:scale(1.4,1.4);
transform-origin:100% 18.75rem;
}
90%{
transform:scale(1.4,1.4);
transform-origin:0 18.75rem;
}
100%{
transform-origin:0 18.75rem;
transform:scale(1,1);
}
}
@keyframes scale-bottom-right{
0{
transform:scale(1,1);
transform-origin:100% 43.75rem;
}
1%{
transform:scale(1.4,1.4);
transform-origin:100% 43.75rem;
}
40%{
transform:scale(1.4,1.4);
transform-origin:0 43.75rem;
}
70%{
transform-origin:50% 50%;
transform: scale(0.9,0.9);
}
100%{
transform-origin:50% 50%;
transform: scale(1,1);
}
}
@keyframes scale-bottom-left{
0{
transform:scale(1,1);
transform-origin:0 43.75rem;
}
1%{
transform:scale(1.4,1.4);
transform-origin:0 43.75rem;
}
90%{
transform:scale(1.4,1.4);
transform-origin:100% 43.75rem;
}
100%{
transform-origin:100% 43.75rem;
transform:scale(1,1);
}
}
@keyframes Wobble{
from{
transform:rotate(0deg);
transform-origin:22px 60px;
}
25%{
transform:rotate(30deg);
transform-origin:right bottom;
transform-origin:22px 60px;
}
50%{
transform:rotate(0deg);
transform-origin:right bottom;
transform-origin:22px 60px;
}
75%{
transform:rotate(-30deg);
transform-origin:right bottom;
transform-origin:22px 60px;
}
100%{
transform:rotate(0deg);
transform-origin:22px 60px;
}
}
Reference in New Issue View Git Blame Copy Permalink