scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

slower spinner animation, with bezier timing

Browse source
This commit is contained in:
Ben Wheeler 2019-09-16 22:41:28 -04:00
parent 303481b61d
commit 5d1c46d24f
1 changed files with 2 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/spinner/spinner.scss
View file

@ -2,18 +2,13 @@
/* This class can be used on an icon that should spin. /* This class can be used on an icon that should spin.
It first plays the intro animation, then spins forever. */ It first plays the intro animation, then spins forever. */
animation-name: intro, spin; animation-name: intro, spin;
animation-duration: .25s, .5s; animation-duration: .25s, 1s;
animation-timing-function: cubic-bezier(.3, -3, .6, 3), linear; animation-timing-function: cubic-bezier(.3, -3, .6, 3), cubic-bezier(0.4, 0.1, 0.4, 1);
animation-delay: 0s, .25s; animation-delay: 0s, .25s;
animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite;
animation-direction: normal; animation-direction: normal;
width: 1.4rem; /* standard is 1.4 rem but can be overwritten by parent */ width: 1.4rem; /* standard is 1.4 rem but can be overwritten by parent */
height: 1.4rem; height: 1.4rem;
-webkit-animation-name: intro, spin;
-webkit-animation-duration: .25s, .5s;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-delay: 0s, .25s;
-webkit-animation-timing-function: cubic-bezier(.3, -3, .6, 3), linear;
transform-origin: center; transform-origin: center;
} }
@ -21,24 +16,20 @@
0% { 0% {
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
-webkit-transform: scale(0);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
-webkit-transform: scale(1);
} }
} }
@keyframes spin { @keyframes spin {
0% { 0% {
transform: rotate(0); transform: rotate(0);
-webkit-transform: rotate(0);
} }
100% { 100% {
transform: rotate(359deg); transform: rotate(359deg);
-webkit-transform: rotate(359deg);
} }
} }