secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Notifications have customisable duration and CSS animation in-and-out

Browse Source
This commit is contained in:
James Barnsley
2018-02-27 08:44:20 +13:00
parent 75d6e8c85e
commit e79e213c5a
6 changed files with 61 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/scss/global/_variables.scss
View File

@ -104,19 +104,45 @@ $bp_shallow: 650px;
animation-iteration-count: infinite;
}
@keyframes fadein {
0% {
opacity: 0;
transform: translateY(5px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
@mixin fadein($duration: 0.2s){
@keyframes fadein {
0% {
opacity: 0;
transform: translateY(5px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
animation-name: fadein;
animation-duration: $duration;
animation-timing-function: linear;
animation-iteration-count: 1;
}
@mixin fadein($duration: 0.2s){
animation-name: fadein;
@mixin fadeinout($duration: 3s){
@keyframes fadeinout {
0% {
opacity: 0;
transform: translateY(5px);
}
6% {
opacity: 1;
transform: translateY(0px);
}
94% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(5px);
}
}
animation-name: fadeinout;
animation-duration: $duration;
animation-timing-function: linear;
animation-iteration-count: 1;