mirror of
https://github.com/atisawd/boxicons.git
synced 2024-11-13 19:04:52 +01:00
301 lines
5.1 KiB
CSS
301 lines
5.1 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 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);
|
||
|
}
|
||
|
}
|
||
|
.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-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;
|
||
|
}
|