108 lines
1.7 KiB
CSS
108 lines
1.7 KiB
CSS
|
|
@-webkit-keyframes bounce {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
20%,
|
||
|
|
50%,
|
||
|
|
80%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
-ms-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transform: translateY(-30px);
|
||
|
|
-ms-transform: translateY(-30px);
|
||
|
|
transform: translateY(-30px);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translateY(-15px);
|
||
|
|
-ms-transform: translateY(-15px);
|
||
|
|
transform: translateY(-15px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes bounce {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
20%,
|
||
|
|
50%,
|
||
|
|
80%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
-ms-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transform: translateY(-30px);
|
||
|
|
-ms-transform: translateY(-30px);
|
||
|
|
transform: translateY(-30px);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translateY(-15px);
|
||
|
|
-ms-transform: translateY(-15px);
|
||
|
|
transform: translateY(-15px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes blink {
|
||
|
|
50% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes blink {
|
||
|
|
50% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes pulsate {
|
||
|
|
0% {
|
||
|
|
transform: scale(0.6, 0.6);
|
||
|
|
opacity: 0.0;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
opacity: 1.0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: scale(1, 1);
|
||
|
|
opacity: 0.0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulsate {
|
||
|
|
0% {
|
||
|
|
transform: scale(0.6, 0.6);
|
||
|
|
opacity: 0.0;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
opacity: 1.0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: scale(1, 1);
|
||
|
|
opacity: 0.0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes animate-positive {
|
||
|
|
0% {
|
||
|
|
width: 0%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes animate-positive {
|
||
|
|
0% {
|
||
|
|
width: 0%;
|
||
|
|
}
|
||
|
|
}
|