Advertisement
Guest User

Untitled

a guest
Jul 16th, 2017
238
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.27 KB | None | 0 0
  1. body {
  2.     background-color: #404456;
  3. }
  4.  
  5. div {
  6.     -webkit-animation: seconds 1.0s forwards;
  7.     -webkit-animation-iteration-count: 1;
  8.     -webkit-animation-delay: 5s;
  9.     animation: seconds 1.0s forwards;
  10.     animation-iteration-count: 1;
  11.     animation-delay: 5s;
  12.     position: relative;
  13. }
  14.  
  15. @-webkit-keyframes seconds {
  16.     0% {
  17.         opacity: 1;
  18.     }
  19.     100% {
  20.         opacity: 0;
  21.         left: -9999px;
  22.     }
  23. }
  24.  
  25. @keyframes seconds {
  26.     0% {
  27.         opacity: 1;
  28.     }
  29.     100% {
  30.         opacity: 0;
  31.         left: -9999px;
  32.     }
  33. }
  34.  
  35. #loader {
  36.     position: absolute;
  37.     top: 50%;
  38.     left: 50%;
  39.     margin-top: -2.7em;
  40.     margin-left: -2.7em;
  41.     width: 5.4em;
  42.     height: 5.4em;
  43.     background-color: #404456;
  44. }
  45.  
  46. #hill {
  47.     animation-delay: 5s;
  48.     position: absolute;
  49.     width: 7.1em;
  50.     height: 7.1em;
  51.     top: 1.7em;
  52.     left: 1.7em;
  53.     background-color: transparent;
  54.     border-left: .25em solid whitesmoke;
  55.     transform: rotate(45deg);
  56. }
  57.  
  58. #hill:after {
  59.     content: '';
  60.     position: absolute;
  61.     width: 7.1em;
  62.     height: 7.1em;
  63.     left: 0;
  64.     background-color: #404456;
  65. }
  66.  
  67. #box {
  68.     position: absolute;
  69.     left: 0;
  70.     bottom: -.1em;
  71.     width: 1em;
  72.     height: 1em;
  73.     background-color: transparent;
  74.     border: .25em solid whitesmoke;
  75.     border-radius: 15%;
  76.     transform: translate(0, -1em) rotate(-45deg);
  77.     animation: push 2.5s cubic-bezier(.79, 0, .47, .97) infinite;
  78. }
  79.  
  80. @keyframes push {
  81.     0% {
  82.         transform: translate(0, -1em) rotate(-45deg);
  83.     }
  84.     5% {
  85.         transform: translate(0, -1em) rotate(-50deg);
  86.     }
  87.     20% {
  88.         transform: translate(1em, -2em) rotate(47deg);
  89.     }
  90.     25% {
  91.         transform: translate(1em, -2em) rotate(45deg);
  92.     }
  93.     30% {
  94.         transform: translate(1em, -2em) rotate(40deg);
  95.     }
  96.     45% {
  97.         transform: translate(2em, -3em) rotate(137deg);
  98.     }
  99.     50% {
  100.         transform: translate(2em, -3em) rotate(135deg);
  101.     }
  102.     55% {
  103.         transform: translate(2em, -3em) rotate(130deg);
  104.     }
  105.     70% {
  106.         transform: translate(3em, -4em) rotate(217deg);
  107.     }
  108.     75% {
  109.         transform: translate(3em, -4em) rotate(220deg);
  110.     }
  111.     100% {
  112.         transform: translate(0, -1em) rotate(-225deg);
  113.     }
  114. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement