Created
February 4, 2017 04:20
-
-
Save theanhdo94/bf6f64d1eeb50cbf9b30a94e40a5c163 to your computer and use it in GitHub Desktop.
Move money animation style
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .wrapper{ | |
| width: 500px; | |
| text-align: center; | |
| } | |
| /* month & calendar */ | |
| .calendar{ | |
| width: 245px; | |
| height: 40px; | |
| text-align: left; | |
| float: left; | |
| } | |
| .month{ | |
| width:245px; | |
| height:40px; | |
| text-align: left; | |
| padding-top: 5px; | |
| font-family: 'Oswald'; | |
| font-size: 15px; | |
| color: white; | |
| float:right; | |
| } | |
| .Jan{ | |
| margin-top:-20px; | |
| animation: month 6s ease forwards; | |
| } | |
| .Feb{ | |
| margin-top:-25px; | |
| animation: month 6s 3s ease forwards; | |
| } | |
| .Mar{ | |
| margin-top:-20px; | |
| animation: month 6s 7s ease forwards; | |
| } | |
| .Apr{ | |
| animation: month 6s 11s ease forwards; | |
| } | |
| /* animation month */ | |
| @keyframes month{ | |
| 0%{opacity:0} | |
| 5%{ transform: scale(2); color: black; opacity:0.5} | |
| 10%{transform: translateY(0px);} | |
| 50%{opacity: 1} | |
| 100%{opacity: 0} | |
| } | |
| /* money amount */ | |
| .amount{ | |
| font-family: 'Roboto'; | |
| font-size: 24px; | |
| font-weight: lighter; | |
| color: white; | |
| } | |
| .get1{ | |
| margin-left: 50px; | |
| width: 100px; | |
| float: left; | |
| animation: get 2s 2s forwards; | |
| } | |
| .get2{ | |
| width: 100px; | |
| float: left; | |
| animation: get 2s 6s forwards; | |
| } | |
| .get3{ | |
| width: 100px; | |
| float: left; | |
| animation: get 2s 10s forwards; | |
| } | |
| .get4{ | |
| width: 100px; | |
| float: left; | |
| animation: get 2s 14s forwards; | |
| } | |
| /* get animation */ | |
| @keyframes get{ | |
| 0%{ opacity: 1} | |
| 30%{transform: translateY(15px); color: green; opacity: 0.5} | |
| 100%{transform: translateY(-10px); opacity: 0} | |
| } | |
| /* give money amount */ | |
| .give{ | |
| font-family: 'Roboto'; | |
| font-size: 18px; | |
| font-weight: lighter; | |
| color: white; | |
| } | |
| .give1{ | |
| margin-left: 50px; | |
| width: 100px; | |
| float: left; | |
| animation: give 2.5s 4s, | |
| give 2.5s 8s, | |
| give 2.5s 12s; | |
| } | |
| .give2{ | |
| width: 100px; | |
| float: left; | |
| animation: give 2.5s, | |
| give 2.5s 8s, | |
| give 2.5s 12s; | |
| } | |
| .give3{ | |
| width: 100px; | |
| float: left; | |
| animation: give 2.5s, | |
| give 2.5s 4s, | |
| give 2.5s 12s; | |
| } | |
| .give4{ | |
| width: 100px; | |
| float: left; | |
| animation: give 2.5s, | |
| give 2.5s 4s, | |
| give 2.5s 8s; | |
| } | |
| /* give animation */ | |
| @keyframes give{ | |
| 0%{ opacity: 1} | |
| 30%{ transform: translateY(-30px); color: red; opacity: 1} | |
| 100%{transform: translateY(-30px);opacity: 0} | |
| } | |
| /* replay button */ | |
| .button { | |
| padding-top: 300px; | |
| background-color: #fff; | |
| font-family: 'Oswald'; | |
| font-size: 16px; | |
| font-weight: lighter; | |
| cursor: pointer; | |
| float: inherit; | |
| } | |
| /* users */ | |
| .user{ | |
| position: absolute; | |
| top: 100px; | |
| padding-left: 50px; | |
| } | |
| .user1{ | |
| width: 100px; | |
| float: left; | |
| } | |
| .user2{ | |
| width: 100px; | |
| float: left; | |
| } | |
| .user3{ | |
| width: 100px; | |
| float: left; | |
| } | |
| .user4{ | |
| width: 100px; | |
| float: left; | |
| } | |
| /* usernames */ | |
| .username{ | |
| position: absolute; | |
| top: 200px; | |
| color: darkgrey; | |
| font-family: 'roboto'; | |
| font-size: 14px; | |
| font-weight: lighter; | |
| padding-left: 50px; | |
| } | |
| .you{ | |
| width: 100px; | |
| float: left; | |
| } | |
| .friend{ | |
| width: 100px; | |
| float: left; | |
| } | |
| /* money movement */ | |
| .money2{ | |
| position: absolute; | |
| top:195px; | |
| animation: rosca2 3s linear reverse forwards, | |
| rosca2a 3s 4s linear reverse forwards, | |
| rosca2b 3s 8s linear reverse forwards, | |
| rosca2c 3s 12s linear reverse forwards; | |
| } | |
| .money3{ | |
| position: absolute; | |
| top:195px; | |
| animation: rosca3 3s linear reverse forwards, | |
| rosca3a 3s 4s linear reverse forwards, | |
| rosca3b 3s 8s linear reverse forwards, | |
| rosca3c 3s 12s linear reverse forwards; | |
| } | |
| .money4{ | |
| position: absolute; | |
| top:195px; | |
| animation: rosca4 3s linear reverse forwards, | |
| rosca4a 3s 4s linear reverse forwards, | |
| rosca4b 3s 8s linear reverse forwards, | |
| rosca4c 3s 12s linear reverse forwards; | |
| } | |
| /* money animation */ | |
| @keyframes rosca2{ | |
| 0% {left: 195px; top: 190px; opacity:0} | |
| 25% {left: 95px; top: 190px; opacity:0} | |
| 50% {left: 95px; top: 250px;} | |
| 75% {left: 195px; top: 250px; opacity:1} | |
| 100% {left: 195px; top: 190px; opacity:0} | |
| } | |
| @keyframes rosca3{ | |
| 0%{left:295px; top: 190px; opacity: 0} | |
| 25%{left:95px;top:190px;opacity:0} | |
| 50%{left:95px;top:250px} | |
| 75%{left:295px;top:250px;opacity:1} | |
| 100%{left:295px;top:190px; opacity:0} | |
| } | |
| @keyframes rosca4{ | |
| 0%{left:395px; top: 190px; opacity:0} | |
| 25%{left:95px;top:190px;opacity:0} | |
| 50%{left:95px;top:250px} | |
| 75%{left:395px;top:250px;opacity:1} | |
| 100%{left:395px;top:190px; opacity: 0} | |
| } | |
| @keyframes rosca5{ | |
| 0%{left:495px; top: 190px; opacity:0} | |
| 25%{left:95px;top:190px;opacity:0} | |
| 50%{left:95px;top:250px} | |
| 75%{left:495px;top:250px;opacity:1} | |
| 100%{left:495px;top:190px; opacity: 0} | |
| } | |
| @keyframes rosca2a{ | |
| 0% {left: 95px; top: 190px; opacity:0} | |
| 25% {left: 195px; top: 190px; opacity:0} | |
| 50% {left: 195px; top: 250px;} | |
| 75% {left: 95px; top: 250px; opacity:1} | |
| 100% {left: 95px; top: 190px; opacity:0} | |
| } | |
| @keyframes rosca3a{ | |
| 0%{left:295px; top: 190px; opacity: 0} | |
| 25%{left:195px;top:190px;opacity:0} | |
| 50%{left:195px;top:250px} | |
| 75%{left:295px;top:250px;opacity:1} | |
| 100%{left:295px;top:190px; opacity:0} | |
| } | |
| @keyframes rosca4a{ | |
| 0%{left:395px; top: 190px; opacity:0} | |
| 25%{left:195px;top:190px;opacity:0} | |
| 50%{left:195px;top:250px} | |
| 75%{left:395px;top:250px;opacity:1} | |
| 100%{left:395px;top:190px; opacity: 0} | |
| } | |
| @keyframes rosca5a{ | |
| 0%{left:495px; top: 190px; opacity:0} | |
| 25%{left:195px;top:190px;opacity:0} | |
| 50%{left:195px;top:250px} | |
| 75%{left:495px;top:250px;opacity:1} | |
| 100%{left:495px;top:190px; opacity: 0} | |
| } | |
| @keyframes rosca2b{ | |
| 0% {left: 95px; top: 190px; opacity:0} | |
| 25% {left: 295px; top: 190px; opacity:0} | |
| 50% {left: 295px; top: 250px;} | |
| 75% {left: 95px; top: 250px; opacity:1} | |
| 100% {left: 95px; top: 190px; opacity:0} | |
| } | |
| @keyframes rosca3b{ | |
| 0%{left:195px; top: 190px; opacity: 0} | |
| 25%{left:295px;top:190px;opacity:0} | |
| 50%{left:295px;top:250px} | |
| 75%{left:195px;top:250px;opacity:1} | |
| 100%{left:195px;top:190px; opacity:0} | |
| } | |
| @keyframes rosca4b{ | |
| 0%{left:395px; top: 190px; opacity:0} | |
| 25%{left:295px;top:190px;opacity:0} | |
| 50%{left:295px;top:250px} | |
| 75%{left:395px;top:250px;opacity:1} | |
| 100%{left:395px;top:190px; opacity: 0} | |
| } | |
| @keyframes rosca5b{ | |
| 0%{left:495px; top: 190px; opacity:0} | |
| 25%{left:295px;top:190px;opacity:0} | |
| 50%{left:295px;top:250px} | |
| 75%{left:495px;top:250px;opacity:1} | |
| 100%{left:495px;top:190px; opacity: 0} | |
| } | |
| @keyframes rosca2c{ | |
| 0% {left: 95px; top: 190px; opacity:0} | |
| 25% {left: 395px; top: 190px; opacity:0} | |
| 50% {left: 395px; top: 250px;} | |
| 75% {left: 95px; top: 250px; opacity:1} | |
| 100% {left: 95px; top: 190px; opacity:0} | |
| } | |
| @keyframes rosca3c{ | |
| 0%{left:195px; top: 190px; opacity: 0} | |
| 25%{left:395px;top:190px;opacity:0} | |
| 50%{left:395px;top:250px} | |
| 75%{left:195px;top:250px;opacity:1} | |
| 100%{left:195px;top:190px; opacity:0} | |
| } | |
| @keyframes rosca4c{ | |
| 0%{left:295px; top: 190px; opacity:0} | |
| 25%{left:395px;top:190px;opacity:0} | |
| 50%{left:395px;top:250px} | |
| 75%{left:295px;top:250px;opacity:1} | |
| 100%{left:295px;top:190px; opacity: 0} | |
| } | |
| @keyframes rosca5c{ | |
| 0%{left:495px; top: 190px; opacity:0} | |
| 25%{left:395px;top:190px;opacity:0} | |
| 50%{left:395px;top:250px} | |
| 75%{left:495px;top:250px;opacity:1} | |
| 100%{left:495px;top:190px; opacity: 0} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment