coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: improve physicality of draft bubble (it's the little details)

Browse Source
This commit is contained in:
Tom Moor
2019-08-24 17:43:23 -07:00
parent d96afad6c0
commit 347015cf86
2 changed files with 51 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
shared/styles/animations.js
View File

@ -18,6 +18,51 @@ export const fadeAndScaleIn = keyframes`
}
`;
export const bounceIn = keyframes`
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
`;
export const pulsate = keyframes`
0% { opacity: 1; }
50% { opacity: 0.5; }