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:
parent
ef621f4c6e
commit
2fea29a355
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue