아 흔들고 싶다.

아 흔들고 싶다.<style> @charset "UTF-8"; @import‎ url(https://fonts.googleapis.com/css?family=Gentium+Basic); @import‎ url(https://fonts.googleapis.com/css?family=Dancing+Script); .shake { display: inline-block; transform-origin: center center; } .shake:hover { animation-name: shake-base; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez { animation-name: shake-base; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; animation-play-state: paused; } .shake.freez.shake-hard { animation-name: shake-hard; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-slow { animation-name: shake-slow; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-little { animation-name: shake-little; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-horizontal { animation-name: shake-horizontal; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-vertical { animation-name: shake-vertical; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-rotate { animation-name: shake-rotate; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-opacity { animation-name: shake-opacity; animation-duration: 200ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-crazy { animation-name: shake-crazy; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez:hover { animation-play-state: running; } .shake.shake-hard:hover { animation-name: shake-hard; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-slow:hover { animation-name: shake-slow; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-little:hover { animation-name: shake-little; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-horizontal:hover { animation-name: shake-horizontal; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-vertical:hover { animation-name: shake-vertical; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-rotate:hover { animation-name: shake-rotate; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-opacity:hover { animation-name: shake-opacity; animation-duration: 200ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-crazy:hover { animation-name: shake-crazy; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } * { animation-name: shake-base; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-hard { animation-name: shake-hard; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-slow { animation-name: shake-slow; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-little { animation-name: shake-little; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-horizontal { animation-name: shake-horizontal; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-vertical { animation-name: shake-vertical; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-rotate { animation-name: shake-rotate; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-opacity { animation-name: shake-opacity; animation-duration: 200ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-crazy { animation-name: shake-crazy; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.hover-stop:hover { animation-play-state: paused; } .shake.shake-delay { animation-name: shake-base; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 4s; } @keyframes shake-base { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(-0.5px, 1.5px) rotate(1.5deg); } 4% { transform: translate(2.5px, -0.5px) rotate(1.5deg); } 6% { transform: translate(0.5px, -0.5px) rotate(1.5deg); } 8% { transform: translate(1.5px, -1.5px) rotate(1.5deg); } 10% { transform: translate(-0.5px, -0.5px) rotate(-0.5deg); } 12% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); } 14% { transform: translate(-1.5px, 1.5px) rotate(-0.5deg); } 16% { transform: translate(2.5px, -0.5px) rotate(0.5deg); } 18% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); } 20% { transform: translate(2.5px, -0.5px) rotate(-0.5deg); } 22% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); } 24% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); } 26% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); } 28% { transform: translate(-1.5px, -1.5px) rotate(1.5deg); } 30% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); } 32% { transform: translate(-1.5px, -1.5px) rotate(1.5deg); } 34% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); } 36% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); } 38% { transform: translate(2.5px, -0.5px) rotate(1.5deg); } 40% { transform: translate(0.5px, -1.5px) rotate(0.5deg); } 42% { transform: translate(2.5px, -0.5px) rotate(-0.5deg); } 44% { transform: translate(1.5px, 1.5px) rotate(0.5deg); } 46% { transform: translate(0.5px, -1.5px) rotate(1.5deg); } 48% { transform: translate(-1.5px, -0.5px) rotate(-0.5deg); } 50% { transform: translate(1.5px, -0.5px) rotate(-0.5deg); } 52% { transform: translate(2.5px, -1.5px) rotate(-0.5deg); } 54% { transform: translate(2.5px, 1.5px) rotate(0.5deg); } 56% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); } 58% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); } 60% { transform: translate(2.5px, -0.5px) rotate(1.5deg); } 62% { transform: translate(1.5px, -0.5px) rotate(1.5deg); } 64% { transform: translate(-1.5px, 2.5px) rotate(-0.5deg); } 66% { transform: translate(0.5px, 2.5px) rotate(0.5deg); } 68% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); } 70% { transform: translate(-1.5px, 2.5px) rotate(0.5deg); } 72% { transform: translate(-0.5px, 1.5px) rotate(-0.5deg); } 74% { transform: translate(1.5px, 1.5px) rotate(0.5deg); } 76% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); } 78% { transform: translate(2.5px, 1.5px) rotate(-0.5deg); } 80% { transform: translate(2.5px, -0.5px) rotate(1.5deg); } 82% { transform: translate(-1.5px, -1.5px) rotate(0.5deg); } 84% { transform: translate(2.5px, 0.5px) rotate(-0.5deg); } 86% { transform: translate(1.5px, 2.5px) rotate(-0.5deg); } 88% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); } 90% { transform: translate(-1.5px, 2.5px) rotate(-0.5deg); } 92% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); } 94% { transform: translate(1.5px, 2.5px) rotate(-0.5deg); } 96% { transform: translate(0.5px, -1.5px) rotate(0.5deg); } 98% { transform: translate(2.5px, 1.5px) rotate(1.5deg); } } @keyframes shake-little { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(1px, 1px) rotate(0.5deg); } 4% { transform: translate(0px, 0px) rotate(0.5deg); } 6% { transform: translate(1px, 1px) rotate(0.5deg); } 8% { transform: translate(0px, 1px) rotate(0.5deg); } 10% { transform: translate(1px, 1px) rotate(0.5deg); } 12% { transform: translate(0px, 1px) rotate(0.5deg); } 14% { transform: translate(0px, 1px) rotate(0.5deg); } 16% { transform: translate(1px, 0px) rotate(0.5deg); } 18% { transform: translate(0px, 0px) rotate(0.5deg); } 20% { transform: translate(0px, 0px) rotate(0.5deg); } 22% { transform: translate(1px, 0px) rotate(0.5deg); } 24% { transform: translate(0px, 1px) rotate(0.5deg); } 26% { transform: translate(0px, 0px) rotate(0.5deg); } 28% { transform: translate(0px, 0px) rotate(0.5deg); } 30% { transform: translate(1px, 1px) rotate(0.5deg); } 32% { transform: translate(1px, 1px) rotate(0.5deg); } 34% { transform: translate(1px, 0px) rotate(0.5deg); } 36% { transform: translate(0px, 1px) rotate(0.5deg); } 38% { transform: translate(1px, 0px) rotate(0.5deg); } 40% { transform: translate(1px, 1px) rotate(0.5deg); } 42% { transform: translate(0px, 0px) rotate(0.5deg); } 44% { transform: translate(1px, 0px) rotate(0.5deg); } 46% { transform: translate(1px, 1px) rotate(0.5deg); } 48% { transform: translate(0px, 1px) rotate(0.5deg); } 50% { transform: translate(1px, 0px) rotate(0.5deg); } 52% { transform: translate(0px, 0px) rotate(0.5deg); } 54% { transform: translate(1px, 1px) rotate(0.5deg); } 56% { transform: translate(0px, 0px) rotate(0.5deg); } 58% { transform: translate(0px, 0px) rotate(0.5deg); } 60% { transform: translate(1px, 0px) rotate(0.5deg); } 62% { transform: translate(1px, 0px) rotate(0.5deg); } 64% { transform: translate(1px, 0px) rotate(0.5deg); } 66% { transform: translate(1px, 0px) rotate(0.5deg); } 68% { transform: translate(0px, 0px) rotate(0.5deg); } 70% { transform: translate(0px, 0px) rotate(0.5deg); } 72% { transform: translate(0px, 0px) rotate(0.5deg); } 74% { transform: translate(0px, 1px) rotate(0.5deg); } 76% { transform: translate(0px, 1px) rotate(0.5deg); } 78% { transform: translate(0px, 1px) rotate(0.5deg); } 80% { transform: translate(0px, 1px) rotate(0.5deg); } 82% { transform: translate(1px, 0px) rotate(0.5deg); } 84% { transform: translate(1px, 1px) rotate(0.5deg); } 86% { transform: translate(0px, 0px) rotate(0.5deg); } 88% { transform: translate(1px, 1px) rotate(0.5deg); } 90% { transform: translate(1px, 1px) rotate(0.5deg); } 92% { transform: translate(0px, 0px) rotate(0.5deg); } 94% { transform: translate(1px, 1px) rotate(0.5deg); } 96% { transform: translate(1px, 1px) rotate(0.5deg); } 98% { transform: translate(0px, 0px) rotate(0.5deg); } } @keyframes shake-slow { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(3px, -9px) rotate(1.5deg); } 4% { transform: translate(7px, -8px) rotate(2.5deg); } 6% { transform: translate(-6px, -1px) rotate(-1.5deg); } 8% { transform: translate(-5px, 0px) rotate(-1.5deg); } 10% { transform: translate(9px, 9px) rotate(3.5deg); } 12% { transform: translate(3px, 7px) rotate(3.5deg); } 14% { transform: translate(6px, 1px) rotate(-1.5deg); } 16% { transform: translate(-8px, 10px) rotate(-2.5deg); } 18% { transform: translate(3px, -3px) rotate(1.5deg); } 20% { transform: translate(-7px, -8px) rotate(1.5deg); } 22% { transform: translate(9px, 5px) rotate(1.5deg); } 24% { transform: translate(-8px, 2px) rotate(-1.5deg); } 26% { transform: translate(2px, 2px) rotate(-2.5deg); } 28% { transform: translate(1px, 9px) rotate(3.5deg); } 30% { transform: translate(-6px, -3px) rotate(-0.5deg); } 32% { transform: translate(-8px, -4px) rotate(-2.5deg); } 34% { transform: translate(7px, 2px) rotate(3.5deg); } 36% { transform: translate(-4px, 0px) rotate(-1.5deg); } 38% { transform: translate(-2px, 8px) rotate(1.5deg); } 40% { transform: translate(-6px, 9px) rotate(1.5deg); } 42% { transform: translate(3px, 2px) rotate(1.5deg); } 44% { transform: translate(0px, -7px) rotate(-2.5deg); } 46% { transform: translate(-7px, -5px) rotate(-0.5deg); } 48% { transform: translate(5px, -6px) rotate(2.5deg); } 50% { transform: translate(-9px, 2px) rotate(1.5deg); } 52% { transform: translate(6px, 8px) rotate(3.5deg); } 54% { transform: translate(-2px, 5px) rotate(3.5deg); } 56% { transform: translate(-1px, 3px) rotate(0.5deg); } 58% { transform: translate(7px, 10px) rotate(-0.5deg); } 60% { transform: translate(9px, -4px) rotate(-1.5deg); } 62% { transform: translate(-5px, 7px) rotate(3.5deg); } 64% { transform: translate(3px, 10px) rotate(-1.5deg); } 66% { transform: translate(7px, 2px) rotate(-1.5deg); } 68% { transform: translate(5px, -9px) rotate(1.5deg); } 70% { transform: translate(-9px, 1px) rotate(2.5deg); } 72% { transform: translate(5px, 6px) rotate(0.5deg); } 74% { transform: translate(9px, -6px) rotate(3.5deg); } 76% { transform: translate(8px, 4px) rotate(-2.5deg); } 78% { transform: translate(-9px, -8px) rotate(-0.5deg); } 80% { transform: translate(-2px, 3px) rotate(-2.5deg); } 82% { transform: translate(8px, 0px) rotate(-2.5deg); } 84% { transform: translate(-8px, 1px) rotate(0.5deg); } 86% { transform: translate(-4px, -6px) rotate(-1.5deg); } 88% { transform: translate(3px, 7px) rotate(2.5deg); } 90% { transform: translate(9px, 5px) rotate(1.5deg); } 92% { transform: translate(0px, -8px) rotate(3.5deg); } 94% { transform: translate(-4px, 5px) rotate(3.5deg); } 96% { transform: translate(4px, 0px) rotate(3.5deg); } 98% { transform: translate(8px, -6px) rotate(2.5deg); } } @keyframes shake-hard { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(7px, -5px) rotate(2.5deg); } 4% { transform: translate(7px, -8px) rotate(0.5deg); } 6% { transform: translate(-3px, 0px) rotate(-1.5deg); } 8% { transform: translate(-8px, 3px) rotate(-0.5deg); } 10% { transform: translate(5px, -1px) rotate(3.5deg); } 12% { transform: translate(8px, -1px) rotate(2.5deg); } 14% { transform: translate(-6px, 0px) rotate(3.5deg); } 16% { transform: translate(-7px, -7px) rotate(3.5deg); } 18% { transform: translate(5px, -4px) rotate(-2.5deg); } 20% { transform: translate(0px, 8px) rotate(2.5deg); } 22% { transform: translate(5px, 9px) rotate(2.5deg); } 24% { transform: translate(9px, 0px) rotate(2.5deg); } 26% { transform: translate(10px, 10px) rotate(-1.5deg); } 28% { transform: translate(-6px, 3px) rotate(2.5deg); } 30% { transform: translate(6px, 2px) rotate(-0.5deg); } 32% { transform: translate(-6px, 7px) rotate(2.5deg); } 34% { transform: translate(9px, 9px) rotate(0.5deg); } 36% { transform: translate(5px, 2px) rotate(-0.5deg); } 38% { transform: translate(4px, 2px) rotate(-0.5deg); } 40% { transform: translate(-6px, 4px) rotate(-0.5deg); } 42% { transform: translate(10px, -6px) rotate(1.5deg); } 44% { transform: translate(-2px, 1px) rotate(-0.5deg); } 46% { transform: translate(-7px, 8px) rotate(1.5deg); } 48% { transform: translate(-1px, 8px) rotate(1.5deg); } 50% { transform: translate(1px, 7px) rotate(2.5deg); } 52% { transform: translate(-5px, 10px) rotate(0.5deg); } 54% { transform: translate(3px, 10px) rotate(1.5deg); } 56% { transform: translate(1px, -9px) rotate(-0.5deg); } 58% { transform: translate(3px, 9px) rotate(-0.5deg); } 60% { transform: translate(-7px, -8px) rotate(-0.5deg); } 62% { transform: translate(-6px, -9px) rotate(-2.5deg); } 64% { transform: translate(-1px, -2px) rotate(0.5deg); } 66% { transform: translate(8px, 9px) rotate(2.5deg); } 68% { transform: translate(-2px, -1px) rotate(-0.5deg); } 70% { transform: translate(-2px, 4px) rotate(2.5deg); } 72% { transform: translate(-1px, 5px) rotate(1.5deg); } 74% { transform: translate(-9px, 5px) rotate(1.5deg); } 76% { transform: translate(8px, -1px) rotate(-1.5deg); } 78% { transform: translate(0px, -7px) rotate(0.5deg); } 80% { transform: translate(0px, 2px) rotate(2.5deg); } 82% { transform: translate(-2px, 1px) rotate(1.5deg); } 84% { transform: translate(-3px, 8px) rotate(2.5deg); } 86% { transform: translate(-1px, -4px) rotate(-1.5deg); } 88% { transform: translate(-3px, 6px) rotate(2.5deg); } 90% { transform: translate(9px, -7px) rotate(-0.5deg); } 92% { transform: translate(-6px, 1px) rotate(-1.5deg); } 94% { transform: translate(3px, -5px) rotate(-1.5deg); } 96% { transform: translate(9px, -6px) rotate(-2.5deg); } 98% { transform: translate(10px, -7px) rotate(3.5deg); } } @keyframes shake-horizontal { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(7px, 0px) rotate(0deg); } 4% { transform: translate(-7px, 0px) rotate(0deg); } 6% { transform: translate(4px, 0px) rotate(0deg); } 8% { transform: translate(7px, 0px) rotate(0deg); } 10% { transform: translate(5px, 0px) rotate(0deg); } 12% { transform: translate(-6px, 0px) rotate(0deg); } 14% { transform: translate(-4px, 0px) rotate(0deg); } 16% { transform: translate(6px, 0px) rotate(0deg); } 18% { transform: translate(0px, 0px) rotate(0deg); } 20% { transform: translate(-8px, 0px) rotate(0deg); } 22% { transform: translate(-7px, 0px) rotate(0deg); } 24% { transform: translate(-8px, 0px) rotate(0deg); } 26% { transform: translate(-6px, 0px) rotate(0deg); } 28% { transform: translate(-2px, 0px) rotate(0deg); } 30% { transform: translate(0px, 0px) rotate(0deg); } 32% { transform: translate(-3px, 0px) rotate(0deg); } 34% { transform: translate(-4px, 0px) rotate(0deg); } 36% { transform: translate(8px, 0px) rotate(0deg); } 38% { transform: translate(-1px, 0px) rotate(0deg); } 40% { transform: translate(0px, 0px) rotate(0deg); } 42% { transform: translate(4px, 0px) rotate(0deg); } 44% { transform: translate(9px, 0px) rotate(0deg); } 46% { transform: translate(2px, 0px) rotate(0deg); } 48% { transform: translate(-4px, 0px) rotate(0deg); } 50% { transform: translate(3px, 0px) rotate(0deg); } 52% { transform: translate(1px, 0px) rotate(0deg); } 54% { transform: translate(6px, 0px) rotate(0deg); } 56% { transform: translate(-9px, 0px) rotate(0deg); } 58% { transform: translate(7px, 0px) rotate(0deg); } 60% { transform: translate(-2px, 0px) rotate(0deg); } 62% { transform: translate(3px, 0px) rotate(0deg); } 64% { transform: translate(-5px, 0px) rotate(0deg); } 66% { transform: translate(10px, 0px) rotate(0deg); } 68% { transform: translate(-5px, 0px) rotate(0deg); } 70% { transform: translate(-4px, 0px) rotate(0deg); } 72% { transform: translate(1px, 0px) rotate(0deg); } 74% { transform: translate(2px, 0px) rotate(0deg); } 76% { transform: translate(3px, 0px) rotate(0deg); } 78% { transform: translate(-2px, 0px) rotate(0deg); } 80% { transform: translate(-9px, 0px) rotate(0deg); } 82% { transform: translate(0px, 0px) rotate(0deg); } 84% { transform: translate(10px, 0px) rotate(0deg); } 86% { transform: translate(-4px, 0px) rotate(0deg); } 88% { transform: translate(8px, 0px) rotate(0deg); } 90% { transform: translate(3px, 0px) rotate(0deg); } 92% { transform: translate(5px, 0px) rotate(0deg); } 94% { transform: translate(2px, 0px) rotate(0deg); } 96% { transform: translate(-3px, 0px) rotate(0deg); } 98% { transform: translate(4px, 0px) rotate(0deg); } } @keyframes shake-vertical { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(0px, 4px) rotate(0deg); } 4% { transform: translate(0px, 1px) rotate(0deg); } 6% { transform: translate(0px, 10px) rotate(0deg); } 8% { transform: translate(0px, -5px) rotate(0deg); } 10% { transform: translate(0px, -8px) rotate(0deg); } 12% { transform: translate(0px, -6px) rotate(0deg); } 14% { transform: translate(0px, -5px) rotate(0deg); } 16% { transform: translate(0px, 5px) rotate(0deg); } 18% { transform: translate(0px, -1px) rotate(0deg); } 20% { transform: translate(0px, -4px) rotate(0deg); } 22% { transform: translate(0px, -6px) rotate(0deg); } 24% { transform: translate(0px, 8px) rotate(0deg); } 26% { transform: translate(0px, -3px) rotate(0deg); } 28% { transform: translate(0px, -9px) rotate(0deg); } 30% { transform: translate(0px, 4px) rotate(0deg); } 32% { transform: translate(0px, 10px) rotate(0deg); } 34% { transform: translate(0px, -2px) rotate(0deg); } 36% { transform: translate(0px, 1px) rotate(0deg); } 38% { transform: translate(0px, 4px) rotate(0deg); } 40% { transform: translate(0px, -7px) rotate(0deg); } 42% { transform: translate(0px, 4px) rotate(0deg); } 44% { transform: translate(0px, 8px) rotate(0deg); } 46% { transform: translate(0px, 9px) rotate(0deg); } 48% { transform: translate(0px, 9px) rotate(0deg); } 50% { transform: translate(0px, -5px) rotate(0deg); } 52% { transform: translate(0px, -9px) rotate(0deg); } 54% { transform: translate(0px, 10px) rotate(0deg); } 56% { transform: translate(0px, 4px) rotate(0deg); } 58% { transform: translate(0px, 6px) rotate(0deg); } 60% { transform: translate(0px, 2px) rotate(0deg); } 62% { transform: translate(0px, 6px) rotate(0deg); } 64% { transform: translate(0px, -6px) rotate(0deg); } 66% { transform: translate(0px, 6px) rotate(0deg); } 68% { transform: translate(0px, -9px) rotate(0deg); } 70% { transform: translate(0px, -5px) rotate(0deg); } 72% { transform: translate(0px, 1px) rotate(0deg); } 74% { transform: translate(0px, 0px) rotate(0deg); } 76% { transform: translate(0px, 2px) rotate(0deg); } 78% { transform: translate(0px, 8px) rotate(0deg); } 80% { transform: translate(0px, 9px) rotate(0deg); } 82% { transform: translate(0px, 9px) rotate(0deg); } 84% { transform: translate(0px, 1px) rotate(0deg); } 86% { transform: translate(0px, -6px) rotate(0deg); } 88% { transform: translate(0px, 4px) rotate(0deg); } 90% { transform: translate(0px, 3px) rotate(0deg); } 92% { transform: translate(0px, 6px) rotate(0deg); } 94% { transform: translate(0px, 3px) rotate(0deg); } 96% { transform: translate(0px, 0px) rotate(0deg); } 98% { transform: translate(0px, 3px) rotate(0deg); } } @keyframes shake-rotate { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(0px, 0px) rotate(1.5deg); } 4% { transform: translate(0px, 0px) rotate(-5.5deg); } 6% { transform: translate(0px, 0px) rotate(-1.5deg); } 8% { transform: translate(0px, 0px) rotate(-3.5deg); } 10% { transform: translate(0px, 0px) rotate(6.5deg); } 12% { transform: translate(0px, 0px) rotate(1.5deg); } 14% { transform: translate(0px, 0px) rotate(0.5deg); } 16% { transform: translate(0px, 0px) rotate(-0.5deg); } 18% { transform: translate(0px, 0px) rotate(-5.5deg); } 20% { transform: translate(0px, 0px) rotate(5.5deg); } 22% { transform: translate(0px, 0px) rotate(-2.5deg); } 24% { transform: translate(0px, 0px) rotate(-3.5deg); } 26% { transform: translate(0px, 0px) rotate(1.5deg); } 28% { transform: translate(0px, 0px) rotate(0.5deg); } 30% { transform: translate(0px, 0px) rotate(7.5deg); } 32% { transform: translate(0px, 0px) rotate(-4.5deg); } 34% { transform: translate(0px, 0px) rotate(-6.5deg); } 36% { transform: translate(0px, 0px) rotate(7.5deg); } 38% { transform: translate(0px, 0px) rotate(5.5deg); } 40% { transform: translate(0px, 0px) rotate(6.5deg); } 42% { transform: translate(0px, 0px) rotate(-1.5deg); } 44% { transform: translate(0px, 0px) rotate(2.5deg); } 46% { transform: translate(0px, 0px) rotate(-2.5deg); } 48% { transform: translate(0px, 0px) rotate(3.5deg); } 50% { transform: translate(0px, 0px) rotate(7.5deg); } 52% { transform: translate(0px, 0px) rotate(0.5deg); } 54% { transform: translate(0px, 0px) rotate(6.5deg); } 56% { transform: translate(0px, 0px) rotate(-6.5deg); } 58% { transform: translate(0px, 0px) rotate(-5.5deg); } 60% { transform: translate(0px, 0px) rotate(-2.5deg); } 62% { transform: translate(0px, 0px) rotate(6.5deg); } 64% { transform: translate(0px, 0px) rotate(-3.5deg); } 66% { transform: translate(0px, 0px) rotate(-6.5deg); } 68% { transform: translate(0px, 0px) rotate(7.5deg); } 70% { transform: translate(0px, 0px) rotate(2.5deg); } 72% { transform: translate(0px, 0px) rotate(-6.5deg); } 74% { transform: translate(0px, 0px) rotate(-3.5deg); } 76% { transform: translate(0px, 0px) rotate(6.5deg); } 78% { transform: translate(0px, 0px) rotate(-4.5deg); } 80% { transform: translate(0px, 0px) rotate(5.5deg); } 82% { transform: translate(0px, 0px) rotate(-0.5deg); } 84% { transform: translate(0px, 0px) rotate(-6.5deg); } 86% { transform: translate(0px, 0px) rotate(-3.5deg); } 88% { transform: translate(0px, 0px) rotate(1.5deg); } 90% { transform: translate(0px, 0px) rotate(2.5deg); } 92% { transform: translate(0px, 0px) rotate(-2.5deg); } 94% { transform: translate(0px, 0px) rotate(1.5deg); } 96% { transform: translate(0px, 0px) rotate(0.5deg); } 98% { transform: translate(0px, 0px) rotate(-1.5deg); } } @keyframes shake-opacity { 0% { transform: translate(0px, 0px) rotate(0deg); opacity: 0.2; } 10% { transform: translate(-2px, 0px) rotate(-0.5deg); opacity: 1; } 20% { transform: translate(-1px, -4px) rotate(-1.5deg); opacity: 0.5; } 30% { transform: translate(4px, 0px) rotate(1.5deg); opacity: 1; } 40% { transform: translate(3px, -4px) rotate(0.5deg); opacity: 0.6; } 50% { transform: translate(0px, 0px) rotate(-1.5deg); opacity: 0.9; } 60% { transform: translate(-1px, -3px) rotate(0.5deg); opacity: 1; } 70% { transform: translate(0px, 2px) rotate(0.5deg); opacity: 0.9; } 80% { transform: translate(2px, 1px) rotate(-1.5deg); opacity: 1; } 90% { transform: translate(4px, -2px) rotate(2.5deg); opacity: 0.1; } } @keyframes shake-crazy { 0% { transform: translate(0px, 0px) rotate(0deg); opacity: 0.7; } 10% { transform: translate(-4px, 20px) rotate(-3deg); opacity: 0.8; } 20% { transform: translate(16px, 11px) rotate(9deg); opacity: 0.2; } 30% { transform: translate(-2px, 12px) rotate(4deg); opacity: 1; } 40% { transform: translate(6px, -3px) rotate(-7deg); opacity: 0.9; } 50% { transform: translate(6px, -3px) rotate(-2deg); opacity: 0.4; } 60% { transform: translate(-7px, 20px) rotate(10deg); opacity: 0.6; } 70% { transform: translate(1px, -2px) rotate(-2deg); opacity: 0.5; } 80% { transform: translate(19px, -4px) rotate(-5deg); opacity: 0.5; } 90% { transform: translate(-12px, 7px) rotate(-7deg); opacity: 0.8; } } /* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { background: #2ab8ac; } header { width: 100%; background-color: #ffab52; text-align: center; line-height: 1.5em; font-family: 'Gentium Basic', serif; padding: 5px 0; font-size: .85em; opacity: 0; color: #fff68d; visibility: hidden; animation: op 15s forwards; } header a { text-decoration: none; color: rgba(0, 0, 0, 0.7); } header a:hover { color: rgba(0, 0, 0, 0.94); } @keyframes op { 10%,90% { opacity: 1; visibility: visible; } } .section { color: white; text-align: center; height: 100%; padding-top: 20px; } .section h1 { font-family: 'Dancing Script', cursive; font-size: 5em; } .section h4 { font-size: 1.4em; font-family: 'Gentium Basic', serif; } .section > p { margin-top: 25px; line-height: 1.5em; } .section a { color: rgba(0, 0, 0, 0.5); } .section a:link { text-decoration: none; } .section a:hover { color: rgba(0, 0, 0, 0.85); } .section footer { width: 100%; line-height: 1.3em; margin-top: 50px; margin-bottom: 20px; } .arrow { position: absolute; bottom: 20px; left: 50%; margin-left: -10px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid rgba(255, 255, 255, 0.3); cursor: pointer; } .arrow:before { content: ''; position: absolute; top: -15px; left: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; } .section.shamrock .arrow:before { border-top: 10px solid #2ab8ac; } .section.carrot .arrow:before { border-top: 10px solid #ffab52; } .section.amethyst .arrow:before { border-top: 10px solid #9c55a5; } .section.scooter .arrow:before { border-top: 10px solid #57cadd; } .section.dolly .arrow:before { border-top: 10px solid #fff68d; } .section.shamrock .arrow:before { border-top: 10px solid #2ab8ac; } .section.pear .arrow:before { border-top: 10px solid #cce033; } .section.carrot { background-color: #ffab52; } .section.amethyst { background-color: #9c55a5; } .section.scooter { background-color: #57cadd; } .section.dolly { background-color: #fff68d; color: #2C3E50; } .section.shamrock { background-color: #2ab8ac; } .section.pear { background-color: #cce033; } .color-carrot { color: #ffab52; } .color-amethyst { color: #9c55a5; } .color-scooter { color: #57cadd; } .color-dolly { color: #fff68d; } .color-shamrock { color: #2ab8ac; } .color-pear { color: #cce033; } .previews { display: block; list-style: none; width: 85%; margin: 34px auto 0; } .previews li { display: inline-block; width: 150px; padding: 20px; vertical-align: middle; } .previews.bigs li { width: 250px; } .preview-item { font-family: 'Dancing Script', cursive; font-size: 70px; line-height: 100px; position: relative; width: 100px; height: 100px; border-radius: 15px; color: rgba(255, 255, 255, 0.3); margin: auto; } .preview-item.big { width: 200px; height: 200px; font-size: 160px; line-height: 200px; } .section.carrot .preview-item { background-color: #ffc485; } .section.amethyst .preview-item { background-color: #b075b8; } .section.scooter .preview-item { background-color: #81d7e6; } .section.dolly .preview-item { background-color: #fffac0; } .section.shamrock .preview-item { background-color: #41d4c7; } .section.pear .preview-item { background-color: #d7e75f; } .preview-item:after { content: ""; width: 0; height: 0; border-left: 33px solid transparent; position: absolute; bottom: 0px; right: 0px; } .section.carrot .preview-item:after { border-bottom: 33px solid #ffab52; } .section.amethyst .preview-item:after { border-bottom: 33px solid #9c55a5; } .section.scooter .preview-item:after { border-bottom: 33px solid #57cadd; } .section.dolly .preview-item:after { border-bottom: 33px solid #fff68d; } .section.shamrock .preview-item:after { border-bottom: 33px solid #2ab8ac; } .section.pear .preview-item:after { border-bottom: 33px solid #cce033; } .flip { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-right: 30px solid transparent; } .section.carrot .flip { border-top: 30px solid #ffd09f; } .section.amethyst .flip { border-top: 30px solid #ba86c1; } .section.scooter .flip { border-top: 30px solid #97deea; } .section.dolly .flip { border-top: 30px solid #fffcda; } .section.shamrock .flip { border-top: 30px solid #56d8cd; } .section.pear .flip { border-top: 30px solid #ddea75; } .flip:after { content: ""; width: 0; height: 0; border-bottom: 30px solid rgba(0, 0, 0, 0.15); border-left: 30px solid transparent; position: absolute; bottom: 0; left: -30px; } .preview-desc { margin-top: 20px; font-family: 'Gentium Basic', serif; } .dropdown { position: relative; margin: 25px auto; height: 50px; width: 300px; } .dropdown::after { content: "➘"; position: absolute; right: 11px; top: 13px; color: rgba(0, 0, 0, 0.2); font-size: 25px; } .dropdown-select { position: relative; width: 100%; margin: 0; padding: 6px 8px 6px 10px; height: 50px; line-height: 25px; font-family: 'Dancing Script', cursive; font-size: 25px; color: rgba(0, 0, 0, 0.5); background-color: rgba(255, 255, 255, 0.1); transition: background-color .3s; border: none; outline: none; border: 0; border-radius: 0; -webkit-appearance: none; } .dropdown-select:hover, .dropdown-select:active { background-color: rgba(255, 255, 255, 0.5); } .dropdown-select > option { margin: 3px; padding: 6px 8px; text-shadow: none; border-radius: 3px; cursor: pointer; } .btn { font-family: 'Dancing Script', cursive; font-size: 40px; padding: 10px 20px; margin-top: 34px; display: inline-block; transition: background-color, .3s; } .btn.carrot { background-color: #ffab52; } .btn.amethyst { background-color: #9c55a5; } .btn.light:hover { background-color: rgba(0, 0, 0, 0.1); } .btn + small { font-family: 'Gentium Basic', serif; font-size: 16px; margin-top: 10px; display: block; } </style><p><br></p>