github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-27 08:46:19 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Simplify animation used to denote draft is saved

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/assets/stylesheets/common/base/compose.scss
View File

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