515 lines
9.8 KiB
CSS

@-webkit-keyframes spin
{
0%
{
-webkit-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin
{
0%
{
-webkit-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes burst
{
0%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
90%
{
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 0;
}
}
@keyframes burst
{
0%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
90%
{
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 0;
}
}
@-webkit-keyframes flashing
{
0%
{
opacity: 1;
}
45%
{
opacity: 0;
}
90%
{
opacity: 1;
}
}
@keyframes flashing
{
0%
{
opacity: 1;
}
45%
{
opacity: 0;
}
90%
{
opacity: 1;
}
}
@-webkit-keyframes fade-left
{
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
75%
{
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
opacity: 0;
}
}
@keyframes fade-left
{
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
75%
{
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
opacity: 0;
}
}
@-webkit-keyframes fade-right
{
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
75%
{
-webkit-transform: translateX(20px);
transform: translateX(20px);
opacity: 0;
}
}
@keyframes fade-right
{
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
75%
{
-webkit-transform: translateX(20px);
transform: translateX(20px);
opacity: 0;
}
}
@-webkit-keyframes fade-up
{
0%
{
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
75%
{
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
opacity: 0;
}
}
@keyframes fade-up
{
0%
{
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
75%
{
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
opacity: 0;
}
}
@-webkit-keyframes fade-down
{
0%
{
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
75%
{
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
}
@keyframes fade-down
{
0%
{
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
75%
{
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
}
@-webkit-keyframes tada
{
from
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20%
{
-webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
}
30%,
50%,
70%,
90%
{
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
}
40%,
60%,
80%
{
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
}
to
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada
{
from
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20%
{
-webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
}
30%,
50%,
70%,
90%
{
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
}
40%,
60%,
80%
{
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
to
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes beat {
to {
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
}
@keyframes bounce
{
from
{
-webkit-transform: scale(1.1,1);
transform: scale(1.1,1);
}
25%
{
-webkit-transform: scale(0.9,1) translateY(-.25em);
transform: scale(0.9,1) translateY(-.25em);
}
50%
{
-webkit-transform: scale(1.1,0.9);
transform: scale(1.1,0.9);
}
75%
{
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
87.5%
{
-webkit-transform: scale(1, 1) translateY(-.1em);
transform: scale(1, 1) translateY(-.1em);
}
to
{
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes breathe {
from{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
50%{
-webkit-transform: scale(1.4);
transform: scale(1.4);
opacity: 0.4;
}
to {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes wiggle {
from{
-webkit-transform: translateX(0);
transform:translateX(0);
}
30%{
-webkit-transform: translateX(0.075em);
transform: translateX(0.075em);
}
60%{
-webkit-transform: translateX(-0.075em);
transform: translateX(-0.075em);
}
75%{
-webkit-transform: translateX(0.025em);
transform: translateX(0.025em);
}
90%{
-webkit-transform: translateX(-0.025em);
transform: translateX(-0.025em);
}
to {
-webkit-transform: translateX(0);
transform:translateX(0);
}
}
.bx-wiggle{
-webkit-animation: wiggle 1s infinite;
animation: wiggle 1s infinite;
animation-timing-function:cubic-bezier(.23,.57,.79,.58);
}
.bx-wiggle-hover:hover{
-webkit-animation: wiggle 1s infinite;
animation: wiggle 1s infinite;
animation-timing-function:cubic-bezier(.23,.57,.79,.58);
}
.bx-breathe{
-webkit-animation: breathe 3s infinite;
animation: breathe 3s infinite ease-in-out;
}
.bx-breathe-hover:hover
{
-webkit-animation: breathe 3s infinite;
animation: breathe 3s infinite ease-in-out;
}
.bx-bounce{
-webkit-animation: bounce 1s infinite;
animation: bounce 1s infinite;
animation-timing-function: cubic-bezier(.98,.97,.64,1.62);
}
.bx-bounce-hover:hover
{
-webkit-animation: bounce 1s infinite;
animation: bounce 1s infinite;
animation-timing-function: cubic-bezier(.98,.97,.64,1.62);
}
.bx-beat
{
-webkit-animation: beat .5s infinite alternate;
animation: beat .5s infinite alternate;
animation-timing-function: cubic-bezier(.19,.96,.65,1);
transform-origin: center;
}
.bx-spin
{
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.bx-spin-hover:hover
{
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.bx-tada
{
-webkit-animation: tada 1.5s ease infinite;
animation: tada 1.5s ease infinite;
}
.bx-tada-hover:hover
{
-webkit-animation: tada 1.5s ease infinite;
animation: tada 1.5s ease infinite;
}
.bx-flashing
{
-webkit-animation: flashing 1.5s infinite linear;
animation: flashing 1.5s infinite linear;
}
.bx-flashing-hover:hover
{
-webkit-animation: flashing 1.5s infinite linear;
animation: flashing 1.5s infinite linear;
}
.bx-burst
{
-webkit-animation: burst 1.5s infinite linear;
animation: burst 1.5s infinite linear;
}
.bx-burst-hover:hover
{
-webkit-animation: burst 1.5s infinite linear;
animation: burst 1.5s infinite linear;
}
.bx-fade-up
{
-webkit-animation: fade-up 1.5s infinite linear;
animation: fade-up 1.5s infinite linear;
}
.bx-fade-up-hover:hover
{
-webkit-animation: fade-up 1.5s infinite linear;
animation: fade-up 1.5s infinite linear;
}
.bx-fade-down
{
-webkit-animation: fade-down 1.5s infinite linear;
animation: fade-down 1.5s infinite linear;
}
.bx-fade-down-hover:hover
{
-webkit-animation: fade-down 1.5s infinite linear;
animation: fade-down 1.5s infinite linear;
}
.bx-fade-left
{
-webkit-animation: fade-left 1.5s infinite linear;
animation: fade-left 1.5s infinite linear;
}
.bx-fade-left-hover:hover
{
-webkit-animation: fade-left 1.5s infinite linear;
animation: fade-left 1.5s infinite linear;
}
.bx-fade-right
{
-webkit-animation: fade-right 1.5s infinite linear;
animation: fade-right 1.5s infinite linear;
}
.bx-fade-right-hover:hover
{
-webkit-animation: fade-right 1.5s infinite linear;
animation: fade-right 1.5s infinite linear;
}