flat: 视频版本0.1
This commit is contained in:
193
common/animation.css
Normal file
193
common/animation.css
Normal file
@@ -0,0 +1,193 @@
|
||||
/*base code*/
|
||||
.animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.hinge {
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
/*the animation definition*/
|
||||
@-webkit-keyframes tada {
|
||||
0% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
|
||||
10%,
|
||||
20% {
|
||||
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||||
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
|
||||
}
|
||||
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
0% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
|
||||
10%,
|
||||
20% {
|
||||
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||||
-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||||
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
|
||||
}
|
||||
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
}
|
||||
|
||||
.tada {
|
||||
-webkit-animation-name: tada;
|
||||
animation-name: tada
|
||||
}
|
||||
|
||||
|
||||
.btn-tada:active {
|
||||
-webkit-animation-name: tada;
|
||||
animation-name: tada
|
||||
}
|
||||
|
||||
/*the animation definition*/
|
||||
@-webkit-keyframes rubberBand {
|
||||
0% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
|
||||
30% {
|
||||
-webkit-transform: scale3d(1.25, .75, 1);
|
||||
transform: scale3d(1.25, .75, 1)
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale3d(0.75, 1.25, 1);
|
||||
transform: scale3d(0.75, 1.25, 1)
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale3d(1.15, .85, 1);
|
||||
transform: scale3d(1.15, .85, 1)
|
||||
}
|
||||
|
||||
65% {
|
||||
-webkit-transform: scale3d(.95, 1.05, 1);
|
||||
transform: scale3d(.95, 1.05, 1)
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: scale3d(1.05, .95, 1);
|
||||
transform: scale3d(1.05, .95, 1)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rubberBand {
|
||||
0% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
|
||||
30% {
|
||||
-webkit-transform: scale3d(1.25, .75, 1);
|
||||
-ms-transform: scale3d(1.25, .75, 1);
|
||||
transform: scale3d(1.25, .75, 1)
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale3d(0.75, 1.25, 1);
|
||||
-ms-transform: scale3d(0.75, 1.25, 1);
|
||||
transform: scale3d(0.75, 1.25, 1)
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale3d(1.15, .85, 1);
|
||||
-ms-transform: scale3d(1.15, .85, 1);
|
||||
transform: scale3d(1.15, .85, 1)
|
||||
}
|
||||
|
||||
65% {
|
||||
-webkit-transform: scale3d(.95, 1.05, 1);
|
||||
-ms-transform: scale3d(.95, 1.05, 1);
|
||||
transform: scale3d(.95, 1.05, 1)
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: scale3d(1.05, .95, 1);
|
||||
-ms-transform: scale3d(1.05, .95, 1);
|
||||
transform: scale3d(1.05, .95, 1)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
}
|
||||
|
||||
.rubberBand {
|
||||
-webkit-animation-name: rubberBand;
|
||||
animation-name: rubberBand
|
||||
}
|
||||
|
||||
|
||||
.btn-rubberBand:active {
|
||||
-webkit-animation-name: tada;
|
||||
animation-name: tada
|
||||
}
|
Reference in New Issue
Block a user