mirror of
https://github.com/atisawd/boxicons.git
synced 2024-11-13 19:04:52 +01:00
ecf8e4c8f8
- added new dependencies to support building custom element - added webpack configuration - added source file for box-icon element - create two new css files with content from css/boxicon.css for animation and transformations
300 lines
5.1 KiB
CSS
300 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;
|
|
}
|