@-webkit-keyframes sticky { 0% { top: -100px; } 100% { top: 0; } } @keyframes sticky { 0% { top: -100px; } 100% { top: 0; } } @-webkit-keyframes rotated_circle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotated_circle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes semi_rotated { 0%, 100% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } 50% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } } @keyframes semi_rotated { 0%, 100% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } 50% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } } @-webkit-keyframes semi_rotated_two { 0%, 100% { -webkit-transform: rotate(-11deg); transform: rotate(-11deg); } 50% { -webkit-transform: rotate(11deg); transform: rotate(11deg); } } @keyframes semi_rotated_two { 0%, 100% { -webkit-transform: rotate(-11deg); transform: rotate(-11deg); } 50% { -webkit-transform: rotate(11deg); transform: rotate(11deg); } } @-webkit-keyframes move_arround { 0% { top: 20px; left: 20px; } 25% { top: 20px; left: -20px; } 50% { top: -20px; left: -20px; } 75% { top: -20px; left: 20px; } 100% { top: 20px; left: 20px; } } @keyframes move_arround { 0% { top: 20px; left: 20px; } 25% { top: 20px; left: -20px; } 50% { top: -20px; left: -20px; } 75% { top: -20px; left: 20px; } 100% { top: 20px; left: 20px; } } @-webkit-keyframes upDownLeft { 0%, 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25%, 75% { -webkit-transform: translate(0px, 50px); transform: translate(0px, 50px); } 50% { -webkit-transform: translate(-50px, 50px); transform: translate(-50px, 50px); } } @keyframes upDownLeft { 0%, 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25%, 75% { -webkit-transform: translate(0px, 50px); transform: translate(0px, 50px); } 50% { -webkit-transform: translate(-50px, 50px); transform: translate(-50px, 50px); } } @-webkit-keyframes shapeAnimationOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 0px) rotate(270deg); transform: translate(150px, 0px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 0px) rotate(270deg); transform: translate(150px, 0px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationTwo { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px, 0px) rotate(270deg); transform: translate(-150px, 0px) rotate(270deg); } 50% { -webkit-transform: translate(-150px, 150px) rotate(180deg); transform: translate(-150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationTwo { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px, 0px) rotate(270deg); transform: translate(-150px, 0px) rotate(270deg); } 50% { -webkit-transform: translate(-150px, 150px) rotate(180deg); transform: translate(-150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationThree { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(50px, 150px) rotate(90deg); transform: translate(50px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 50px) rotate(270deg); transform: translate(150px, 50px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationThree { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(50px, 150px) rotate(90deg); transform: translate(50px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 50px) rotate(270deg); transform: translate(150px, 50px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationFour { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px -50px) rotate(90deg); transform: translate(-150px -50px) rotate(90deg); } 50% { -webkit-transform: translate(-150px, -150px) rotate(180deg); transform: translate(-150px, -150px) rotate(180deg); } 75% { -webkit-transform: translate(-50px, -150px) rotate(270deg); transform: translate(-50px, -150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationFour { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px -50px) rotate(90deg); transform: translate(-150px -50px) rotate(90deg); } 50% { -webkit-transform: translate(-150px, -150px) rotate(180deg); transform: translate(-150px, -150px) rotate(180deg); } 75% { -webkit-transform: translate(-50px, -150px) rotate(270deg); transform: translate(-50px, -150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationFive { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-100px -100px) rotate(90deg); transform: translate(-100px -100px) rotate(90deg); } 50% { -webkit-transform: translate(100px, 50px) rotate(180deg); transform: translate(100px, 50px) rotate(180deg); } 75% { -webkit-transform: translate(-100px, 150px) rotate(270deg); transform: translate(-100px, 150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationFive { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-100px -100px) rotate(90deg); transform: translate(-100px -100px) rotate(90deg); } 50% { -webkit-transform: translate(100px, 50px) rotate(180deg); transform: translate(100px, 50px) rotate(180deg); } 75% { -webkit-transform: translate(-100px, 150px) rotate(270deg); transform: translate(-100px, 150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes down-up-one { 0% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(25px); transform: rotateX(0deg) translateY(25px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @keyframes down-up-one { 0% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(25px); transform: rotateX(0deg) translateY(25px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @-webkit-keyframes down-up-two { 0% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } 50% { -webkit-transform: rotateX(0deg) translate(25px, -25px); transform: rotateX(0deg) translate(25px, -25px); } 100% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } } @keyframes down-up-two { 0% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } 50% { -webkit-transform: rotateX(0deg) translate(25px, -25px); transform: rotateX(0deg) translate(25px, -25px); } 100% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } } @-webkit-keyframes leftRightOne { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-100px); transform: translateX(-100px); } } @keyframes leftRightOne { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-100px); transform: translateX(-100px); } } @-webkit-keyframes leftRightTwo { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(100px); transform: translateX(100px); } } @keyframes leftRightTwo { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(100px); transform: translateX(100px); } } @-webkit-keyframes zoomInOut { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes zoomInOut { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @-webkit-keyframes border { 0% { width: 0; height: 0; } 50% { width: 0; height: 100%; } 100% { width: 100%; height: 100%; } } @keyframes border { 0% { width: 0; height: 0; } 50% { width: 0; height: 100%; } 100% { width: 100%; height: 100%; } }