Simplify animation used to denote draft is saved

The original implementation felt a bit too short, went with
a much simpler animation which sticks around for 5 seconds.

5 seconds seems to be the standard and the same timing gmail use
This commit is contained in:
Sam Saffron 2019-04-12 10:28:10 +10:00
parent ef621f4c6e
commit 2fea29a355
1 changed files with 4 additions and 31 deletions

View File

@ -455,50 +455,23 @@ div.ac-wrap {
}
.save-animation {
transition: all 1s ease-in-out;
-webkit-transform: scale(0.1);
transform: scale(0.1);
-webkit-animation: transformer 1.5s forwards;
animation: transformer 1.5s forwards;
-webkit-animation: transformer 5s forwards;
animation: transformer 5s forwards;
}
@-webkit-keyframes transformer {
0% {
-webkit-transform: scale(0.1);
}
20% {
-webkit-transform: scale(1.2);
}
40% {
-webkit-transform: scale(1);
-webkit-filter: opacity(1);
}
60% {
-webkit-transform: scale(1);
90% {
-webkit-filter: opacity(1);
}
100% {
-webkit-transform: scale(1);
-webkit-filter: opacity(0);
}
}
@keyframes transformer {
0% {
transform: scale(0.1);
}
20% {
transform: scale(1.2);
}
40% {
transform: scale(1);
opacity: 1;
}
60% {
transform: scale(1);
90% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}