Backupppert/boxicons
1
0
Fork 0
mirror of https://github.com/atisawd/boxicons.git synced 2024-11-13 19:04:52 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add spin-reversed animation. Closes #147

Browse source
This commit is contained in:
Dan Manastireanu 2024-04-26 16:45:33 +03:00
parent 9ffa9136e8
commit b707a331c4
No known key found for this signature in database
GPG key ID: 4ADB6ED298D5380B
4 changed files with 77 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -102,7 +102,7 @@ The `<box-icon>` custom element supports the following attributes:
- `rotate`: one of the following values: `90`, `180`, `270` - `rotate`: one of the following values: `90`, `180`, `270`
- `flip`: one of the following values: `horizontal`, `vertical` - `flip`: one of the following values: `horizontal`, `vertical`
- `border`: one of the following values: `square`, `circle` - `border`: one of the following values: `square`, `circle`
- `animation`: One of the following values: `spin`, `tada`, `flashing`, `burst`, `fade-left`, `fade-right`, `spin-hover`, `tada-hover`, `flashing-hover`, `burst-hover`, `fade-left-hover`, `fade-right-hover` - `animation`: One of the following values: `spin`, `spin-reverse`, `tada`, `flashing`, `burst`, `fade-left`, `fade-right`, `spin-hover`, `spin-reverse-hover`,`tada-hover`, `flashing-hover`, `burst-hover`, `fade-left-hover`, `fade-right-hover`
- `pull`: one of the following values: `left`,`right` - `pull`: one of the following values: `left`,`right`
The Custom Element class (`BoxIconElement`) exposes the following static members: The Custom Element class (`BoxIconElement`) exposes the following static members:

37
css/animations.css
View file

@ -24,6 +24,32 @@
transform: rotate(359deg); transform: rotate(359deg);
} }
} }
@-webkit-keyframes spin-reverse
{
0%
{
-webkit-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(-359deg);
transform: rotate(-359deg);
}
}
@keyframes spin-reverse
{
0%
{
-webkit-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(-359deg);
transform: rotate(-359deg);
}
}
@-webkit-keyframes burst @-webkit-keyframes burst
{ {
0% 0%
@ -312,6 +338,17 @@
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
} }
.bx-spin-reverse
{
-webkit-animation: spin-reverse 2s linear infinite;
animation: spin-reverse 2s linear infinite;
}
.bx-spin-reverse-hover:hover
{
-webkit-animation: spin-reverse 2s linear infinite;
animation: spin-reverse 2s linear infinite;
}
.bx-tada .bx-tada
{ {
-webkit-animation: tada 1.5s ease infinite; -webkit-animation: tada 1.5s ease infinite;

37
css/boxicons.css
View file

@ -76,6 +76,32 @@
transform: rotate(359deg); transform: rotate(359deg);
} }
} }
@-webkit-keyframes spin-reverse
{
0%
{
-webkit-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(-359deg);
transform: rotate(-359deg);
}
}
@keyframes spin-reverse
{
0%
{
-webkit-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(-359deg);
transform: rotate(-359deg);
}
}
@-webkit-keyframes burst @-webkit-keyframes burst
{ {
0% 0%
@ -364,6 +390,17 @@
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
} }
.bx-spin-reverse
{
-webkit-animation: spin-reverse 2s linear infinite;
animation: spin-reverse 2s linear infinite;
}
.bx-spin-reverse-hover:hover
{
-webkit-animation: spin-reverse 2s linear infinite;
animation: spin-reverse 2s linear infinite;
}
.bx-tada .bx-tada
{ {
-webkit-animation: tada 1.5s ease infinite; -webkit-animation: tada 1.5s ease infinite;

2
dev.box-icon-element.html
View file

@ -61,12 +61,14 @@
<select name="animation"> <select name="animation">
<option value="" selected>(none)</option> <option value="" selected>(none)</option>
<option value="spin">spin</option> <option value="spin">spin</option>
<option value="spin-reverse">spin-reverse</option>
<option value="tada">tada</option> <option value="tada">tada</option>
<option value="flashing">flashing</option> <option value="flashing">flashing</option>
<option value="burst">burst</option> <option value="burst">burst</option>
<option value="fade-left">fade-left</option> <option value="fade-left">fade-left</option>
<option value="fade-right">fade-right</option> <option value="fade-right">fade-right</option>
<option value="spin-hover">spin-hover</option> <option value="spin-hover">spin-hover</option>
<option value="spin-reverse-hover">spin-reverse-hover</option>
<option value="tada-hover">tada-hover</option> <option value="tada-hover">tada-hover</option>
<option value="flashing-hover">flashing-hover</option> <option value="flashing-hover">flashing-hover</option>
<option value="burst-hover">burst-hover</option> <option value="burst-hover">burst-hover</option>