Created
February 26, 2014 14:04
-
-
Save gesteves/9229959 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains 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
| // ---- | |
| // Sass (v3.3.0.rc.5) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| @import "compass/reset"; | |
| // csshake code starts here | |
| @mixin shake($x, $y, $rot, $name, $steps:10, $opacity:false) { | |
| $r:0deg; | |
| $h:0px; | |
| $v:0px; | |
| $interval: $steps; | |
| $step: 0%; | |
| @keyframes $name{ | |
| @while $step < 100% { | |
| @if ($rot != 0deg){ $r : random($rot) - $rot/2;} | |
| @else { $r : 0deg; } | |
| @if ($x != 0px){ $h : random($x) - $x/2; } | |
| @else { $h : 0px; } | |
| @if ($y != 0px){ $v : random($y) - $y/2; } | |
| @else { $v : 0px; } | |
| @if($step == 0%){ | |
| #{$step} { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| @if($opacity){ | |
| opacity: random(10)*.1; | |
| } | |
| } | |
| } @else { | |
| #{$step} { | |
| transform: translate($h, $v) rotate($r); | |
| @if($opacity){ | |
| opacity: random(10)*.1; | |
| } | |
| } | |
| } | |
| $step: $step + $interval; | |
| } | |
| } | |
| } | |
| // reset | |
| $duration:100ms; | |
| $base-name:shake-base; | |
| $iteration:infinite; | |
| $timing:ease-in-out; | |
| $delay:0s; | |
| // The animation | |
| @mixin animation($name, $dur: $duration, $iter: $iteration, $tim: $timing, $del: $delay){ | |
| animation-name: $name; | |
| animation-duration: $dur; | |
| animation-iteration-count: $iter; | |
| animation-timing-function: $tim; | |
| animation-delay: $del; | |
| } | |
| .shake { | |
| display: inline-block; | |
| transform-origin: center center; | |
| &:hover { | |
| @include animation($base-name); | |
| } | |
| &.freez { | |
| @include animation($base-name); | |
| &.shake-hard { @include animation(shake-hard); } | |
| &.shake-slow { @include animation(shake-slow, 5s); } | |
| &.shake-little { @include animation(shake-little); } | |
| &.shake-horizontal { @include animation(shake-horizontal); } | |
| &.shake-vertical { @include animation(shake-vertical); } | |
| &.shake-rotate { @include animation(shake-rotate); } | |
| &.shake-opacity { @include animation(shake-opacity, 200ms); } | |
| &.shake-crazy { @include animation(shake-crazy); } | |
| animation-play-state: paused; | |
| &:hover { | |
| animation-play-state: running; | |
| } | |
| } | |
| // Specific shakings | |
| &.shake-hard:hover { @include animation(shake-hard); } | |
| &.shake-slow:hover { @include animation(shake-slow, 5s); } | |
| &.shake-little:hover { @include animation(shake-little); } | |
| &.shake-horizontal:hover { @include animation(shake-horizontal); } | |
| &.shake-vertical:hover { @include animation(shake-vertical); } | |
| &.shake-rotate:hover { @include animation(shake-rotate); } | |
| &.shake-opacity:hover { @include animation(shake-opacity, 200ms); } | |
| &.shake-crazy:hover { @include animation(shake-crazy); } | |
| &.shake-constant { | |
| @include animation($base-name); | |
| &.shake-hard { @include animation(shake-hard); } | |
| &.shake-slow { @include animation(shake-slow, 5s); } | |
| &.shake-little { @include animation(shake-little); } | |
| &.shake-horizontal { @include animation(shake-horizontal); } | |
| &.shake-vertical { @include animation(shake-vertical); } | |
| &.shake-rotate { @include animation(shake-rotate); } | |
| &.shake-opacity { @include animation(shake-opacity, 200ms); } | |
| &.shake-crazy { @include animation(shake-crazy); } | |
| &.hover-stop:hover{ | |
| animation-play-state: paused; | |
| } | |
| } | |
| &.shake-delay { @include animation($base-name, $duration, $iteration, $timing, 4s); } | |
| } | |
| // The animations: its names and settings to call from animation mixin | |
| @include shake(5px, 5px, 3deg, 'shake-base', 2); | |
| @include shake(2px, 2px, 1deg, 'shake-little', 2); | |
| @include shake(20px, 20px, 7deg, 'shake-slow', 2); | |
| @include shake(20px, 20px, 7deg, 'shake-hard', 2); | |
| @include shake(20px, 0px, 0deg, 'shake-horizontal', 2); | |
| @include shake(0px, 20px, 0deg, 'shake-vertical', 2); | |
| @include shake(0px, 0px, 15deg, 'shake-rotate', 2); | |
| @include shake(10px, 10px, 5deg, 'shake-opacity', 10, true); | |
| @include shake(40px, 40px, 20deg, 'shake-crazy', 10, true); | |
| // csshake code ends here | |
| .div { | |
| width: 100px; | |
| height: 100px; | |
| background-color: red; | |
| } | |
| // Demo code | |
| @import url(http://fonts.googleapis.com/css?family=Gentium+Basic); | |
| @import url(http://fonts.googleapis.com/css?family=Dancing+Script); | |
| // Colors | |
| $carrot: #ffab52; | |
| $amethyst: #9c55a5; | |
| $scooter: #57cadd; | |
| $dolly: #fff68d; | |
| $shamrock: #2ab8ac; | |
| $pear: #cce033; | |
| /* 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: $shamrock; | |
| } | |
| .section { | |
| color:white; | |
| text-align: center; | |
| height: 100%; | |
| padding-top: 20px; | |
| h1 { | |
| font-family: 'Dancing Script', cursive; | |
| font-size: 5em; | |
| } | |
| h4 { | |
| font-size: 1.4em; | |
| font-family: 'Gentium Basic', serif; | |
| } | |
| & > p { | |
| margin-top: 25px; | |
| line-height: 1.5em; | |
| } | |
| a{ | |
| color:rgba(0,0,0,0.5); | |
| &:link{ | |
| text-decoration: none; | |
| } | |
| &:hover { | |
| color:rgba(0,0,0,0.85); | |
| } | |
| } | |
| 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,.3); | |
| cursor:pointer; | |
| &:before { | |
| content: ''; | |
| position: absolute; | |
| top: -15px; | |
| left: -8px; | |
| width: 0; | |
| height: 0; | |
| border-left: 8px solid transparent; | |
| border-right: 8px solid transparent; | |
| .section.shamrock & { border-top: 10px solid $shamrock; } | |
| .section.carrot &{ border-top: 10px solid $carrot; } | |
| .section.amethyst &{ border-top: 10px solid $amethyst; } | |
| .section.scooter &{ border-top: 10px solid $scooter; } | |
| .section.dolly &{ border-top: 10px solid $dolly; } | |
| .section.shamrock &{ border-top: 10px solid $shamrock; } | |
| .section.pear &{ border-top: 10px solid $pear; } | |
| } | |
| } | |
| // Section | |
| .section { | |
| &.carrot{ background-color: $carrot; } | |
| &.amethyst{ background-color: $amethyst; } | |
| &.scooter{ background-color: $scooter; } | |
| &.dolly{ | |
| background-color: $dolly; | |
| color:#2C3E50; | |
| } | |
| &.shamrock{ background-color: $shamrock; } | |
| &.pear{ background-color: $pear; } | |
| } | |
| .color-carrot{ color: $carrot; } | |
| .color-amethyst{ color: $amethyst; } | |
| .color-scooter{ color: $scooter; } | |
| .color-dolly{ color: $dolly; } | |
| .color-shamrock{ color: $shamrock; } | |
| .color-pear{ color: $pear; } | |
| // Previews | |
| .previews { | |
| display: block; | |
| list-style: none; | |
| width: 85%; | |
| margin: 34px auto 0; | |
| li { | |
| display: inline-block; | |
| width: 150px; | |
| padding: 20px; | |
| vertical-align: middle; | |
| } | |
| &.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(white,0.3); | |
| &.big { | |
| width: 200px; | |
| height: 200px; | |
| font-size: 160px; | |
| line-height: 200px; | |
| } | |
| .section.carrot & { background-color: lighten($carrot,10); } | |
| .section.amethyst &{ background-color: lighten($amethyst,10); } | |
| .section.scooter &{ background-color: lighten($scooter,10); } | |
| .section.dolly &{ background-color: lighten($dolly,10); } | |
| .section.shamrock &{ background-color: lighten($shamrock,10); } | |
| .section.pear &{ background-color: lighten($pear,10); } | |
| margin: auto; | |
| &:after { | |
| content: ""; | |
| width: 0; | |
| height: 0; | |
| .section.carrot & { border-bottom: 33px solid $carrot; } | |
| .section.amethyst &{ border-bottom: 33px solid $amethyst } | |
| .section.scooter &{ border-bottom: 33px solid $scooter } | |
| .section.dolly &{ border-bottom: 33px solid $dolly } | |
| .section.shamrock &{ border-bottom: 33px solid $shamrock } | |
| .section.pear &{ border-bottom: 33px solid $pear } | |
| border-left: 33px solid transparent; | |
| position: absolute; | |
| bottom: 0px; | |
| right: 0px; | |
| } | |
| } | |
| .flip { | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| width: 0; | |
| height: 0; | |
| .section.carrot & { border-top: 30px solid lighten($carrot,15);} | |
| .section.amethyst & { border-top: 30px solid lighten($amethyst,15); } | |
| .section.scooter & { border-top: 30px solid lighten($scooter,15); } | |
| .section.dolly & { border-top: 30px solid lighten($dolly,15); } | |
| .section.shamrock & { border-top: 30px solid lighten($shamrock,15); } | |
| .section.pear & { border-top: 30px solid lighten($pear,15); } | |
| border-right: 30px solid transparent; | |
| &: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; | |
| &::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; | |
| &:hover, &:active { | |
| background-color: rgba(255,255,255,0.5); | |
| } | |
| border: 0; | |
| border-radius: 0; | |
| -webkit-appearance: none; | |
| & > 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; | |
| &.carrot{ background-color: $carrot; } | |
| &.amethyst{ background-color: $amethyst; } | |
| &.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 | |
| } |
This file contains 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
| @charset "UTF-8"; | |
| @import url(http://fonts.googleapis.com/css?family=Gentium+Basic); | |
| @import url(http://fonts.googleapis.com/css?family=Dancing+Script); | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font: inherit; | |
| font-size: 100%; | |
| vertical-align: baseline; | |
| } | |
| html { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| caption, th, td { | |
| text-align: left; | |
| font-weight: normal; | |
| vertical-align: middle; | |
| } | |
| q, blockquote { | |
| quotes: none; | |
| } | |
| q:before, q:after, blockquote:before, blockquote:after { | |
| content: ""; | |
| content: none; | |
| } | |
| a img { | |
| border: none; | |
| } | |
| article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { | |
| display: block; | |
| } | |
| .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; | |
| } | |
| .shake.shake-constant { | |
| 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, 2.5px) rotate(-0.5deg); | |
| } | |
| 4% { | |
| transform: translate(2.5px, 2.5px) rotate(0.5deg); | |
| } | |
| 6% { | |
| transform: translate(-1.5px, -1.5px) rotate(1.5deg); | |
| } | |
| 8% { | |
| transform: translate(-0.5px, -1.5px) rotate(0.5deg); | |
| } | |
| 10% { | |
| transform: translate(2.5px, 2.5px) rotate(1.5deg); | |
| } | |
| 12% { | |
| transform: translate(-1.5px, -0.5px) rotate(-0.5deg); | |
| } | |
| 14% { | |
| transform: translate(-0.5px, -1.5px) rotate(-0.5deg); | |
| } | |
| 16% { | |
| transform: translate(2.5px, -0.5px) rotate(1.5deg); | |
| } | |
| 18% { | |
| transform: translate(1.5px, 0.5px) rotate(-0.5deg); | |
| } | |
| 20% { | |
| transform: translate(-1.5px, 1.5px) rotate(0.5deg); | |
| } | |
| 22% { | |
| transform: translate(-0.5px, -0.5px) rotate(1.5deg); | |
| } | |
| 24% { | |
| transform: translate(-0.5px, 1.5px) rotate(-0.5deg); | |
| } | |
| 26% { | |
| transform: translate(-0.5px, 1.5px) rotate(1.5deg); | |
| } | |
| 28% { | |
| transform: translate(2.5px, -0.5px) rotate(1.5deg); | |
| } | |
| 30% { | |
| transform: translate(-1.5px, 0.5px) rotate(0.5deg); | |
| } | |
| 32% { | |
| transform: translate(1.5px, 1.5px) rotate(1.5deg); | |
| } | |
| 34% { | |
| transform: translate(-0.5px, 0.5px) rotate(1.5deg); | |
| } | |
| 36% { | |
| transform: translate(1.5px, 1.5px) rotate(1.5deg); | |
| } | |
| 38% { | |
| transform: translate(2.5px, -0.5px) rotate(0.5deg); | |
| } | |
| 40% { | |
| transform: translate(2.5px, -0.5px) rotate(-0.5deg); | |
| } | |
| 42% { | |
| transform: translate(0.5px, -1.5px) rotate(-0.5deg); | |
| } | |
| 44% { | |
| transform: translate(0.5px, -0.5px) rotate(1.5deg); | |
| } | |
| 46% { | |
| transform: translate(2.5px, 2.5px) rotate(1.5deg); | |
| } | |
| 48% { | |
| transform: translate(1.5px, 2.5px) rotate(0.5deg); | |
| } | |
| 50% { | |
| transform: translate(-1.5px, 2.5px) rotate(0.5deg); | |
| } | |
| 52% { | |
| transform: translate(0.5px, 2.5px) rotate(0.5deg); | |
| } | |
| 54% { | |
| transform: translate(-1.5px, 0.5px) rotate(-0.5deg); | |
| } | |
| 56% { | |
| transform: translate(-0.5px, 0.5px) rotate(-0.5deg); | |
| } | |
| 58% { | |
| transform: translate(-1.5px, -0.5px) rotate(1.5deg); | |
| } | |
| 60% { | |
| transform: translate(0.5px, -1.5px) rotate(0.5deg); | |
| } | |
| 62% { | |
| transform: translate(1.5px, -0.5px) rotate(0.5deg); | |
| } | |
| 64% { | |
| transform: translate(1.5px, 2.5px) rotate(-0.5deg); | |
| } | |
| 66% { | |
| transform: translate(-0.5px, 0.5px) rotate(1.5deg); | |
| } | |
| 68% { | |
| transform: translate(1.5px, 0.5px) rotate(0.5deg); | |
| } | |
| 70% { | |
| transform: translate(-1.5px, 2.5px) rotate(1.5deg); | |
| } | |
| 72% { | |
| transform: translate(0.5px, -0.5px) rotate(1.5deg); | |
| } | |
| 74% { | |
| transform: translate(1.5px, 1.5px) rotate(-0.5deg); | |
| } | |
| 76% { | |
| transform: translate(1.5px, -0.5px) rotate(1.5deg); | |
| } | |
| 78% { | |
| transform: translate(-1.5px, 0.5px) rotate(-0.5deg); | |
| } | |
| 80% { | |
| transform: translate(0.5px, 2.5px) rotate(0.5deg); | |
| } | |
| 82% { | |
| transform: translate(0.5px, -0.5px) rotate(-0.5deg); | |
| } | |
| 84% { | |
| transform: translate(-1.5px, -0.5px) rotate(0.5deg); | |
| } | |
| 86% { | |
| transform: translate(-0.5px, 0.5px) rotate(0.5deg); | |
| } | |
| 88% { | |
| transform: translate(-0.5px, 0.5px) rotate(1.5deg); | |
| } | |
| 90% { | |
| transform: translate(-0.5px, -1.5px) rotate(1.5deg); | |
| } | |
| 92% { | |
| transform: translate(0.5px, 1.5px) rotate(-0.5deg); | |
| } | |
| 94% { | |
| transform: translate(-1.5px, 0.5px) rotate(-0.5deg); | |
| } | |
| 96% { | |
| transform: translate(0.5px, 0.5px) rotate(0.5deg); | |
| } | |
| 98% { | |
| transform: translate(0.5px, -0.5px) rotate(-0.5deg); | |
| } | |
| } | |
| @keyframes shake-little { | |
| 0% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| } | |
| 2% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 4% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| 6% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 8% { | |
| transform: translate(1px, 0px) 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(1px, 1px) rotate(0.5deg); | |
| } | |
| 20% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 22% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 24% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 26% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| 28% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 30% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 32% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 34% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 36% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 38% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 40% { | |
| transform: translate(1px, 0px) rotate(0.5deg); | |
| } | |
| 42% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 44% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| 46% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 48% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 50% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| 52% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 54% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| 56% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| 58% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 60% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 62% { | |
| transform: translate(1px, 0px) rotate(0.5deg); | |
| } | |
| 64% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 66% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 68% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 70% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| 72% { | |
| transform: translate(1px, 0px) rotate(0.5deg); | |
| } | |
| 74% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| 76% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 78% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 80% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| 82% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 84% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 86% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 88% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| 90% { | |
| transform: translate(0px, 1px) rotate(0.5deg); | |
| } | |
| 92% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| 94% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 96% { | |
| transform: translate(1px, 0px) rotate(0.5deg); | |
| } | |
| 98% { | |
| transform: translate(1px, 1px) rotate(0.5deg); | |
| } | |
| } | |
| @keyframes shake-slow { | |
| 0% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| } | |
| 2% { | |
| transform: translate(-9px, 7px) rotate(1.5deg); | |
| } | |
| 4% { | |
| transform: translate(-6px, -9px) rotate(-2.5deg); | |
| } | |
| 6% { | |
| transform: translate(3px, 5px) rotate(-1.5deg); | |
| } | |
| 8% { | |
| transform: translate(7px, 3px) rotate(2.5deg); | |
| } | |
| 10% { | |
| transform: translate(0px, -8px) rotate(0.5deg); | |
| } | |
| 12% { | |
| transform: translate(-9px, -9px) rotate(2.5deg); | |
| } | |
| 14% { | |
| transform: translate(2px, -9px) rotate(-2.5deg); | |
| } | |
| 16% { | |
| transform: translate(-9px, 1px) rotate(-0.5deg); | |
| } | |
| 18% { | |
| transform: translate(-2px, -5px) rotate(1.5deg); | |
| } | |
| 20% { | |
| transform: translate(8px, -4px) rotate(3.5deg); | |
| } | |
| 22% { | |
| transform: translate(-8px, -3px) rotate(1.5deg); | |
| } | |
| 24% { | |
| transform: translate(-1px, -3px) rotate(-1.5deg); | |
| } | |
| 26% { | |
| transform: translate(3px, 9px) rotate(3.5deg); | |
| } | |
| 28% { | |
| transform: translate(-1px, 1px) rotate(2.5deg); | |
| } | |
| 30% { | |
| transform: translate(7px, 3px) rotate(-1.5deg); | |
| } | |
| 32% { | |
| transform: translate(8px, -2px) rotate(2.5deg); | |
| } | |
| 34% { | |
| transform: translate(10px, -6px) rotate(-0.5deg); | |
| } | |
| 36% { | |
| transform: translate(8px, 5px) rotate(-2.5deg); | |
| } | |
| 38% { | |
| transform: translate(-6px, -1px) rotate(1.5deg); | |
| } | |
| 40% { | |
| transform: translate(8px, -8px) rotate(-0.5deg); | |
| } | |
| 42% { | |
| transform: translate(10px, 0px) rotate(-0.5deg); | |
| } | |
| 44% { | |
| transform: translate(2px, -4px) rotate(-2.5deg); | |
| } | |
| 46% { | |
| transform: translate(-2px, 5px) rotate(-0.5deg); | |
| } | |
| 48% { | |
| transform: translate(3px, 0px) rotate(2.5deg); | |
| } | |
| 50% { | |
| transform: translate(-7px, 10px) rotate(0.5deg); | |
| } | |
| 52% { | |
| transform: translate(5px, -7px) rotate(-0.5deg); | |
| } | |
| 54% { | |
| transform: translate(6px, 7px) rotate(2.5deg); | |
| } | |
| 56% { | |
| transform: translate(10px, 1px) rotate(-2.5deg); | |
| } | |
| 58% { | |
| transform: translate(0px, -6px) rotate(-2.5deg); | |
| } | |
| 60% { | |
| transform: translate(0px, 4px) rotate(1.5deg); | |
| } | |
| 62% { | |
| transform: translate(-2px, -8px) rotate(-1.5deg); | |
| } | |
| 64% { | |
| transform: translate(2px, 0px) rotate(-1.5deg); | |
| } | |
| 66% { | |
| transform: translate(8px, 1px) rotate(1.5deg); | |
| } | |
| 68% { | |
| transform: translate(3px, -6px) rotate(0.5deg); | |
| } | |
| 70% { | |
| transform: translate(0px, -8px) rotate(2.5deg); | |
| } | |
| 72% { | |
| transform: translate(-3px, 8px) rotate(-1.5deg); | |
| } | |
| 74% { | |
| transform: translate(-6px, 7px) rotate(1.5deg); | |
| } | |
| 76% { | |
| transform: translate(10px, 5px) rotate(-1.5deg); | |
| } | |
| 78% { | |
| transform: translate(-9px, -1px) rotate(1.5deg); | |
| } | |
| 80% { | |
| transform: translate(2px, 7px) rotate(3.5deg); | |
| } | |
| 82% { | |
| transform: translate(-1px, 7px) rotate(-1.5deg); | |
| } | |
| 84% { | |
| transform: translate(7px, 0px) rotate(3.5deg); | |
| } | |
| 86% { | |
| transform: translate(9px, 2px) rotate(-1.5deg); | |
| } | |
| 88% { | |
| transform: translate(-4px, -7px) rotate(-0.5deg); | |
| } | |
| 90% { | |
| transform: translate(-1px, -6px) rotate(-0.5deg); | |
| } | |
| 92% { | |
| transform: translate(9px, 5px) rotate(3.5deg); | |
| } | |
| 94% { | |
| transform: translate(8px, -4px) rotate(-2.5deg); | |
| } | |
| 96% { | |
| transform: translate(-8px, -9px) rotate(0.5deg); | |
| } | |
| 98% { | |
| transform: translate(10px, 5px) rotate(3.5deg); | |
| } | |
| } | |
| @keyframes shake-hard { | |
| 0% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| } | |
| 2% { | |
| transform: translate(-1px, 3px) rotate(-2.5deg); | |
| } | |
| 4% { | |
| transform: translate(-5px, 6px) rotate(2.5deg); | |
| } | |
| 6% { | |
| transform: translate(6px, 3px) rotate(0.5deg); | |
| } | |
| 8% { | |
| transform: translate(1px, 0px) rotate(2.5deg); | |
| } | |
| 10% { | |
| transform: translate(-5px, 8px) rotate(2.5deg); | |
| } | |
| 12% { | |
| transform: translate(-5px, -8px) rotate(1.5deg); | |
| } | |
| 14% { | |
| transform: translate(7px, 2px) rotate(-0.5deg); | |
| } | |
| 16% { | |
| transform: translate(10px, -4px) rotate(-0.5deg); | |
| } | |
| 18% { | |
| transform: translate(-1px, 1px) rotate(-2.5deg); | |
| } | |
| 20% { | |
| transform: translate(5px, 9px) rotate(-1.5deg); | |
| } | |
| 22% { | |
| transform: translate(-9px, -9px) rotate(2.5deg); | |
| } | |
| 24% { | |
| transform: translate(-5px, 7px) rotate(-1.5deg); | |
| } | |
| 26% { | |
| transform: translate(-3px, -1px) rotate(-1.5deg); | |
| } | |
| 28% { | |
| transform: translate(6px, 10px) rotate(2.5deg); | |
| } | |
| 30% { | |
| transform: translate(-8px, -3px) rotate(-0.5deg); | |
| } | |
| 32% { | |
| transform: translate(-3px, -1px) rotate(-0.5deg); | |
| } | |
| 34% { | |
| transform: translate(6px, 7px) rotate(-2.5deg); | |
| } | |
| 36% { | |
| transform: translate(3px, 5px) rotate(2.5deg); | |
| } | |
| 38% { | |
| transform: translate(0px, 7px) rotate(3.5deg); | |
| } | |
| 40% { | |
| transform: translate(4px, 5px) rotate(-1.5deg); | |
| } | |
| 42% { | |
| transform: translate(-6px, 2px) rotate(-2.5deg); | |
| } | |
| 44% { | |
| transform: translate(8px, 8px) rotate(1.5deg); | |
| } | |
| 46% { | |
| transform: translate(-6px, 7px) rotate(-1.5deg); | |
| } | |
| 48% { | |
| transform: translate(-1px, -9px) rotate(1.5deg); | |
| } | |
| 50% { | |
| transform: translate(-7px, 6px) rotate(0.5deg); | |
| } | |
| 52% { | |
| transform: translate(4px, 3px) rotate(-1.5deg); | |
| } | |
| 54% { | |
| transform: translate(-2px, 1px) rotate(3.5deg); | |
| } | |
| 56% { | |
| transform: translate(10px, 3px) rotate(-1.5deg); | |
| } | |
| 58% { | |
| transform: translate(-8px, -7px) rotate(-2.5deg); | |
| } | |
| 60% { | |
| transform: translate(2px, 2px) rotate(1.5deg); | |
| } | |
| 62% { | |
| transform: translate(10px, 2px) rotate(2.5deg); | |
| } | |
| 64% { | |
| transform: translate(-4px, -7px) rotate(1.5deg); | |
| } | |
| 66% { | |
| transform: translate(8px, 0px) rotate(1.5deg); | |
| } | |
| 68% { | |
| transform: translate(3px, -7px) rotate(-0.5deg); | |
| } | |
| 70% { | |
| transform: translate(3px, 9px) rotate(-1.5deg); | |
| } | |
| 72% { | |
| transform: translate(7px, -6px) rotate(3.5deg); | |
| } | |
| 74% { | |
| transform: translate(1px, 5px) rotate(2.5deg); | |
| } | |
| 76% { | |
| transform: translate(6px, -6px) rotate(2.5deg); | |
| } | |
| 78% { | |
| transform: translate(-6px, 5px) rotate(-2.5deg); | |
| } | |
| 80% { | |
| transform: translate(3px, 0px) rotate(3.5deg); | |
| } | |
| 82% { | |
| transform: translate(3px, -4px) rotate(-2.5deg); | |
| } | |
| 84% { | |
| transform: translate(-3px, 1px) rotate(3.5deg); | |
| } | |
| 86% { | |
| transform: translate(1px, -5px) rotate(-2.5deg); | |
| } | |
| 88% { | |
| transform: translate(-4px, 6px) rotate(1.5deg); | |
| } | |
| 90% { | |
| transform: translate(0px, -4px) rotate(3.5deg); | |
| } | |
| 92% { | |
| transform: translate(2px, -4px) rotate(-2.5deg); | |
| } | |
| 94% { | |
| transform: translate(0px, -3px) rotate(-0.5deg); | |
| } | |
| 96% { | |
| transform: translate(-4px, -4px) rotate(-0.5deg); | |
| } | |
| 98% { | |
| transform: translate(4px, 7px) rotate(2.5deg); | |
| } | |
| } | |
| @keyframes shake-horizontal { | |
| 0% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| } | |
| 2% { | |
| transform: translate(8px, 0px) rotate(0deg); | |
| } | |
| 4% { | |
| transform: translate(-2px, 0px) rotate(0deg); | |
| } | |
| 6% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| } | |
| 8% { | |
| transform: translate(4px, 0px) rotate(0deg); | |
| } | |
| 10% { | |
| transform: translate(8px, 0px) rotate(0deg); | |
| } | |
| 12% { | |
| transform: translate(-5px, 0px) rotate(0deg); | |
| } | |
| 14% { | |
| transform: translate(-5px, 0px) rotate(0deg); | |
| } | |
| 16% { | |
| transform: translate(7px, 0px) rotate(0deg); | |
| } | |
| 18% { | |
| transform: translate(9px, 0px) rotate(0deg); | |
| } | |
| 20% { | |
| transform: translate(-8px, 0px) rotate(0deg); | |
| } | |
| 22% { | |
| transform: translate(-9px, 0px) rotate(0deg); | |
| } | |
| 24% { | |
| transform: translate(6px, 0px) rotate(0deg); | |
| } | |
| 26% { | |
| transform: translate(3px, 0px) rotate(0deg); | |
| } | |
| 28% { | |
| transform: translate(2px, 0px) rotate(0deg); | |
| } | |
| 30% { | |
| transform: translate(-2px, 0px) rotate(0deg); | |
| } | |
| 32% { | |
| transform: translate(7px, 0px) rotate(0deg); | |
| } | |
| 34% { | |
| transform: translate(-8px, 0px) rotate(0deg); | |
| } | |
| 36% { | |
| transform: translate(-6px, 0px) rotate(0deg); | |
| } | |
| 38% { | |
| transform: translate(-1px, 0px) rotate(0deg); | |
| } | |
| 40% { | |
| transform: translate(-4px, 0px) rotate(0deg); | |
| } | |
| 42% { | |
| transform: translate(4px, 0px) rotate(0deg); | |
| } | |
| 44% { | |
| transform: translate(-4px, 0px) rotate(0deg); | |
| } | |
| 46% { | |
| transform: translate(9px, 0px) rotate(0deg); | |
| } | |
| 48% { | |
| transform: translate(9px, 0px) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translate(4px, 0px) rotate(0deg); | |
| } | |
| 52% { | |
| transform: translate(6px, 0px) rotate(0deg); | |
| } | |
| 54% { | |
| transform: translate(4px, 0px) rotate(0deg); | |
| } | |
| 56% { | |
| transform: translate(-3px, 0px) rotate(0deg); | |
| } | |
| 58% { | |
| transform: translate(9px, 0px) rotate(0deg); | |
| } | |
| 60% { | |
| transform: translate(-1px, 0px) rotate(0deg); | |
| } | |
| 62% { | |
| transform: translate(3px, 0px) rotate(0deg); | |
| } | |
| 64% { | |
| transform: translate(7px, 0px) rotate(0deg); | |
| } | |
| 66% { | |
| transform: translate(-5px, 0px) rotate(0deg); | |
| } | |
| 68% { | |
| transform: translate(-6px, 0px) rotate(0deg); | |
| } | |
| 70% { | |
| transform: translate(-9px, 0px) rotate(0deg); | |
| } | |
| 72% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| } | |
| 74% { | |
| transform: translate(-5px, 0px) rotate(0deg); | |
| } | |
| 76% { | |
| transform: translate(6px, 0px) rotate(0deg); | |
| } | |
| 78% { | |
| transform: translate(1px, 0px) rotate(0deg); | |
| } | |
| 80% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| } | |
| 82% { | |
| transform: translate(-7px, 0px) rotate(0deg); | |
| } | |
| 84% { | |
| transform: translate(-3px, 0px) rotate(0deg); | |
| } | |
| 86% { | |
| transform: translate(3px, 0px) rotate(0deg); | |
| } | |
| 88% { | |
| transform: translate(7px, 0px) rotate(0deg); | |
| } | |
| 90% { | |
| transform: translate(-8px, 0px) rotate(0deg); | |
| } | |
| 92% { | |
| transform: translate(-5px, 0px) rotate(0deg); | |
| } | |
| 94% { | |
| transform: translate(8px, 0px) rotate(0deg); | |
| } | |
| 96% { | |
| transform: translate(-7px, 0px) rotate(0deg); | |
| } | |
| 98% { | |
| transform: translate(-9px, 0px) rotate(0deg); | |
| } | |
| } | |
| @keyframes shake-vertical { | |
| 0% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| } | |
| 2% { | |
| transform: translate(0px, -7px) rotate(0deg); | |
| } | |
| 4% { | |
| transform: translate(0px, 1px) rotate(0deg); | |
| } | |
| 6% { | |
| transform: translate(0px, -3px) rotate(0deg); | |
| } | |
| 8% { | |
| transform: translate(0px, -9px) rotate(0deg); | |
| } | |
| 10% { | |
| transform: translate(0px, -7px) rotate(0deg); | |
| } | |
| 12% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| } | |
| 14% { | |
| transform: translate(0px, 2px) rotate(0deg); | |
| } | |
| 16% { | |
| transform: translate(0px, -8px) rotate(0deg); | |
| } | |
| 18% { | |
| transform: translate(0px, -8px) rotate(0deg); | |
| } | |
| 20% { | |
| transform: translate(0px, 10px) rotate(0deg); | |
| } | |
| 22% { | |
| transform: translate(0px, -6px) rotate(0deg); | |
| } | |
| 24% { | |
| transform: translate(0px, -8px) rotate(0deg); | |
| } | |
| 26% { | |
| transform: translate(0px, -5px) rotate(0deg); | |
| } | |
| 28% { | |
| transform: translate(0px, 3px) rotate(0deg); | |
| } | |
| 30% { | |
| transform: translate(0px, -6px) rotate(0deg); | |
| } | |
| 32% { | |
| transform: translate(0px, -4px) rotate(0deg); | |
| } | |
| 34% { | |
| transform: translate(0px, 5px) rotate(0deg); | |
| } | |
| 36% { | |
| transform: translate(0px, 4px) rotate(0deg); | |
| } | |
| 38% { | |
| transform: translate(0px, 4px) rotate(0deg); | |
| } | |
| 40% { | |
| transform: translate(0px, -9px) rotate(0deg); | |
| } | |
| 42% { | |
| transform: translate(0px, 2px) rotate(0deg); | |
| } | |
| 44% { | |
| transform: translate(0px, -5px) rotate(0deg); | |
| } | |
| 46% { | |
| transform: translate(0px, 9px) rotate(0deg); | |
| } | |
| 48% { | |
| transform: translate(0px, -2px) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translate(0px, -9px) rotate(0deg); | |
| } | |
| 52% { | |
| transform: translate(0px, -3px) rotate(0deg); | |
| } | |
| 54% { | |
| transform: translate(0px, -6px) rotate(0deg); | |
| } | |
| 56% { | |
| transform: translate(0px, -8px) rotate(0deg); | |
| } | |
| 58% { | |
| transform: translate(0px, 9px) rotate(0deg); | |
| } | |
| 60% { | |
| transform: translate(0px, -7px) rotate(0deg); | |
| } | |
| 62% { | |
| transform: translate(0px, -6px) rotate(0deg); | |
| } | |
| 64% { | |
| transform: translate(0px, -8px) rotate(0deg); | |
| } | |
| 66% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| } | |
| 68% { | |
| transform: translate(0px, 4px) rotate(0deg); | |
| } | |
| 70% { | |
| transform: translate(0px, 9px) rotate(0deg); | |
| } | |
| 72% { | |
| transform: translate(0px, -2px) rotate(0deg); | |
| } | |
| 74% { | |
| transform: translate(0px, 6px) rotate(0deg); | |
| } | |
| 76% { | |
| transform: translate(0px, -6px) rotate(0deg); | |
| } | |
| 78% { | |
| transform: translate(0px, -7px) rotate(0deg); | |
| } | |
| 80% { | |
| transform: translate(0px, -3px) rotate(0deg); | |
| } | |
| 82% { | |
| transform: translate(0px, -8px) rotate(0deg); | |
| } | |
| 84% { | |
| transform: translate(0px, -9px) rotate(0deg); | |
| } | |
| 86% { | |
| transform: translate(0px, -1px) rotate(0deg); | |
| } | |
| 88% { | |
| transform: translate(0px, 6px) rotate(0deg); | |
| } | |
| 90% { | |
| transform: translate(0px, -6px) rotate(0deg); | |
| } | |
| 92% { | |
| transform: translate(0px, -2px) rotate(0deg); | |
| } | |
| 94% { | |
| transform: translate(0px, 4px) rotate(0deg); | |
| } | |
| 96% { | |
| transform: translate(0px, -8px) rotate(0deg); | |
| } | |
| 98% { | |
| transform: translate(0px, 7px) 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(2.5deg); | |
| } | |
| 6% { | |
| transform: translate(0px, 0px) rotate(-3.5deg); | |
| } | |
| 8% { | |
| transform: translate(0px, 0px) rotate(-1.5deg); | |
| } | |
| 10% { | |
| transform: translate(0px, 0px) rotate(2.5deg); | |
| } | |
| 12% { | |
| transform: translate(0px, 0px) rotate(-4.5deg); | |
| } | |
| 14% { | |
| transform: translate(0px, 0px) rotate(2.5deg); | |
| } | |
| 16% { | |
| transform: translate(0px, 0px) rotate(1.5deg); | |
| } | |
| 18% { | |
| transform: translate(0px, 0px) rotate(5.5deg); | |
| } | |
| 20% { | |
| transform: translate(0px, 0px) rotate(1.5deg); | |
| } | |
| 22% { | |
| transform: translate(0px, 0px) rotate(1.5deg); | |
| } | |
| 24% { | |
| transform: translate(0px, 0px) rotate(7.5deg); | |
| } | |
| 26% { | |
| transform: translate(0px, 0px) rotate(-1.5deg); | |
| } | |
| 28% { | |
| transform: translate(0px, 0px) rotate(-1.5deg); | |
| } | |
| 30% { | |
| transform: translate(0px, 0px) rotate(-1.5deg); | |
| } | |
| 32% { | |
| transform: translate(0px, 0px) rotate(-5.5deg); | |
| } | |
| 34% { | |
| transform: translate(0px, 0px) rotate(3.5deg); | |
| } | |
| 36% { | |
| transform: translate(0px, 0px) rotate(1.5deg); | |
| } | |
| 38% { | |
| transform: translate(0px, 0px) rotate(7.5deg); | |
| } | |
| 40% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 42% { | |
| transform: translate(0px, 0px) rotate(-3.5deg); | |
| } | |
| 44% { | |
| transform: translate(0px, 0px) rotate(-6.5deg); | |
| } | |
| 46% { | |
| transform: translate(0px, 0px) rotate(-6.5deg); | |
| } | |
| 48% { | |
| transform: translate(0px, 0px) rotate(-2.5deg); | |
| } | |
| 50% { | |
| transform: translate(0px, 0px) rotate(2.5deg); | |
| } | |
| 52% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| } | |
| 54% { | |
| transform: translate(0px, 0px) rotate(-3.5deg); | |
| } | |
| 56% { | |
| transform: translate(0px, 0px) rotate(3.5deg); | |
| } | |
| 58% { | |
| transform: translate(0px, 0px) rotate(4.5deg); | |
| } | |
| 60% { | |
| transform: translate(0px, 0px) rotate(-6.5deg); | |
| } | |
| 62% { | |
| transform: translate(0px, 0px) rotate(4.5deg); | |
| } | |
| 64% { | |
| transform: translate(0px, 0px) rotate(4.5deg); | |
| } | |
| 66% { | |
| transform: translate(0px, 0px) rotate(3.5deg); | |
| } | |
| 68% { | |
| transform: translate(0px, 0px) rotate(4.5deg); | |
| } | |
| 70% { | |
| transform: translate(0px, 0px) rotate(-0.5deg); | |
| } | |
| 72% { | |
| transform: translate(0px, 0px) rotate(6.5deg); | |
| } | |
| 74% { | |
| transform: translate(0px, 0px) rotate(1.5deg); | |
| } | |
| 76% { | |
| transform: translate(0px, 0px) rotate(-1.5deg); | |
| } | |
| 78% { | |
| transform: translate(0px, 0px) rotate(5.5deg); | |
| } | |
| 80% { | |
| transform: translate(0px, 0px) rotate(-1.5deg); | |
| } | |
| 82% { | |
| transform: translate(0px, 0px) rotate(-2.5deg); | |
| } | |
| 84% { | |
| transform: translate(0px, 0px) rotate(1.5deg); | |
| } | |
| 86% { | |
| transform: translate(0px, 0px) rotate(6.5deg); | |
| } | |
| 88% { | |
| transform: translate(0px, 0px) rotate(1.5deg); | |
| } | |
| 90% { | |
| transform: translate(0px, 0px) rotate(3.5deg); | |
| } | |
| 92% { | |
| transform: translate(0px, 0px) rotate(7.5deg); | |
| } | |
| 94% { | |
| transform: translate(0px, 0px) rotate(-1.5deg); | |
| } | |
| 96% { | |
| transform: translate(0px, 0px) rotate(5.5deg); | |
| } | |
| 98% { | |
| transform: translate(0px, 0px) rotate(-1.5deg); | |
| } | |
| } | |
| @keyframes shake-opacity { | |
| 0% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| opacity: 0.3; | |
| } | |
| 10% { | |
| transform: translate(-2px, -4px) rotate(1.5deg); | |
| opacity: 0.3; | |
| } | |
| 20% { | |
| transform: translate(2px, -3px) rotate(1.5deg); | |
| opacity: 0.8; | |
| } | |
| 30% { | |
| transform: translate(-4px, -2px) rotate(-0.5deg); | |
| opacity: 0.3; | |
| } | |
| 40% { | |
| transform: translate(0px, 3px) rotate(2.5deg); | |
| opacity: 0.9; | |
| } | |
| 50% { | |
| transform: translate(0px, 0px) rotate(0.5deg); | |
| opacity: 0.1; | |
| } | |
| 60% { | |
| transform: translate(4px, 5px) rotate(-1.5deg); | |
| opacity: 0.5; | |
| } | |
| 70% { | |
| transform: translate(-1px, -2px) rotate(1.5deg); | |
| opacity: 0.7; | |
| } | |
| 80% { | |
| transform: translate(0px, -4px) rotate(1.5deg); | |
| opacity: 0.5; | |
| } | |
| 90% { | |
| transform: translate(0px, 3px) rotate(2.5deg); | |
| opacity: 0.2; | |
| } | |
| } | |
| @keyframes shake-crazy { | |
| 0% { | |
| transform: translate(0px, 0px) rotate(0deg); | |
| opacity: 0.4; | |
| } | |
| 10% { | |
| transform: translate(-15px, -15px) rotate(4deg); | |
| opacity: 0.2; | |
| } | |
| 20% { | |
| transform: translate(8px, -9px) rotate(10deg); | |
| opacity: 0.5; | |
| } | |
| 30% { | |
| transform: translate(3px, 1px) rotate(-8deg); | |
| opacity: 0.9; | |
| } | |
| 40% { | |
| transform: translate(-18px, -9px) rotate(-9deg); | |
| opacity: 0.9; | |
| } | |
| 50% { | |
| transform: translate(7px, -18px) rotate(-8deg); | |
| opacity: 0.3; | |
| } | |
| 60% { | |
| transform: translate(11px, 17px) rotate(-8deg); | |
| opacity: 0.4; | |
| } | |
| 70% { | |
| transform: translate(-5px, -17px) rotate(6deg); | |
| opacity: 0.1; | |
| } | |
| 80% { | |
| transform: translate(9px, 9px) rotate(2deg); | |
| opacity: 0.3; | |
| } | |
| 90% { | |
| transform: translate(-16px, 7px) rotate(-9deg); | |
| opacity: 1; | |
| } | |
| } | |
| .div { | |
| width: 100px; | |
| height: 100px; | |
| background-color: red; | |
| } | |
| /* 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; | |
| } | |
| .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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment