아 흔들고 싶다 - 인스티즈(instiz) 이슈 카테고리

유머·감동 이슈·소식 정보·기타 팁·추천 할인·특가 고르기·테스트 뮤직(국내)

아 흔들고 싶다 l 유머·감동

이 글은 6년 전 (2018/2/12) 게시물이에요

아 흔들고 싶다.@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); ;}.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 { ; 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; ;}.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; ;}