GuerillaStudio/souvenir
GuerillaStudio/souvenir
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/souvenir.git synced 2024-11-09 22:51:53 +00:00
Code Issues Releases Activity Actions

style(download): Add animation on preview

Browse source
This commit is contained in:
Tixie 2019-05-24 21:31:36 +02:00
parent ca105d0371
commit fd218a2017
1 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/assets/css/5-screens/download.css
View file

@ -21,6 +21,18 @@
max-width: 100%; max-width: 100%;
width: 16.2rem; width: 16.2rem;
border-radius: 42rem; border-radius: 42rem;
animation: previewEnterWave cubic-bezier(.18,.89,0,1.57) .4s forwards;
will-change: transform;
}
@keyframes previewEnterWave {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
} }
.download-preview__flower { .download-preview__flower {
@ -31,6 +43,24 @@
height: 7.9rem; height: 7.9rem;
} }
.download-preview__flower * {
transform: scale3d(0, 0, 0);
transform-origin: bottom left;
animation: previewEnterFlower .7s cubic-bezier(0,.76,.32,1) .4s forwards;
will-change: transform;
}
@keyframes previewEnterFlower {
from {
transform: scale3d(0, 0, 0) rotate(50deg);
}
to {
transform: scale3d(1, 1, 1) rotate(0deg);
}
}
/* Button /* Button
-------------------------------------------------------------- */ -------------------------------------------------------------- */