diff options
Diffstat (limited to 'src/wwwroot/libraries/fomantic/dist/components/transition.css')
| -rw-r--r-- | src/wwwroot/libraries/fomantic/dist/components/transition.css | 2059 |
1 files changed, 2059 insertions, 0 deletions
diff --git a/src/wwwroot/libraries/fomantic/dist/components/transition.css b/src/wwwroot/libraries/fomantic/dist/components/transition.css new file mode 100644 index 0000000..980b1b1 --- /dev/null +++ b/src/wwwroot/libraries/fomantic/dist/components/transition.css @@ -0,0 +1,2059 @@ +/*! + * # Fomantic-UI - Transition + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Transitions +*******************************/ + +.transition { + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 300ms; + animation-duration: 300ms; + -webkit-animation-timing-function: ease; + animation-timing-function: ease; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + + +/******************************* + States +*******************************/ + + +/* Animating */ +.animating.transition { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + visibility: visible !important; +} + +/* Loading */ +.loading.transition { + position: absolute; + top: -99999px; + left: -99999px; +} + +/* Hidden */ +.hidden.transition { + display: none; + visibility: hidden; +} + +/* Visible */ +.visible.transition { + display: block !important; + visibility: visible !important; + +/* backface-visibility: @backfaceVisibility; + transform: @use3DAcceleration;*/ +} +/* Disabled */ +.disabled.transition { + -webkit-animation-play-state: paused; + animation-play-state: paused; +} + + +/******************************* + Variations +*******************************/ + +.looping.transition { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + + +/******************************* + Transitions +*******************************/ + +/* + Some transitions adapted from Animate CSS + https://github.com/daneden/animate.css + + Additional transitions adapted from Glide + by Nick Pettit - https://github.com/nickpettit/glide +*/ + +/*-------------- + Browse +---------------*/ + +.transition.browse { + -webkit-animation-duration: 500ms; + animation-duration: 500ms; +} +.transition.browse.in { + -webkit-animation-name: browseIn; + animation-name: browseIn; +} +.transition.browse.out, +.transition.browse.left.out { + -webkit-animation-name: browseOutLeft; + animation-name: browseOutLeft; +} +.transition.browse.right.out { + -webkit-animation-name: browseOutRight; + animation-name: browseOutRight; +} + +/* In */ +@-webkit-keyframes browseIn { + 0% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + } + 10% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + opacity: 0.7; + } + 80% { + -webkit-transform: scale(1.05) translateZ(0px); + transform: scale(1.05) translateZ(0px); + opacity: 1; + z-index: 999; + } + 100% { + -webkit-transform: scale(1) translateZ(0px); + transform: scale(1) translateZ(0px); + z-index: 999; + } +} +@keyframes browseIn { + 0% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + } + 10% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + opacity: 0.7; + } + 80% { + -webkit-transform: scale(1.05) translateZ(0px); + transform: scale(1.05) translateZ(0px); + opacity: 1; + z-index: 999; + } + 100% { + -webkit-transform: scale(1) translateZ(0px); + transform: scale(1) translateZ(0px); + z-index: 999; + } +} + +/* Out */ +@-webkit-keyframes browseOutLeft { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: -1; + -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: -1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} +@keyframes browseOutLeft { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: -1; + -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: -1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} +@-webkit-keyframes browseOutRight { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: 1; + -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: 1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} +@keyframes browseOutRight { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: 1; + -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: 1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} + +/*-------------- + Drop +---------------*/ + +.drop.transition { + -webkit-transform-origin: top center; + transform-origin: top center; + -webkit-animation-duration: 400ms; + animation-duration: 400ms; + -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); + animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); +} +.drop.transition.in { + -webkit-animation-name: dropIn; + animation-name: dropIn; +} +.drop.transition.out { + -webkit-animation-name: dropOut; + animation-name: dropOut; +} + +/* Drop */ +@-webkit-keyframes dropIn { + 0% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes dropIn { + 0% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +@-webkit-keyframes dropOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } +} +@keyframes dropOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } +} + +/*-------------- + Fade +---------------*/ + +.transition.fade.in { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} +.transition[class*="fade up"].in { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; +} +.transition[class*="fade down"].in { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} +.transition[class*="fade left"].in { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} +.transition[class*="fade right"].in { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; +} +.transition.fade.out { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} +.transition[class*="fade up"].out { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} +.transition[class*="fade down"].out { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} +.transition[class*="fade left"].out { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} +.transition[class*="fade right"].out { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} + +/* In */ +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(10%); + transform: translateY(10%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(10%); + transform: translateY(10%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-10%); + transform: translateY(-10%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-10%); + transform: translateY(-10%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(10%); + transform: translateX(10%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(10%); + transform: translateX(10%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(-10%); + transform: translateX(-10%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(-10%); + transform: translateX(-10%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} + +/* Out */ +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateY(5%); + transform: translateY(5%); + } +} +@keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateY(5%); + transform: translateY(5%); + } +} +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-5%); + transform: translateY(-5%); + } +} +@keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-5%); + transform: translateY(-5%); + } +} +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateX(5%); + transform: translateX(5%); + } +} +@keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateX(5%); + transform: translateX(5%); + } +} +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-5%); + transform: translateX(-5%); + } +} +@keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-5%); + transform: translateX(-5%); + } +} + +/*-------------- + Flips +---------------*/ + +.flip.transition.in, +.flip.transition.out { + -webkit-animation-duration: 600ms; + animation-duration: 600ms; +} +.horizontal.flip.transition.in { + -webkit-animation-name: horizontalFlipIn; + animation-name: horizontalFlipIn; +} +.horizontal.flip.transition.out { + -webkit-animation-name: horizontalFlipOut; + animation-name: horizontalFlipOut; +} +.vertical.flip.transition.in { + -webkit-animation-name: verticalFlipIn; + animation-name: verticalFlipIn; +} +.vertical.flip.transition.out { + -webkit-animation-name: verticalFlipOut; + animation-name: verticalFlipOut; +} + +/* In */ +@-webkit-keyframes horizontalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } +} +@keyframes horizontalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } +} +@-webkit-keyframes verticalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } +} +@keyframes verticalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } +} + +/* Out */ +@-webkit-keyframes horizontalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + opacity: 0; + } +} +@keyframes horizontalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + opacity: 0; + } +} +@-webkit-keyframes verticalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } +} +@keyframes verticalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } +} + +/*-------------- + Scale +---------------*/ + +.scale.transition.in { + -webkit-animation-name: scaleIn; + animation-name: scaleIn; +} +.scale.transition.out { + -webkit-animation-name: scaleOut; + animation-name: scaleOut; +} +@-webkit-keyframes scaleIn { + 0% { + opacity: 0; + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes scaleIn { + 0% { + opacity: 0; + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +/* Out */ +@-webkit-keyframes scaleOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} +@keyframes scaleOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} + +/*-------------- + Fly +---------------*/ + + +/* Inward */ +.transition.fly { + -webkit-animation-duration: 0.6s; + animation-duration: 0.6s; + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); +} +.transition.fly.in { + -webkit-animation-name: flyIn; + animation-name: flyIn; +} +.transition[class*="fly up"].in { + -webkit-animation-name: flyInUp; + animation-name: flyInUp; +} +.transition[class*="fly down"].in { + -webkit-animation-name: flyInDown; + animation-name: flyInDown; +} +.transition[class*="fly left"].in { + -webkit-animation-name: flyInLeft; + animation-name: flyInLeft; +} +.transition[class*="fly right"].in { + -webkit-animation-name: flyInRight; + animation-name: flyInRight; +} + +/* Outward */ +.transition.fly.out { + -webkit-animation-name: flyOut; + animation-name: flyOut; +} +.transition[class*="fly up"].out { + -webkit-animation-name: flyOutUp; + animation-name: flyOutUp; +} +.transition[class*="fly down"].out { + -webkit-animation-name: flyOutDown; + animation-name: flyOutDown; +} +.transition[class*="fly left"].out { + -webkit-animation-name: flyOutLeft; + animation-name: flyOutLeft; +} +.transition[class*="fly right"].out { + -webkit-animation-name: flyOutRight; + animation-name: flyOutRight; +} + +/* In */ +@-webkit-keyframes flyIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +@keyframes flyIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +@-webkit-keyframes flyInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 1500px, 0); + transform: translate3d(0, 1500px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes flyInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 1500px, 0); + transform: translate3d(0, 1500px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@-webkit-keyframes flyInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -1500px, 0); + transform: translate3d(0, -1500px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@keyframes flyInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -1500px, 0); + transform: translate3d(0, -1500px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@-webkit-keyframes flyInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(1500px, 0, 0); + transform: translate3d(1500px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@keyframes flyInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(1500px, 0, 0); + transform: translate3d(1500px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@-webkit-keyframes flyInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(-1500px, 0, 0); + transform: translate3d(-1500px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@keyframes flyInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(-1500px, 0, 0); + transform: translate3d(-1500px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} + +/* Out */ +@-webkit-keyframes flyOut { + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 50%, + 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 100% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } +} +@keyframes flyOut { + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 50%, + 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 100% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } +} +@-webkit-keyframes flyOutUp { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} +@keyframes flyOutUp { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} +@-webkit-keyframes flyOutDown { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} +@keyframes flyOutDown { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} +@-webkit-keyframes flyOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} +@keyframes flyOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} +@-webkit-keyframes flyOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} +@keyframes flyOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +/*-------------- + Slide +---------------*/ + +.transition.slide.in, +.transition[class*="slide down"].in { + -webkit-animation-name: slideInY; + animation-name: slideInY; + -webkit-transform-origin: top center; + transform-origin: top center; +} +.transition[class*="slide up"].in { + -webkit-animation-name: slideInY; + animation-name: slideInY; + -webkit-transform-origin: bottom center; + transform-origin: bottom center; +} +.transition[class*="slide left"].in { + -webkit-animation-name: slideInX; + animation-name: slideInX; + -webkit-transform-origin: center right; + transform-origin: center right; +} +.transition[class*="slide right"].in { + -webkit-animation-name: slideInX; + animation-name: slideInX; + -webkit-transform-origin: center left; + transform-origin: center left; +} +.transition.slide.out, +.transition[class*="slide down"].out { + -webkit-animation-name: slideOutY; + animation-name: slideOutY; + -webkit-transform-origin: top center; + transform-origin: top center; +} +.transition[class*="slide up"].out { + -webkit-animation-name: slideOutY; + animation-name: slideOutY; + -webkit-transform-origin: bottom center; + transform-origin: bottom center; +} +.transition[class*="slide left"].out { + -webkit-animation-name: slideOutX; + animation-name: slideOutX; + -webkit-transform-origin: center right; + transform-origin: center right; +} +.transition[class*="slide right"].out { + -webkit-animation-name: slideOutX; + animation-name: slideOutX; + -webkit-transform-origin: center left; + transform-origin: center left; +} + +/* In */ +@-webkit-keyframes slideInY { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} +@keyframes slideInY { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} +@-webkit-keyframes slideInX { + 0% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } +} +@keyframes slideInX { + 0% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } +} + +/* Out */ +@-webkit-keyframes slideOutY { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + 100% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } +} +@keyframes slideOutY { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + 100% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } +} +@-webkit-keyframes slideOutX { + 0% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } + 100% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } +} +@keyframes slideOutX { + 0% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } + 100% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } +} + +/*-------------- + Swing +---------------*/ + +.transition.swing { + -webkit-animation-duration: 800ms; + animation-duration: 800ms; +} +.transition[class*="swing down"].in { + -webkit-animation-name: swingInX; + animation-name: swingInX; + -webkit-transform-origin: top center; + transform-origin: top center; +} +.transition[class*="swing up"].in { + -webkit-animation-name: swingInX; + animation-name: swingInX; + -webkit-transform-origin: bottom center; + transform-origin: bottom center; +} +.transition[class*="swing left"].in { + -webkit-animation-name: swingInY; + animation-name: swingInY; + -webkit-transform-origin: center right; + transform-origin: center right; +} +.transition[class*="swing right"].in { + -webkit-animation-name: swingInY; + animation-name: swingInY; + -webkit-transform-origin: center left; + transform-origin: center left; +} +.transition.swing.out, +.transition[class*="swing down"].out { + -webkit-animation-name: swingOutX; + animation-name: swingOutX; + -webkit-transform-origin: top center; + transform-origin: top center; +} +.transition[class*="swing up"].out { + -webkit-animation-name: swingOutX; + animation-name: swingOutX; + -webkit-transform-origin: bottom center; + transform-origin: bottom center; +} +.transition[class*="swing left"].out { + -webkit-animation-name: swingOutY; + animation-name: swingOutY; + -webkit-transform-origin: center right; + transform-origin: center right; +} +.transition[class*="swing right"].out { + -webkit-animation-name: swingOutY; + animation-name: swingOutY; + -webkit-transform-origin: center left; + transform-origin: center left; +} + +/* In */ +@-webkit-keyframes swingInX { + 0% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + 60% { + -webkit-transform: perspective(1000px) rotateX(15deg); + transform: perspective(1000px) rotateX(15deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + 100% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } +} +@keyframes swingInX { + 0% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + 60% { + -webkit-transform: perspective(1000px) rotateX(15deg); + transform: perspective(1000px) rotateX(15deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + 100% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } +} +@-webkit-keyframes swingInY { + 0% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + 60% { + -webkit-transform: perspective(1000px) rotateY(-17.5deg); + transform: perspective(1000px) rotateY(-17.5deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + 100% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } +} +@keyframes swingInY { + 0% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + 60% { + -webkit-transform: perspective(1000px) rotateY(-17.5deg); + transform: perspective(1000px) rotateY(-17.5deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + 100% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } +} + +/* Out */ +@-webkit-keyframes swingOutX { + 0% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } + 40% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + 60% { + -webkit-transform: perspective(1000px) rotateX(17.5deg); + transform: perspective(1000px) rotateX(17.5deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } +} +@keyframes swingOutX { + 0% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } + 40% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + 60% { + -webkit-transform: perspective(1000px) rotateX(17.5deg); + transform: perspective(1000px) rotateX(17.5deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } +} +@-webkit-keyframes swingOutY { + 0% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } + 40% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + 60% { + -webkit-transform: perspective(1000px) rotateY(-10deg); + transform: perspective(1000px) rotateY(-10deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } +} +@keyframes swingOutY { + 0% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } + 40% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + 60% { + -webkit-transform: perspective(1000px) rotateY(-10deg); + transform: perspective(1000px) rotateY(-10deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } +} + +/*-------------- + Zoom +---------------*/ + +.transition.zoom.in { + -webkit-animation-name: zoomIn; + animation-name: zoomIn; +} +.transition.zoom.out { + -webkit-animation-name: zoomOut; + animation-name: zoomOut; +} +@-webkit-keyframes zoomIn { + 0% { + opacity: 1; + -webkit-transform: scale(0); + transform: scale(0); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes zoomIn { + 0% { + opacity: 1; + -webkit-transform: scale(0); + transform: scale(0); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +@-webkit-keyframes zoomOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 1; + -webkit-transform: scale(0); + transform: scale(0); + } +} +@keyframes zoomOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 1; + -webkit-transform: scale(0); + transform: scale(0); + } +} + + +/******************************* + Static Animations +*******************************/ + + +/*-------------- + Emphasis +---------------*/ + +.flash.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: flash; + animation-name: flash; +} +.shake.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: shake; + animation-name: shake; +} +.bounce.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: bounce; + animation-name: bounce; +} +.tada.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: tada; + animation-name: tada; +} +.pulse.transition { + -webkit-animation-duration: 500ms; + animation-duration: 500ms; + -webkit-animation-name: pulse; + animation-name: pulse; +} +.jiggle.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: jiggle; + animation-name: jiggle; +} +.transition.glow { + -webkit-animation-duration: 2000ms; + animation-duration: 2000ms; + -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); +} +.transition.glow { + -webkit-animation-name: glow; + animation-name: glow; +} + +/* Flash */ +@-webkit-keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} + +/* Shake */ +@-webkit-keyframes shake { + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} +@keyframes shake { + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} + +/* Bounce */ +@-webkit-keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} +@keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} + +/* Tada */ +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} +@keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} + +/* Pulse */ +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 50% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + opacity: 0.7; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 50% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + opacity: 0.7; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +/* Jiggle */ +@-webkit-keyframes jiggle { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +@keyframes jiggle { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +/* Glow */ +@-webkit-keyframes glow { + 0% { + background-color: #FCFCFD; + } + 30% { + background-color: #FFF6CD; + } + 100% { + background-color: #FCFCFD; + } +} +@keyframes glow { + 0% { + background-color: #FCFCFD; + } + 30% { + background-color: #FFF6CD; + } + 100% { + background-color: #FCFCFD; + } +} + + +/******************************* + Site Overrides +*******************************/ + |