mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-30 17:30:23 +02:00
Code Issues Releases Wiki Activity

feat: coin-icon earned (with animation)

Browse Source
This commit is contained in:
Mati
2019-02-09 14:10:07 +01:00
parent a0aed6a61a
commit 029bf0a58f
3 changed files with 26 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/icons.stories.js
View File

@@ -33,6 +33,7 @@ stories.add('icon', () => {
'snes-logo': 'snes-logo', 'snes-logo': 'snes-logo',
'snes-jp-logo': 'snes-jp-logo', 'snes-jp-logo': 'snes-jp-logo',
'nes-coin': 'nes-coin', 'nes-coin': 'nes-coin',
'nes-coin earned': 'nes-coin earned',
}, 'nes-icon twitter'); }, 'nes-icon twitter');
const selectedSize = radios('size', { const selectedSize = radios('size', {
default: '', default: '',

5
scss/pixel-arts/coin.scss
View File

@@ -33,4 +33,9 @@
@include pixelize($size, $coin, $coin-colors); @include pixelize($size, $coin, $coin-colors);
} }
&.earned {
animation: rotateIn 1.4s ease-out forwards,
fadeOut 2s ease-out forwards;
}
} }

20
scss/utilities/animations.scss
View File

@@ -7,3 +7,23 @@
opacity: 0; opacity: 0;
} }
} }
@keyframes rotateIn {
0% {
opacity: 0;
transform: rotateY(0) translateY(100%);
}
100% {
opacity: 1;
transform: rotateY(1800deg) translateY(0);
}
}
@keyframes fadeOut {
70% {
opacity: 1;
}
100% {
opacity: 0;
}
}