#e8e8e8
1.newtons-cradle { 2 --uib-size: 50px; 3 --uib-speed: 1.2s; 4 --uib-color: #474554; 5 position: relative; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 width: var(--uib-size); 10 height: var(--uib-size); 11} 12 13.newtons-cradle__dot { 14 position: relative; 15 display: flex; 16 align-items: center; 17 height: 100%; 18 width: 25%; 19 transform-origin: center top; 20} 21 22.newtons-cradle__dot::after { 23 content: ''; 24 display: block; 25 width: 100%; 26 height: 25%; 27 border-radius: 50%; 28 background-color: var(--uib-color); 29} 30 31.newtons-cradle__dot:first-child { 32 animation: swing var(--uib-speed) linear infinite; 33} 34 35.newtons-cradle__dot:last-child { 36 animation: swing2 var(--uib-speed) linear infinite; 37} 38 39@keyframes swing { 40 0% { 41 transform: rotate(0deg); 42 animation-timing-function: ease-out; 43 } 44 45 25% { 46 transform: rotate(70deg); 47 animation-timing-function: ease-in; 48 } 49 50 50% { 51 transform: rotate(0deg); 52 animation-timing-function: linear; 53 } 54} 55 56@keyframes swing2 { 57 0% { 58 transform: rotate(0deg); 59 animation-timing-function: linear; 60 } 61 62 50% { 63 transform: rotate(0deg); 64 animation-timing-function: ease-out; 65 } 66 67 75% { 68 transform: rotate(-70deg); 69 animation-timing-function: ease-in; 70 } 71} 72
10K views
10K views
Comments
MIT License