Difference between revisions of "Template:IONIS Paris/CSS2"
| (266 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| + | <html> | ||
| + | <style type="text/css"> | ||
| − | + | #proto a{ | |
| + | text-decoration: none; | ||
| + | } | ||
| − | + | #proto a:link { | |
| + | color: #66cdaa; | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | #proto a:hover { | |
| − | + | color:#b22222; | |
| − | + | text-decoration: none; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | /* ------------------------GRID -------------------------------*/ | |
| + | .grid { | ||
| + | position: relative; | ||
| + | margin: 0 auto; | ||
| + | list-style: none; | ||
| + | text-align: center; | ||
| + | } | ||
| − | . | + | /* Common style */ |
| + | .grid figure { | ||
| + | position: relative; | ||
| + | float: left; | ||
| + | overflow: hidden; | ||
| + | margin: 0.8em; /*change here for spacing*/ | ||
| + | width: 30.8%; | ||
| + | text-align: center; | ||
| + | cursor: pointer; | ||
| + | } | ||
| − | . | + | .grid figure img { |
| − | + | position: relative; | |
| − | + | display: block; | |
| − | + | max-width: 100%; | |
| − | + | opacity: 1; | |
| − | + | } | |
| − | . | + | .grid figure figcaption { |
| − | + | padding: 2em; | |
| − | + | color: #fff; | |
| − | + | text-transform: uppercase; | |
| − | + | font-size: 1.25em; | |
| + | -webkit-backface-visibility: hidden; | ||
| + | backface-visibility: hidden; | ||
| + | } | ||
| − | + | .grid figure figcaption::before, | |
| + | .grid figure figcaption::after { | ||
| + | pointer-events: none; | ||
| + | } | ||
| − | + | .grid figure figcaption, | |
| + | .grid figure figcaption > a { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | } | ||
| − | /* | + | /* Anchor will cover the whole item by default */ |
| − | . | + | /* For some effects it will show as a button */ |
| − | + | .grid figure figcaption > a { | |
| − | + | z-index: 1000; | |
| − | + | text-indent: 200%; | |
| − | + | white-space: nowrap; | |
| + | font-size: 0; | ||
| + | opacity: 0; | ||
| + | } | ||
| + | .grid figure h2 { | ||
| + | padding: 0; | ||
| + | word-spacing: -0.15em; | ||
| + | font-weight: 700; | ||
| + | } | ||
| − | + | .grid figure h2, | |
| − | . | + | .grid figure p { |
| − | . | + | margin: 0; |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .grid figure p { | |
| − | + | letter-spacing: 1px; | |
| − | + | font-size: 68.5%; | |
| − | + | } | |
| − | + | ||
| − | /* | + | /* Individual effects */ |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | .grid2 { | ||
| + | position: relative; | ||
| + | margin: 0 auto; | ||
| + | list-style: none; | ||
| + | text-align: center; | ||
| + | } | ||
| − | + | /* Common style */ | |
| − | . | + | .grid2 figure { |
| − | + | position: relative; | |
| − | /* | + | float: center; |
| + | overflow: hidden; | ||
| + | /*change here for spacing*/ | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | .grid2 figure img { | ||
| + | position: relative; | ||
| + | display: block; | ||
| + | max-width: 100%; | ||
| + | opacity: 1; | ||
| + | } | ||
| + | .grid2 figure figcaption { | ||
| + | color: #fff; | ||
| + | text-transform: uppercase; | ||
| + | font-size: 1.25em; | ||
| + | -webkit-backface-visibility: hidden; | ||
| + | backface-visibility: hidden; | ||
| + | } | ||
| + | .grid2 figure figcaption::before, | ||
| + | .grid2 figure figcaption::after { | ||
| + | pointer-events: none; | ||
| + | } | ||
| + | .grid2 figure figcaption, | ||
| + | .grid2 figure figcaption > a { | ||
| + | position: absolute; | ||
| + | top: 0px; | ||
| + | left: 0; | ||
| + | right:0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | } | ||
| + | /*---------------*/ | ||
| + | /***** Oscar *****/ | ||
| + | /*---------------*/ | ||
| + | figure.effect-oscar2 { | ||
| + | /* background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%); | ||
| + | background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);*/ | ||
| + | } | ||
| + | /*figure.effect-oscar img { | ||
| + | opacity: 0.9; | ||
| + | -webkit-transition: opacity 0.35s; | ||
| + | transition: opacity 0.35s; | ||
| + | } | ||
| + | */ | ||
| + | figure.effect-oscar2 figcaption { | ||
| + | /* background-color: rgba(58,52,42,0.7); | ||
| + | -webkit-transition: background-color 0.35s; | ||
| + | transition: background-color 0.35s;*/ | ||
| + | } | ||
| − | + | figure.effect-oscar2 figcaption::before { | |
| − | . | + | position: absolute; |
| − | + | content: ''; | |
| + | } | ||
| + | figure.effect-oscar2 figcaption img { | ||
| + | font-size: 25px; | ||
| + | margin: 0; | ||
| + | line-height: 1em; | ||
| + | -webkit-transition: -webkit-transform 0.35s; | ||
| + | transition: transform 0.35s; | ||
| + | -webkit-transform: translate3d(0,100%,0); | ||
| + | transform: translate3d(0,100%,0); | ||
| + | } | ||
| − | . | + | figure.effect-oscar2 figcaption::before { |
| − | + | opacity: 0; | |
| + | -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | ||
| + | transition: opacity 0.35s, transform 0.35s; | ||
| + | -webkit-transform: scale(0); | ||
| + | transform: scale(0); | ||
| + | } | ||
| − | . | + | figure.effect-oscar2:hover figcaption img { |
| − | . | + | opacity:1; |
| + | -webkit-transform: translateX(0); | ||
| + | -moz-transform: translateX(0); | ||
| + | -o-transform: translateX(); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; | ||
| + | filter: alpha(opacity=100); | ||
| + | opacity: 1; | ||
| + | -webkit-transition: all 0.3s ease-in-out; | ||
| + | -moz-transition: all 0.3s ease-in-out; | ||
| + | -o-transition: all 0.3s ease-in-out; | ||
| + | -ms-transition: all 0.3s ease-in-out; | ||
| + | transition: all 0.3s ease-in-out; | ||
| + | |||
| + | } | ||
| + | figure.effect-oscar2:hover figcaption::before, | ||
| + | figure.effect-oscar2:hover p { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | figure.effect-oscar2:hover figcaption { | ||
| + | background-color: rgba(0,0,0,0.2); | ||
| + | } | ||
| + | |||
| + | figure.effect-oscar2:hover img { | ||
| + | opacity: 0.4; | ||
| + | } | ||
| + | |||
| + | |||
| + | .social a:link{ | ||
| + | color:#66cdaa | ||
| + | } | ||
| + | .social a:hover{ | ||
| + | color:#333 | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | /*---------------*/ | |
| − | + | /***** Milo *****/ | |
| − | + | /*---------------*/ | |
| − | . | + | |
| + | figure.effect-milo figcaption::before { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale(0); | ||
| + | transform: scale(0); | ||
| + | -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | ||
| + | transition: opacity 0.35s, transform 0.35s; | ||
| + | } | ||
| + | |||
| + | figure.effect-milo figcaption::before { | ||
| + | position: absolute; | ||
| + | content: ''; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | figure.effect-milo:hover img { | ||
| + | opacity: 0.4; | ||
| + | -webkit-transform: translate3d(0,0,0) scale(1); | ||
| + | transform: translate3d(0,0,0) scale(1); | ||
} | } | ||
| − | + | ||
| − | + | figure.effect-milo figcaption img { | |
| − | + | opacity: 0; | |
| − | + | -webkit-transition: -webkit-transform 0.50s; | |
| − | + | transition: transform 0.40s; | |
| − | + | -webkit-transform: translate3d(0,0,0) scale(1); | |
| − | + | transform: translate3d(0,0,0) scale(1); | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| + | figure.effect-milo:hover figcaption img { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translate3d(0,0,0); | ||
| + | transform: translate3d(0,0,0); | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | /* EFFECT OSCAR !!! */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | . | + | figure.effect-oscar { |
| − | + | /* background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%); | |
| + | background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);*/ | ||
| + | } | ||
| + | /*figure.effect-oscar img { | ||
| + | opacity: 0.9; | ||
| + | -webkit-transition: opacity 0.35s; | ||
| + | transition: opacity 0.35s; | ||
| + | } | ||
| + | */ | ||
| + | figure.effect-oscar figcaption { | ||
| + | padding: 15%; | ||
| + | background-color:rgba(0,0,0,0.3) | ||
| + | /* background-color: rgba(58,52,42,0.7); | ||
| + | -webkit-transition: background-color 0.35s; | ||
| + | transition: background-color 0.35s;*/ | ||
| + | } | ||
| + | figure.effect-oscar figcaption::before { | ||
| + | position: absolute; | ||
| + | top: 30px; | ||
| + | right: 30px; | ||
| + | bottom: 30px; | ||
| + | left: 30px; | ||
| + | border: 1px solid #fff; | ||
| + | content: ''; | ||
| + | } | ||
| − | . | + | figure.effect-oscar h2 { |
| − | + | margin: 0; | |
| − | + | font-size:35px; | |
| + | padding-bottom:15px; | ||
| + | padding-left:0; | ||
| + | line-height: 1em; | ||
| + | -webkit-transition: -webkit-transform 0.35s; | ||
| + | transition: transform 0.35s; | ||
| + | -webkit-transform: translate3d(0,100%,0); | ||
| + | transform: translate3d(0,100%,0); | ||
| + | } | ||
| − | . | + | figure.effect-oscar figcaption::before, |
| + | figure.effect-oscar p { | ||
| + | opacity: 0; | ||
| + | -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | ||
| + | transition: opacity 0.35s, transform 0.35s; | ||
| + | -webkit-transform: scale(0); | ||
| + | transform: scale(0); | ||
| + | } | ||
| − | .grid.team | + | figure.effect-oscar:hover h2 { |
| − | figure.effect-chico figcaption {padding: 1.5em;} | + | -webkit-transform: translate3d(0,0,0); |
| − | .footer{margin-top: 2em;padding-bottom: 2em;} | + | transform: translate3d(0,0,0); |
| − | } | + | } |
| + | |||
| + | figure.effect-oscar:hover figcaption::before, | ||
| + | figure.effect-oscar:hover p { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | figure.effect-oscar:hover figcaption { | ||
| + | background-color: rgba(0,0,0,0.8); | ||
| + | } | ||
| + | |||
| + | figure.effect-oscar:hover img { | ||
| + | opacity: 0.4; | ||
| + | |||
| + | } | ||
| + | /*---------------*/ | ||
| + | /***** Chico *****/ | ||
| + | /*---------------*/ | ||
| + | |||
| + | figure.effect-chico img { | ||
| + | -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | ||
| + | transition: opacity 0.35s, transform 0.35s; | ||
| + | -webkit-transform: scale(1.12); | ||
| + | transform: scale(1.12); | ||
| + | } | ||
| + | |||
| + | figure.effect-chico:hover img { | ||
| + | opacity: 0.5; | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | figure.effect-chico figcaption { | ||
| + | padding: 2em; | ||
| + | } | ||
| + | |||
| + | figure.effect-chico figcaption::before { | ||
| + | position: absolute; | ||
| + | top: 30px; | ||
| + | right: 30px; | ||
| + | bottom: 30px; | ||
| + | left: 30px; | ||
| + | border: 1px solid #fff; | ||
| + | content: ''; | ||
| + | -webkit-transform: scale(1.1); | ||
| + | transform: scale(1.1); | ||
| + | background: rgba(0,0,0,0.5); | ||
| + | } | ||
| + | |||
| + | figure.effect-chico figcaption::before, | ||
| + | figure.effect-chico p { | ||
| + | opacity: 0; | ||
| + | -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | ||
| + | transition: opacity 0.35s, transform 0.35s; | ||
| + | } | ||
| + | |||
| + | figure.effect-chico h2 { | ||
| + | padding: 20% 0 20px 0; | ||
| + | } | ||
| + | |||
| + | figure.effect-chico p { | ||
| + | margin: 0 auto; | ||
| + | max-width: 200px; | ||
| + | -webkit-transform: scale(1.5); | ||
| + | transform: scale(1.5); | ||
| + | } | ||
| + | |||
| + | figure.effect-chico:hover figcaption::before, | ||
| + | figure.effect-chico:hover p { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 50em) { | ||
| + | .content { | ||
| + | padding: 0 10px; | ||
| + | text-align: center; | ||
| + | } | ||
| + | .grid figure { | ||
| + | width: 50%; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| + | @media (max-width: 639px) { | ||
| + | .grid figure {width: 100%;} | ||
| + | } | ||
| + | |||
| + | |||
| + | @charset "UTF-8"; | ||
| + | |||
| + | /*! | ||
| + | Animate.css - http://daneden.me/animate | ||
| + | Licensed under the MIT license | ||
| + | |||
| + | Copyright (c) 2013 Daniel Eden | ||
| + | |||
| + | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: | ||
| + | |||
| + | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | ||
| + | |||
| + | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. | ||
| + | */ | ||
| + | |||
| + | .animated { | ||
| + | -webkit-animation-duration: 1s; | ||
| + | animation-duration: 1s; | ||
| + | -webkit-animation-fill-mode: both; | ||
| + | animation-fill-mode: both; | ||
| + | } | ||
| + | |||
| + | .animated.hinge { | ||
| + | -webkit-animation-duration: 2s; | ||
| + | animation-duration: 2s; | ||
| + | } | ||
| + | |||
| + | @-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); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: translateY(-30px); | ||
| + | -ms-transform: translateY(-30px); | ||
| + | transform: translateY(-30px); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | -webkit-transform: translateY(-15px); | ||
| + | -ms-transform: translateY(-15px); | ||
| + | transform: translateY(-15px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .bounce { | ||
| + | -webkit-animation-name: bounce; | ||
| + | animation-name: bounce; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes flash { | ||
| + | 0%, 50%, 100% { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 25%, 75% { | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes flash { | ||
| + | 0%, 50%, 100% { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 25%, 75% { | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .flash { | ||
| + | -webkit-animation-name: flash; | ||
| + | animation-name: flash; | ||
| + | } | ||
| + | |||
| + | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | ||
| + | |||
| + | @-webkit-keyframes pulse { | ||
| + | 0% { | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | 50% { | ||
| + | -webkit-transform: scale(1.1); | ||
| + | transform: scale(1.1); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes pulse { | ||
| + | 0% { | ||
| + | -webkit-transform: scale(1); | ||
| + | -ms-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | 50% { | ||
| + | -webkit-transform: scale(1.1); | ||
| + | -ms-transform: scale(1.1); | ||
| + | transform: scale(1.1); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: scale(1); | ||
| + | -ms-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .pulse { | ||
| + | -webkit-animation-name: pulse; | ||
| + | animation-name: pulse; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes rubberBand { | ||
| + | 0% { | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | 30% { | ||
| + | -webkit-transform: scaleX(1.25) scaleY(0.75); | ||
| + | transform: scaleX(1.25) scaleY(0.75); | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: scaleX(0.75) scaleY(1.25); | ||
| + | transform: scaleX(0.75) scaleY(1.25); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | -webkit-transform: scaleX(1.15) scaleY(0.85); | ||
| + | transform: scaleX(1.15) scaleY(0.85); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rubberBand { | ||
| + | 0% { | ||
| + | -webkit-transform: scale(1); | ||
| + | -ms-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | 30% { | ||
| + | -webkit-transform: scaleX(1.25) scaleY(0.75); | ||
| + | -ms-transform: scaleX(1.25) scaleY(0.75); | ||
| + | transform: scaleX(1.25) scaleY(0.75); | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: scaleX(0.75) scaleY(1.25); | ||
| + | -ms-transform: scaleX(0.75) scaleY(1.25); | ||
| + | transform: scaleX(0.75) scaleY(1.25); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | -webkit-transform: scaleX(1.15) scaleY(0.85); | ||
| + | -ms-transform: scaleX(1.15) scaleY(0.85); | ||
| + | transform: scaleX(1.15) scaleY(0.85); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: scale(1); | ||
| + | -ms-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rubberBand { | ||
| + | -webkit-animation-name: rubberBand; | ||
| + | animation-name: rubberBand; | ||
| + | } | ||
| + | |||
| + | @-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); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 10%, 30%, 50%, 70%, 90% { | ||
| + | -webkit-transform: translateX(-10px); | ||
| + | -ms-transform: translateX(-10px); | ||
| + | transform: translateX(-10px); | ||
| + | } | ||
| + | |||
| + | 20%, 40%, 60%, 80% { | ||
| + | -webkit-transform: translateX(10px); | ||
| + | -ms-transform: translateX(10px); | ||
| + | transform: translateX(10px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .shake { | ||
| + | -webkit-animation-name: shake; | ||
| + | animation-name: shake; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes swing { | ||
| + | 20% { | ||
| + | -webkit-transform: rotate(15deg); | ||
| + | transform: rotate(15deg); | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: rotate(-10deg); | ||
| + | transform: rotate(-10deg); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | -webkit-transform: rotate(5deg); | ||
| + | transform: rotate(5deg); | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: rotate(-5deg); | ||
| + | transform: rotate(-5deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: rotate(0deg); | ||
| + | transform: rotate(0deg); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes swing { | ||
| + | 20% { | ||
| + | -webkit-transform: rotate(15deg); | ||
| + | -ms-transform: rotate(15deg); | ||
| + | transform: rotate(15deg); | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: rotate(-10deg); | ||
| + | -ms-transform: rotate(-10deg); | ||
| + | transform: rotate(-10deg); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | -webkit-transform: rotate(5deg); | ||
| + | -ms-transform: rotate(5deg); | ||
| + | transform: rotate(5deg); | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: rotate(-5deg); | ||
| + | -ms-transform: rotate(-5deg); | ||
| + | transform: rotate(-5deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: rotate(0deg); | ||
| + | -ms-transform: rotate(0deg); | ||
| + | transform: rotate(0deg); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .swing { | ||
| + | -webkit-transform-origin: top center; | ||
| + | -ms-transform-origin: top center; | ||
| + | transform-origin: top center; | ||
| + | -webkit-animation-name: swing; | ||
| + | animation-name: swing; | ||
| + | } | ||
| + | |||
| + | @-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); | ||
| + | -ms-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | 10%, 20% { | ||
| + | -webkit-transform: scale(0.9) rotate(-3deg); | ||
| + | -ms-transform: scale(0.9) rotate(-3deg); | ||
| + | transform: scale(0.9) rotate(-3deg); | ||
| + | } | ||
| + | |||
| + | 30%, 50%, 70%, 90% { | ||
| + | -webkit-transform: scale(1.1) rotate(3deg); | ||
| + | -ms-transform: scale(1.1) rotate(3deg); | ||
| + | transform: scale(1.1) rotate(3deg); | ||
| + | } | ||
| + | |||
| + | 40%, 60%, 80% { | ||
| + | -webkit-transform: scale(1.1) rotate(-3deg); | ||
| + | -ms-transform: scale(1.1) rotate(-3deg); | ||
| + | transform: scale(1.1) rotate(-3deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: scale(1) rotate(0); | ||
| + | -ms-transform: scale(1) rotate(0); | ||
| + | transform: scale(1) rotate(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .tada { | ||
| + | -webkit-animation-name: tada; | ||
| + | animation-name: tada; | ||
| + | } | ||
| + | |||
| + | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | ||
| + | |||
| + | @-webkit-keyframes wobble { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0%); | ||
| + | transform: translateX(0%); | ||
| + | } | ||
| + | |||
| + | 15% { | ||
| + | -webkit-transform: translateX(-25%) rotate(-5deg); | ||
| + | transform: translateX(-25%) rotate(-5deg); | ||
| + | } | ||
| + | |||
| + | 30% { | ||
| + | -webkit-transform: translateX(20%) rotate(3deg); | ||
| + | transform: translateX(20%) rotate(3deg); | ||
| + | } | ||
| + | |||
| + | 45% { | ||
| + | -webkit-transform: translateX(-15%) rotate(-3deg); | ||
| + | transform: translateX(-15%) rotate(-3deg); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | -webkit-transform: translateX(10%) rotate(2deg); | ||
| + | transform: translateX(10%) rotate(2deg); | ||
| + | } | ||
| + | |||
| + | 75% { | ||
| + | -webkit-transform: translateX(-5%) rotate(-1deg); | ||
| + | transform: translateX(-5%) rotate(-1deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0%); | ||
| + | transform: translateX(0%); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes wobble { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0%); | ||
| + | -ms-transform: translateX(0%); | ||
| + | transform: translateX(0%); | ||
| + | } | ||
| + | |||
| + | 15% { | ||
| + | -webkit-transform: translateX(-25%) rotate(-5deg); | ||
| + | -ms-transform: translateX(-25%) rotate(-5deg); | ||
| + | transform: translateX(-25%) rotate(-5deg); | ||
| + | } | ||
| + | |||
| + | 30% { | ||
| + | -webkit-transform: translateX(20%) rotate(3deg); | ||
| + | -ms-transform: translateX(20%) rotate(3deg); | ||
| + | transform: translateX(20%) rotate(3deg); | ||
| + | } | ||
| + | |||
| + | 45% { | ||
| + | -webkit-transform: translateX(-15%) rotate(-3deg); | ||
| + | -ms-transform: translateX(-15%) rotate(-3deg); | ||
| + | transform: translateX(-15%) rotate(-3deg); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | -webkit-transform: translateX(10%) rotate(2deg); | ||
| + | -ms-transform: translateX(10%) rotate(2deg); | ||
| + | transform: translateX(10%) rotate(2deg); | ||
| + | } | ||
| + | |||
| + | 75% { | ||
| + | -webkit-transform: translateX(-5%) rotate(-1deg); | ||
| + | -ms-transform: translateX(-5%) rotate(-1deg); | ||
| + | transform: translateX(-5%) rotate(-1deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0%); | ||
| + | -ms-transform: translateX(0%); | ||
| + | transform: translateX(0%); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .wobble { | ||
| + | -webkit-animation-name: wobble; | ||
| + | animation-name: wobble; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes bounceIn { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale(.3); | ||
| + | transform: scale(.3); | ||
| + | } | ||
| + | |||
| + | 50% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale(1.05); | ||
| + | transform: scale(1.05); | ||
| + | } | ||
| + | |||
| + | 70% { | ||
| + | -webkit-transform: scale(.9); | ||
| + | transform: scale(.9); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes bounceIn { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale(.3); | ||
| + | -ms-transform: scale(.3); | ||
| + | transform: scale(.3); | ||
| + | } | ||
| + | |||
| + | 50% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale(1.05); | ||
| + | -ms-transform: scale(1.05); | ||
| + | transform: scale(1.05); | ||
| + | } | ||
| + | |||
| + | 70% { | ||
| + | -webkit-transform: scale(.9); | ||
| + | -ms-transform: scale(.9); | ||
| + | transform: scale(.9); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale(1); | ||
| + | -ms-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .bounceIn { | ||
| + | -webkit-animation-name: bounceIn; | ||
| + | animation-name: bounceIn; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes bounceInDown { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(30px); | ||
| + | transform: translateY(30px); | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: translateY(-10px); | ||
| + | transform: translateY(-10px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes bounceInDown { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | -ms-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(30px); | ||
| + | -ms-transform: translateY(30px); | ||
| + | transform: translateY(30px); | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: translateY(-10px); | ||
| + | -ms-transform: translateY(-10px); | ||
| + | transform: translateY(-10px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .bounceInDown { | ||
| + | -webkit-animation-name: bounceInDown; | ||
| + | animation-name: bounceInDown; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes bounceInLeft { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(30px); | ||
| + | transform: translateX(30px); | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: translateX(-10px); | ||
| + | transform: translateX(-10px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes bounceInLeft { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | -ms-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(30px); | ||
| + | -ms-transform: translateX(30px); | ||
| + | transform: translateX(30px); | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: translateX(-10px); | ||
| + | -ms-transform: translateX(-10px); | ||
| + | transform: translateX(-10px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .bounceInLeft { | ||
| + | -webkit-animation-name: bounceInLeft; | ||
| + | animation-name: bounceInLeft; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes bounceInRight { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(-30px); | ||
| + | transform: translateX(-30px); | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: translateX(10px); | ||
| + | transform: translateX(10px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes bounceInRight { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | -ms-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(-30px); | ||
| + | -ms-transform: translateX(-30px); | ||
| + | transform: translateX(-30px); | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: translateX(10px); | ||
| + | -ms-transform: translateX(10px); | ||
| + | transform: translateX(10px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .bounceInRight { | ||
| + | -webkit-animation-name: bounceInRight; | ||
| + | animation-name: bounceInRight; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes bounceInUp { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(2000px); | ||
| + | transform: translateY(2000px); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(-30px); | ||
| + | transform: translateY(-30px); | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: translateY(10px); | ||
| + | transform: translateY(10px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes bounceInUp { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(2000px); | ||
| + | -ms-transform: translateY(2000px); | ||
| + | transform: translateY(2000px); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(-30px); | ||
| + | -ms-transform: translateY(-30px); | ||
| + | transform: translateY(-30px); | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: translateY(10px); | ||
| + | -ms-transform: translateY(10px); | ||
| + | transform: translateY(10px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .bounceInUp { | ||
| + | -webkit-animation-name: bounceInUp; | ||
| + | animation-name: bounceInUp; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes bounceOut { | ||
| + | 0% { | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | 25% { | ||
| + | -webkit-transform: scale(.95); | ||
| + | transform: scale(.95); | ||
| + | } | ||
| + | |||
| + | 50% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale(1.1); | ||
| + | transform: scale(1.1); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale(.3); | ||
| + | transform: scale(.3); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes bounceOut { | ||
| + | 0% { | ||
| + | -webkit-transform: scale(1); | ||
| + | -ms-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | 25% { | ||
| + | -webkit-transform: scale(.95); | ||
| + | -ms-transform: scale(.95); | ||
| + | transform: scale(.95); | ||
| + | } | ||
| + | |||
| + | 50% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale(1.1); | ||
| + | -ms-transform: scale(1.1); | ||
| + | transform: scale(1.1); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale(.3); | ||
| + | -ms-transform: scale(.3); | ||
| + | transform: scale(.3); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .bounceOut { | ||
| + | -webkit-animation-name: bounceOut; | ||
| + | animation-name: bounceOut; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes bounceOutDown { | ||
| + | 0% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 20% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(-20px); | ||
| + | transform: translateY(-20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(2000px); | ||
| + | transform: translateY(2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes bounceOutDown { | ||
| + | 0% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 20% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(-20px); | ||
| + | -ms-transform: translateY(-20px); | ||
| + | transform: translateY(-20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(2000px); | ||
| + | -ms-transform: translateY(2000px); | ||
| + | transform: translateY(2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .bounceOutDown { | ||
| + | -webkit-animation-name: bounceOutDown; | ||
| + | animation-name: bounceOutDown; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes bounceOutLeft { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 20% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(20px); | ||
| + | transform: translateX(20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes bounceOutLeft { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 20% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(20px); | ||
| + | -ms-transform: translateX(20px); | ||
| + | transform: translateX(20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | -ms-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .bounceOutLeft { | ||
| + | -webkit-animation-name: bounceOutLeft; | ||
| + | animation-name: bounceOutLeft; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes bounceOutRight { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 20% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(-20px); | ||
| + | transform: translateX(-20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes bounceOutRight { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 20% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(-20px); | ||
| + | -ms-transform: translateX(-20px); | ||
| + | transform: translateX(-20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | -ms-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .bounceOutRight { | ||
| + | -webkit-animation-name: bounceOutRight; | ||
| + | animation-name: bounceOutRight; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes bounceOutUp { | ||
| + | 0% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 20% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(20px); | ||
| + | transform: translateY(20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes bounceOutUp { | ||
| + | 0% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 20% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(20px); | ||
| + | -ms-transform: translateY(20px); | ||
| + | transform: translateY(20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | -ms-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .bounceOutUp { | ||
| + | -webkit-animation-name: bounceOutUp; | ||
| + | animation-name: bounceOutUp; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeIn { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeIn { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeIn { | ||
| + | -webkit-animation-name: fadeIn; | ||
| + | animation-name: fadeIn; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeInDown { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-20px); | ||
| + | transform: translateY(-20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeInDown { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-20px); | ||
| + | -ms-transform: translateY(-20px); | ||
| + | transform: translateY(-20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeInDown { | ||
| + | -webkit-animation-name: fadeInDown; | ||
| + | animation-name: fadeInDown; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeInDownBig { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeInDownBig { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | -ms-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeInDownBig { | ||
| + | -webkit-animation-name: fadeInDownBig; | ||
| + | animation-name: fadeInDownBig; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeInLeft { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-20px); | ||
| + | transform: translateX(-20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeInLeft { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-20px); | ||
| + | -ms-transform: translateX(-20px); | ||
| + | transform: translateX(-20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeInLeft { | ||
| + | -webkit-animation-name: fadeInLeft; | ||
| + | animation-name: fadeInLeft; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeInLeftBig { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeInLeftBig { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | -ms-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeInLeftBig { | ||
| + | -webkit-animation-name: fadeInLeftBig; | ||
| + | animation-name: fadeInLeftBig; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeInRight { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(20px); | ||
| + | transform: translateX(20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeInRight { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(20px); | ||
| + | -ms-transform: translateX(20px); | ||
| + | transform: translateX(20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeInRight { | ||
| + | -webkit-animation-name: fadeInRight; | ||
| + | animation-name: fadeInRight; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeInRightBig { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeInRightBig { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | -ms-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeInRightBig { | ||
| + | -webkit-animation-name: fadeInRightBig; | ||
| + | animation-name: fadeInRightBig; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeInUp { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(20px); | ||
| + | transform: translateY(20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeInUp { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(20px); | ||
| + | -ms-transform: translateY(20px); | ||
| + | transform: translateY(20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeInUp { | ||
| + | -webkit-animation-name: fadeInUp; | ||
| + | animation-name: fadeInUp; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeInUpBig { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(2000px); | ||
| + | transform: translateY(2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeInUpBig { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(2000px); | ||
| + | -ms-transform: translateY(2000px); | ||
| + | transform: translateY(2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeInUpBig { | ||
| + | -webkit-animation-name: fadeInUpBig; | ||
| + | animation-name: fadeInUpBig; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeOut { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeOut { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeOut { | ||
| + | -webkit-animation-name: fadeOut; | ||
| + | animation-name: fadeOut; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeOutDown { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(20px); | ||
| + | transform: translateY(20px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeOutDown { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(20px); | ||
| + | -ms-transform: translateY(20px); | ||
| + | transform: translateY(20px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeOutDown { | ||
| + | -webkit-animation-name: fadeOutDown; | ||
| + | animation-name: fadeOutDown; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeOutDownBig { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(2000px); | ||
| + | transform: translateY(2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeOutDownBig { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(2000px); | ||
| + | -ms-transform: translateY(2000px); | ||
| + | transform: translateY(2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeOutDownBig { | ||
| + | -webkit-animation-name: fadeOutDownBig; | ||
| + | animation-name: fadeOutDownBig; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeOutLeft { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-20px); | ||
| + | transform: translateX(-20px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeOutLeft { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-20px); | ||
| + | -ms-transform: translateX(-20px); | ||
| + | transform: translateX(-20px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeOutLeft { | ||
| + | -webkit-animation-name: fadeOutLeft; | ||
| + | animation-name: fadeOutLeft; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeOutLeftBig { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeOutLeftBig { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | -ms-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeOutLeftBig { | ||
| + | -webkit-animation-name: fadeOutLeftBig; | ||
| + | animation-name: fadeOutLeftBig; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeOutRight { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(20px); | ||
| + | transform: translateX(20px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeOutRight { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(20px); | ||
| + | -ms-transform: translateX(20px); | ||
| + | transform: translateX(20px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeOutRight { | ||
| + | -webkit-animation-name: fadeOutRight; | ||
| + | animation-name: fadeOutRight; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeOutRightBig { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeOutRightBig { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | -ms-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeOutRightBig { | ||
| + | -webkit-animation-name: fadeOutRightBig; | ||
| + | animation-name: fadeOutRightBig; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeOutUp { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-20px); | ||
| + | transform: translateY(-20px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeOutUp { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-20px); | ||
| + | -ms-transform: translateY(-20px); | ||
| + | transform: translateY(-20px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeOutUp { | ||
| + | -webkit-animation-name: fadeOutUp; | ||
| + | animation-name: fadeOutUp; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fadeOutUpBig { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeOutUpBig { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | -ms-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeOutUpBig { | ||
| + | -webkit-animation-name: fadeOutUpBig; | ||
| + | animation-name: fadeOutUpBig; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes flip { | ||
| + | 0% { | ||
| + | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | ||
| + | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | ||
| + | -webkit-animation-timing-function: ease-out; | ||
| + | animation-timing-function: ease-out; | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | ||
| + | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | ||
| + | -webkit-animation-timing-function: ease-out; | ||
| + | animation-timing-function: ease-out; | ||
| + | } | ||
| + | |||
| + | 50% { | ||
| + | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | ||
| + | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | ||
| + | -webkit-animation-timing-function: ease-in; | ||
| + | animation-timing-function: ease-in; | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | ||
| + | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | ||
| + | -webkit-animation-timing-function: ease-in; | ||
| + | animation-timing-function: ease-in; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | ||
| + | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | ||
| + | -webkit-animation-timing-function: ease-in; | ||
| + | animation-timing-function: ease-in; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes flip { | ||
| + | 0% { | ||
| + | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | ||
| + | -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | ||
| + | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | ||
| + | -webkit-animation-timing-function: ease-out; | ||
| + | animation-timing-function: ease-out; | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | ||
| + | -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | ||
| + | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | ||
| + | -webkit-animation-timing-function: ease-out; | ||
| + | animation-timing-function: ease-out; | ||
| + | } | ||
| + | |||
| + | 50% { | ||
| + | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | ||
| + | -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | ||
| + | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | ||
| + | -webkit-animation-timing-function: ease-in; | ||
| + | animation-timing-function: ease-in; | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | ||
| + | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | ||
| + | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | ||
| + | -webkit-animation-timing-function: ease-in; | ||
| + | animation-timing-function: ease-in; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | ||
| + | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | ||
| + | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | ||
| + | -webkit-animation-timing-function: ease-in; | ||
| + | animation-timing-function: ease-in; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .animated.flip { | ||
| + | -webkit-backface-visibility: visible; | ||
| + | -ms-backface-visibility: visible; | ||
| + | backface-visibility: visible; | ||
| + | -webkit-animation-name: flip; | ||
| + | animation-name: flip; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes flipInX { | ||
| + | 0% { | ||
| + | -webkit-transform: perspective(400px) rotateX(90deg); | ||
| + | transform: perspective(400px) rotateX(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: perspective(400px) rotateX(-10deg); | ||
| + | transform: perspective(400px) rotateX(-10deg); | ||
| + | } | ||
| + | |||
| + | 70% { | ||
| + | -webkit-transform: perspective(400px) rotateX(10deg); | ||
| + | transform: perspective(400px) rotateX(10deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: perspective(400px) rotateX(0deg); | ||
| + | transform: perspective(400px) rotateX(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes flipInX { | ||
| + | 0% { | ||
| + | -webkit-transform: perspective(400px) rotateX(90deg); | ||
| + | -ms-transform: perspective(400px) rotateX(90deg); | ||
| + | transform: perspective(400px) rotateX(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: perspective(400px) rotateX(-10deg); | ||
| + | -ms-transform: perspective(400px) rotateX(-10deg); | ||
| + | transform: perspective(400px) rotateX(-10deg); | ||
| + | } | ||
| + | |||
| + | 70% { | ||
| + | -webkit-transform: perspective(400px) rotateX(10deg); | ||
| + | -ms-transform: perspective(400px) rotateX(10deg); | ||
| + | transform: perspective(400px) rotateX(10deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: perspective(400px) rotateX(0deg); | ||
| + | -ms-transform: perspective(400px) rotateX(0deg); | ||
| + | transform: perspective(400px) rotateX(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .flipInX { | ||
| + | -webkit-backface-visibility: visible !important; | ||
| + | -ms-backface-visibility: visible !important; | ||
| + | backface-visibility: visible !important; | ||
| + | -webkit-animation-name: flipInX; | ||
| + | animation-name: flipInX; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes flipInY { | ||
| + | 0% { | ||
| + | -webkit-transform: perspective(400px) rotateY(90deg); | ||
| + | transform: perspective(400px) rotateY(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: perspective(400px) rotateY(-10deg); | ||
| + | transform: perspective(400px) rotateY(-10deg); | ||
| + | } | ||
| + | |||
| + | 70% { | ||
| + | -webkit-transform: perspective(400px) rotateY(10deg); | ||
| + | transform: perspective(400px) rotateY(10deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: perspective(400px) rotateY(0deg); | ||
| + | transform: perspective(400px) rotateY(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes flipInY { | ||
| + | 0% { | ||
| + | -webkit-transform: perspective(400px) rotateY(90deg); | ||
| + | -ms-transform: perspective(400px) rotateY(90deg); | ||
| + | transform: perspective(400px) rotateY(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: perspective(400px) rotateY(-10deg); | ||
| + | -ms-transform: perspective(400px) rotateY(-10deg); | ||
| + | transform: perspective(400px) rotateY(-10deg); | ||
| + | } | ||
| + | |||
| + | 70% { | ||
| + | -webkit-transform: perspective(400px) rotateY(10deg); | ||
| + | -ms-transform: perspective(400px) rotateY(10deg); | ||
| + | transform: perspective(400px) rotateY(10deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: perspective(400px) rotateY(0deg); | ||
| + | -ms-transform: perspective(400px) rotateY(0deg); | ||
| + | transform: perspective(400px) rotateY(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .flipInY { | ||
| + | -webkit-backface-visibility: visible !important; | ||
| + | -ms-backface-visibility: visible !important; | ||
| + | backface-visibility: visible !important; | ||
| + | -webkit-animation-name: flipInY; | ||
| + | animation-name: flipInY; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes flipOutX { | ||
| + | 0% { | ||
| + | -webkit-transform: perspective(400px) rotateX(0deg); | ||
| + | transform: perspective(400px) rotateX(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: perspective(400px) rotateX(90deg); | ||
| + | transform: perspective(400px) rotateX(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes flipOutX { | ||
| + | 0% { | ||
| + | -webkit-transform: perspective(400px) rotateX(0deg); | ||
| + | -ms-transform: perspective(400px) rotateX(0deg); | ||
| + | transform: perspective(400px) rotateX(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: perspective(400px) rotateX(90deg); | ||
| + | -ms-transform: perspective(400px) rotateX(90deg); | ||
| + | transform: perspective(400px) rotateX(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .flipOutX { | ||
| + | -webkit-animation-name: flipOutX; | ||
| + | animation-name: flipOutX; | ||
| + | -webkit-backface-visibility: visible !important; | ||
| + | -ms-backface-visibility: visible !important; | ||
| + | backface-visibility: visible !important; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes flipOutY { | ||
| + | 0% { | ||
| + | -webkit-transform: perspective(400px) rotateY(0deg); | ||
| + | transform: perspective(400px) rotateY(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: perspective(400px) rotateY(90deg); | ||
| + | transform: perspective(400px) rotateY(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes flipOutY { | ||
| + | 0% { | ||
| + | -webkit-transform: perspective(400px) rotateY(0deg); | ||
| + | -ms-transform: perspective(400px) rotateY(0deg); | ||
| + | transform: perspective(400px) rotateY(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: perspective(400px) rotateY(90deg); | ||
| + | -ms-transform: perspective(400px) rotateY(90deg); | ||
| + | transform: perspective(400px) rotateY(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .flipOutY { | ||
| + | -webkit-backface-visibility: visible !important; | ||
| + | -ms-backface-visibility: visible !important; | ||
| + | backface-visibility: visible !important; | ||
| + | -webkit-animation-name: flipOutY; | ||
| + | animation-name: flipOutY; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes lightSpeedIn { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(100%) skewX(-30deg); | ||
| + | transform: translateX(100%) skewX(-30deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | -webkit-transform: translateX(-20%) skewX(30deg); | ||
| + | transform: translateX(-20%) skewX(30deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: translateX(0%) skewX(-15deg); | ||
| + | transform: translateX(0%) skewX(-15deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0%) skewX(0deg); | ||
| + | transform: translateX(0%) skewX(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes lightSpeedIn { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(100%) skewX(-30deg); | ||
| + | -ms-transform: translateX(100%) skewX(-30deg); | ||
| + | transform: translateX(100%) skewX(-30deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | -webkit-transform: translateX(-20%) skewX(30deg); | ||
| + | -ms-transform: translateX(-20%) skewX(30deg); | ||
| + | transform: translateX(-20%) skewX(30deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: translateX(0%) skewX(-15deg); | ||
| + | -ms-transform: translateX(0%) skewX(-15deg); | ||
| + | transform: translateX(0%) skewX(-15deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0%) skewX(0deg); | ||
| + | -ms-transform: translateX(0%) skewX(0deg); | ||
| + | transform: translateX(0%) skewX(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .lightSpeedIn { | ||
| + | -webkit-animation-name: lightSpeedIn; | ||
| + | animation-name: lightSpeedIn; | ||
| + | -webkit-animation-timing-function: ease-out; | ||
| + | animation-timing-function: ease-out; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes lightSpeedOut { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0%) skewX(0deg); | ||
| + | transform: translateX(0%) skewX(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(100%) skewX(-30deg); | ||
| + | transform: translateX(100%) skewX(-30deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes lightSpeedOut { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0%) skewX(0deg); | ||
| + | -ms-transform: translateX(0%) skewX(0deg); | ||
| + | transform: translateX(0%) skewX(0deg); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(100%) skewX(-30deg); | ||
| + | -ms-transform: translateX(100%) skewX(-30deg); | ||
| + | transform: translateX(100%) skewX(-30deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .lightSpeedOut { | ||
| + | -webkit-animation-name: lightSpeedOut; | ||
| + | animation-name: lightSpeedOut; | ||
| + | -webkit-animation-timing-function: ease-in; | ||
| + | animation-timing-function: ease-in; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes rotateIn { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: center center; | ||
| + | transform-origin: center center; | ||
| + | -webkit-transform: rotate(-200deg); | ||
| + | transform: rotate(-200deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: center center; | ||
| + | transform-origin: center center; | ||
| + | -webkit-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rotateIn { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: center center; | ||
| + | -ms-transform-origin: center center; | ||
| + | transform-origin: center center; | ||
| + | -webkit-transform: rotate(-200deg); | ||
| + | -ms-transform: rotate(-200deg); | ||
| + | transform: rotate(-200deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: center center; | ||
| + | -ms-transform-origin: center center; | ||
| + | transform-origin: center center; | ||
| + | -webkit-transform: rotate(0); | ||
| + | -ms-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rotateIn { | ||
| + | -webkit-animation-name: rotateIn; | ||
| + | animation-name: rotateIn; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes rotateInDownLeft { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(-90deg); | ||
| + | transform: rotate(-90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rotateInDownLeft { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | -ms-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(-90deg); | ||
| + | -ms-transform: rotate(-90deg); | ||
| + | transform: rotate(-90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | -ms-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | -ms-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rotateInDownLeft { | ||
| + | -webkit-animation-name: rotateInDownLeft; | ||
| + | animation-name: rotateInDownLeft; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes rotateInDownRight { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(90deg); | ||
| + | transform: rotate(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rotateInDownRight { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | -ms-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(90deg); | ||
| + | -ms-transform: rotate(90deg); | ||
| + | transform: rotate(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | -ms-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | -ms-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rotateInDownRight { | ||
| + | -webkit-animation-name: rotateInDownRight; | ||
| + | animation-name: rotateInDownRight; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes rotateInUpLeft { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(90deg); | ||
| + | transform: rotate(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rotateInUpLeft { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | -ms-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(90deg); | ||
| + | -ms-transform: rotate(90deg); | ||
| + | transform: rotate(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | -ms-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | -ms-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rotateInUpLeft { | ||
| + | -webkit-animation-name: rotateInUpLeft; | ||
| + | animation-name: rotateInUpLeft; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes rotateInUpRight { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(-90deg); | ||
| + | transform: rotate(-90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rotateInUpRight { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | -ms-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(-90deg); | ||
| + | -ms-transform: rotate(-90deg); | ||
| + | transform: rotate(-90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | -ms-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | -ms-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rotateInUpRight { | ||
| + | -webkit-animation-name: rotateInUpRight; | ||
| + | animation-name: rotateInUpRight; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes rotateOut { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: center center; | ||
| + | transform-origin: center center; | ||
| + | -webkit-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: center center; | ||
| + | transform-origin: center center; | ||
| + | -webkit-transform: rotate(200deg); | ||
| + | transform: rotate(200deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rotateOut { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: center center; | ||
| + | -ms-transform-origin: center center; | ||
| + | transform-origin: center center; | ||
| + | -webkit-transform: rotate(0); | ||
| + | -ms-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: center center; | ||
| + | -ms-transform-origin: center center; | ||
| + | transform-origin: center center; | ||
| + | -webkit-transform: rotate(200deg); | ||
| + | -ms-transform: rotate(200deg); | ||
| + | transform: rotate(200deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rotateOut { | ||
| + | -webkit-animation-name: rotateOut; | ||
| + | animation-name: rotateOut; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes rotateOutDownLeft { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(90deg); | ||
| + | transform: rotate(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rotateOutDownLeft { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | -ms-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | -ms-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | -ms-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(90deg); | ||
| + | -ms-transform: rotate(90deg); | ||
| + | transform: rotate(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rotateOutDownLeft { | ||
| + | -webkit-animation-name: rotateOutDownLeft; | ||
| + | animation-name: rotateOutDownLeft; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes rotateOutDownRight { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(-90deg); | ||
| + | transform: rotate(-90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rotateOutDownRight { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | -ms-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | -ms-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | -ms-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(-90deg); | ||
| + | -ms-transform: rotate(-90deg); | ||
| + | transform: rotate(-90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rotateOutDownRight { | ||
| + | -webkit-animation-name: rotateOutDownRight; | ||
| + | animation-name: rotateOutDownRight; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes rotateOutUpLeft { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(-90deg); | ||
| + | transform: rotate(-90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rotateOutUpLeft { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | -ms-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | -ms-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: left bottom; | ||
| + | -ms-transform-origin: left bottom; | ||
| + | transform-origin: left bottom; | ||
| + | -webkit-transform: rotate(-90deg); | ||
| + | -ms-transform: rotate(-90deg); | ||
| + | transform: rotate(-90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rotateOutUpLeft { | ||
| + | -webkit-animation-name: rotateOutUpLeft; | ||
| + | animation-name: rotateOutUpLeft; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes rotateOutUpRight { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(90deg); | ||
| + | transform: rotate(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rotateOutUpRight { | ||
| + | 0% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | -ms-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(0); | ||
| + | -ms-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | -ms-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: rotate(90deg); | ||
| + | -ms-transform: rotate(90deg); | ||
| + | transform: rotate(90deg); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rotateOutUpRight { | ||
| + | -webkit-animation-name: rotateOutUpRight; | ||
| + | animation-name: rotateOutUpRight; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes slideInDown { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes slideInDown { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | -ms-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .slideInDown { | ||
| + | -webkit-animation-name: slideInDown; | ||
| + | animation-name: slideInDown; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes slideInLeft { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes slideInLeft { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | -ms-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .slideInLeft { | ||
| + | -webkit-animation-name: slideInLeft; | ||
| + | animation-name: slideInLeft; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes slideInRight { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes slideInRight { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | -ms-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .slideInRight { | ||
| + | -webkit-animation-name: slideInRight; | ||
| + | animation-name: slideInRight; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes slideOutLeft { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes slideOutLeft { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-2000px); | ||
| + | -ms-transform: translateX(-2000px); | ||
| + | transform: translateX(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .slideOutLeft { | ||
| + | -webkit-animation-name: slideOutLeft; | ||
| + | animation-name: slideOutLeft; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes slideOutRight { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes slideOutRight { | ||
| + | 0% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | -ms-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(2000px); | ||
| + | -ms-transform: translateX(2000px); | ||
| + | transform: translateX(2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .slideOutRight { | ||
| + | -webkit-animation-name: slideOutRight; | ||
| + | animation-name: slideOutRight; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes slideOutUp { | ||
| + | 0% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes slideOutUp { | ||
| + | 0% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateY(-2000px); | ||
| + | -ms-transform: translateY(-2000px); | ||
| + | transform: translateY(-2000px); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .slideOutUp { | ||
| + | -webkit-animation-name: slideOutUp; | ||
| + | animation-name: slideOutUp; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes hinge { | ||
| + | 0% { | ||
| + | -webkit-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | -webkit-transform-origin: top left; | ||
| + | transform-origin: top left; | ||
| + | -webkit-animation-timing-function: ease-in-out; | ||
| + | animation-timing-function: ease-in-out; | ||
| + | } | ||
| + | |||
| + | 20%, 60% { | ||
| + | -webkit-transform: rotate(80deg); | ||
| + | transform: rotate(80deg); | ||
| + | -webkit-transform-origin: top left; | ||
| + | transform-origin: top left; | ||
| + | -webkit-animation-timing-function: ease-in-out; | ||
| + | animation-timing-function: ease-in-out; | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: rotate(60deg); | ||
| + | transform: rotate(60deg); | ||
| + | -webkit-transform-origin: top left; | ||
| + | transform-origin: top left; | ||
| + | -webkit-animation-timing-function: ease-in-out; | ||
| + | animation-timing-function: ease-in-out; | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: rotate(60deg) translateY(0); | ||
| + | transform: rotate(60deg) translateY(0); | ||
| + | opacity: 1; | ||
| + | -webkit-transform-origin: top left; | ||
| + | transform-origin: top left; | ||
| + | -webkit-animation-timing-function: ease-in-out; | ||
| + | animation-timing-function: ease-in-out; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateY(700px); | ||
| + | transform: translateY(700px); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes hinge { | ||
| + | 0% { | ||
| + | -webkit-transform: rotate(0); | ||
| + | -ms-transform: rotate(0); | ||
| + | transform: rotate(0); | ||
| + | -webkit-transform-origin: top left; | ||
| + | -ms-transform-origin: top left; | ||
| + | transform-origin: top left; | ||
| + | -webkit-animation-timing-function: ease-in-out; | ||
| + | animation-timing-function: ease-in-out; | ||
| + | } | ||
| + | |||
| + | 20%, 60% { | ||
| + | -webkit-transform: rotate(80deg); | ||
| + | -ms-transform: rotate(80deg); | ||
| + | transform: rotate(80deg); | ||
| + | -webkit-transform-origin: top left; | ||
| + | -ms-transform-origin: top left; | ||
| + | transform-origin: top left; | ||
| + | -webkit-animation-timing-function: ease-in-out; | ||
| + | animation-timing-function: ease-in-out; | ||
| + | } | ||
| + | |||
| + | 40% { | ||
| + | -webkit-transform: rotate(60deg); | ||
| + | -ms-transform: rotate(60deg); | ||
| + | transform: rotate(60deg); | ||
| + | -webkit-transform-origin: top left; | ||
| + | -ms-transform-origin: top left; | ||
| + | transform-origin: top left; | ||
| + | -webkit-animation-timing-function: ease-in-out; | ||
| + | animation-timing-function: ease-in-out; | ||
| + | } | ||
| + | |||
| + | 80% { | ||
| + | -webkit-transform: rotate(60deg) translateY(0); | ||
| + | -ms-transform: rotate(60deg) translateY(0); | ||
| + | transform: rotate(60deg) translateY(0); | ||
| + | opacity: 1; | ||
| + | -webkit-transform-origin: top left; | ||
| + | -ms-transform-origin: top left; | ||
| + | transform-origin: top left; | ||
| + | -webkit-animation-timing-function: ease-in-out; | ||
| + | animation-timing-function: ease-in-out; | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | -webkit-transform: translateY(700px); | ||
| + | -ms-transform: translateY(700px); | ||
| + | transform: translateY(700px); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .hinge { | ||
| + | -webkit-animation-name: hinge; | ||
| + | animation-name: hinge; | ||
| + | } | ||
| + | |||
| + | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | ||
| + | |||
| + | @-webkit-keyframes rollIn { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-100%) rotate(-120deg); | ||
| + | transform: translateX(-100%) rotate(-120deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0px) rotate(0deg); | ||
| + | transform: translateX(0px) rotate(0deg); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rollIn { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(-100%) rotate(-120deg); | ||
| + | -ms-transform: translateX(-100%) rotate(-120deg); | ||
| + | transform: translateX(-100%) rotate(-120deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0px) rotate(0deg); | ||
| + | -ms-transform: translateX(0px) rotate(0deg); | ||
| + | transform: translateX(0px) rotate(0deg); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rollIn { | ||
| + | -webkit-animation-name: rollIn; | ||
| + | animation-name: rollIn; | ||
| + | } | ||
| + | |||
| + | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | ||
| + | |||
| + | @-webkit-keyframes rollOut { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0px) rotate(0deg); | ||
| + | transform: translateX(0px) rotate(0deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(100%) rotate(120deg); | ||
| + | transform: translateX(100%) rotate(120deg); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes rollOut { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translateX(0px) rotate(0deg); | ||
| + | -ms-transform: translateX(0px) rotate(0deg); | ||
| + | transform: translateX(0px) rotate(0deg); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translateX(100%) rotate(120deg); | ||
| + | -ms-transform: translateX(100%) rotate(120deg); | ||
| + | transform: translateX(100%) rotate(120deg); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .rollOut { | ||
| + | -webkit-animation-name: rollOut; | ||
| + | animation-name: rollOut; | ||
| + | } | ||
| + | |||
| + | @charset "UTF-8";.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{position:absolute;top:0;right:0;bottom:0;left:0;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.slide-content{margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;opacity:1}.blueimp-gallery{position:fixed;z-index:999999;overflow:hidden;background:#000;background:rgba(0,0,0,.9);opacity:0;display:none;direction:ltr;-ms-touch-action:none;touch-action:none}.blueimp-gallery-carousel{position:relative;z-index:auto;margin:1em auto;padding-bottom:56.25%;box-shadow:0 0 10px #000;-ms-touch-action:pan-y;touch-action:pan-y}.blueimp-gallery-display{display:block;opacity:1}.blueimp-gallery>.slides{position:relative;height:100%;overflow:hidden}.blueimp-gallery-carousel>.slides{position:absolute}.blueimp-gallery>.slides>.slide{position:relative;float:left;height:100%;text-align:center;-webkit-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-moz-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-ms-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-o-transition-timing-function:cubic-bezier(0.645,.045,.355,1);transition-timing-function:cubic-bezier(0.645,.045,.355,1)}.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{-webkit-transition:opacity .5s linear;-moz-transition:opacity .5s linear;-ms-transition:opacity .5s linear;-o-transition:opacity .5s linear;transition:opacity .5s linear}.blueimp-gallery>.slides>.slide-loading{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}.blueimp-gallery>.slides>.slide-loading>.slide-content{opacity:0}.blueimp-gallery>.slides>.slide-error{background:url(../img/error.png) center no-repeat}.blueimp-gallery>.slides>.slide-error>.slide-content{display:none}.blueimp-gallery>.prev,.blueimp-gallery>.next{position:absolute;top:50%;left:15px;width:40px;height:40px;margin-top:-23px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-decoration:none;text-shadow:0 0 2px #000;text-align:center;background:#222;background:rgba(0,0,0,.5);-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5;cursor:pointer;display:none}.blueimp-gallery>.next{left:auto;right:15px}.blueimp-gallery>.close,.blueimp-gallery>.title{position:absolute;top:15px;left:15px;margin:0 40px 0 0;font-size:20px;line-height:30px;color:#980000;text-shadow:0 0 2px #000;opacity:.8;display:none}.blueimp-gallery>.close{padding:15px;right:15px;left:auto;margin:-15px;font-size:30px;text-decoration:none;cursor:pointer}.blueimp-gallery>.play-pause{position:absolute;right:15px;bottom:15px;width:15px;height:15px;background:url(../img/play-pause.png) 0 0 no-repeat;cursor:pointer;opacity:.5;display:none}.blueimp-gallery-playing>.play-pause{background-position:-15px 0}.blueimp-gallery>.prev:hover,.blueimp-gallery>.next:hover,.blueimp-gallery>.close:hover,.blueimp-gallery>.title:hover,.blueimp-gallery>.play-pause:hover{color:#fff;opacity:1}.blueimp-gallery-controls>.prev,.blueimp-gallery-controls>.next,.blueimp-gallery-controls>.close,.blueimp-gallery-controls>.title,.blueimp-gallery-controls>.play-pause{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.prev,.blueimp-gallery-left>.prev,.blueimp-gallery-single>.next,.blueimp-gallery-right>.next,.blueimp-gallery-single>.play-pause{display:none}.blueimp-gallery>.slides>.slide>.slide-content,.blueimp-gallery>.prev,.blueimp-gallery>.next,.blueimp-gallery>.close,.blueimp-gallery>.play-pause{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body:last-child .blueimp-gallery>.slides>.slide-error{background-image:url(../img/error.svg)}body:last-child .blueimp-gallery>.play-pause{width:20px;height:20px;background-size:40px 20px;background-image:url(../img/play-pause.svg)}body:last-child .blueimp-gallery-playing>.play-pause{background-position:-20px 0}*+html .blueimp-gallery>.slides>.slide{min-height:300px}*+html .blueimp-gallery>.slides>.slide>.slide-content{position:relative}@charset "UTF-8";.blueimp-gallery>.indicator{position:absolute;top:auto;right:15px;bottom:15px;left:15px;margin:0 40px;padding:0;list-style:none;text-align:center;line-height:10px;display:none}.blueimp-gallery>.indicator>li{display:inline-block;width:9px;height:9px;margin:6px 3px 0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:1px solid transparent;background:#ccc;background:rgba(255,255,255,.25)center no-repeat;border-radius:5px;box-shadow:0 0 2px #000;opacity:.5;cursor:pointer}.blueimp-gallery>.indicator>li:hover,.blueimp-gallery>.indicator>.active{background-color:#fff;border-color:#fff;opacity:1}.blueimp-gallery-controls>.indicator{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.indicator{display:none}.blueimp-gallery>.indicator{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*+html .blueimp-gallery>.indicator>li{display:inline}@charset "UTF-8";.blueimp-gallery>.slides>.slide>.video-content>img{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.video-content>video{position:absolute;top:0;left:0;width:100%;height:100%}.blueimp-gallery>.slides>.slide>.video-content>iframe{position:absolute;top:100%;left:0;width:100%;height:100%;border:none}.blueimp-gallery>.slides>.slide>.video-playing>iframe{top:0}.blueimp-gallery>.slides>.slide>.video-content>a{position:absolute;top:50%;right:0;left:0;margin:-64px auto 0;width:128px;height:128px;background:url(../img/video-play.png) center no-repeat;opacity:.8;cursor:pointer}.blueimp-gallery>.slides>.slide>.video-content>a:hover{opacity:1}.blueimp-gallery>.slides>.slide>.video-playing>a,.blueimp-gallery>.slides>.slide>.video-playing>img{display:none}.blueimp-gallery>.slides>.slide>.video-content>video{display:none}.blueimp-gallery>.slides>.slide>.video-playing>video{display:block}.blueimp-gallery>.slides>.slide>.video-loading>a{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}body:last-child .blueimp-gallery>.slides>.slide>.video-content:not(.video-loading)>a{background-image:url(../img/video-play.svg)}*+html .blueimp-gallery>.slides>.slide>.video-content{height:100%}*+html .blueimp-gallery>.slides>.slide>.video-content>a{left:50%;margin-left:-64px} | ||
| + | |||
| + | body { color:#333; font:300 15px/15px Roboto,Arial,Helvetica;background:url(https://static.igem.org/mediawiki/2015/4/4d/Fond_wiki_2.jpg) center no-repeat fixed #FFFFFF; background-size:100vw 100vh;height: 100vh;-webkit-font-smoothing:antialiased;} | ||
| + | /*https://static.igem.org/mediawiki/2015/a/ae/BACTMAN.png*/ | ||
| + | /* https://static.igem.org/mediawiki/2015/2/29/Fond_wiki.jpg*/ | ||
| + | /* https://static.igem.org/mediawiki/2015/8/8b/FOND-BLANC.jpg*/ | ||
| + | a{color:#00a9c6; text-decoration:none;} | ||
| + | a:hover{color:#666;} | ||
| + | .btn,a,.btn:hover,a:hover { | ||
| + | -webkit-transition: all 0.3s ease-in-out; | ||
| + | -moz-transition: all 0.3s ease-in-out; | ||
| + | -ms-transition: all 0.3s ease-in-out; | ||
| + | -o-transition: all 0.3s ease-in-out; | ||
| + | transition: all 0.3s ease-in-out; | ||
| + | outline: none !important; | ||
| + | } | ||
| + | |||
| + | h1,h2,h3,h4{margin: 0;line-height: 1em;} | ||
| + | h1{font:700 5em Roboto,Arial,Helvetica;margin:0.25em 0;text-transform: uppercase;} | ||
| + | h2{font:300 2.5em Roboto,Arial,Helvetica;margin-bottom: 1.5em;} | ||
| + | h3{font:300 2em Roboto,Arial,Helvetica;margin:2em 0 1em 0;} | ||
| + | h4{font:300 1.5em Roboto,Arial,Helvetica;margin-bottom: 1em;} | ||
| + | h4 i{margin-right: 0.5em;} | ||
| + | |||
| + | p{font-size:1em;line-height: 1.7em; margin-bottom: 1.7em;} | ||
| + | |||
| + | .spacer{padding: 6em 0;} | ||
| + | |||
| + | |||
| + | .btn-default{color: #ccc;border: 1px solid #aaa;} | ||
| + | .btn-default:hover,.btn-default:active{background: rgba(0,0,0,0.8);} | ||
| + | .btn-primary{color: #fff;background:#e89f10;width: 100%;outline: none;} | ||
| + | .btn-primary:hover,.btn-primary:active,.btn-primary:focus{background:#f3c024;box-shadow: none;} | ||
| + | |||
| + | .topbar {height:5px;position: fixed;top: 0;width: 98%;z-index: 1000;} | ||
| + | .navbar-nav > li > a{font-size: 1em;line-height: 3.6em;} | ||
| + | .navbar-fixed-top{top: 5px;} | ||
| + | .navbar-inverse{background: #fff; | ||
| + | -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); | ||
| + | -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); | ||
| + | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);} | ||
| + | .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus{background: none;color: #E89F10;} | ||
| + | |||
| + | #head,.carousel{margin-top: 0;} | ||
| + | |||
| + | #home{padding-top: 0;} | ||
| + | |||
| + | .navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu { | ||
| + | background-color: #fff; | ||
| + | color:#777; | ||
| + | } | ||
| + | .dropdown-menu li>a:hover{color:#fff; background: rgba(102,205,170,0.8)} | ||
| + | /*View more*/ | ||
| + | |||
| + | |||
| + | |||
| + | .btn { | ||
| + | -webkit-border-radius: 12; | ||
| + | -moz-border-radius: 12; | ||
| + | border-radius: 12px; | ||
| + | text-shadow: 0px 1px 3px #cc666e; | ||
| + | font-family: Arial; | ||
| + | color: #b0000f; | ||
| + | font-size: 19px; | ||
| + | background: #ffffff; | ||
| + | padding: 10px 15px 10px 15px; | ||
| + | border: solid #d18080 1px; | ||
| + | text-decoration: none; | ||
| + | text-transform: uppercase; | ||
| + | } | ||
| + | |||
| + | |||
| + | .btn:hover ,.btn:active{ | ||
| + | background: #e87f8d; | ||
| + | text-decoration: none; | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | .myButton { | ||
| + | -moz-box-shadow:inset 0px 1px 0px 0px #cc666e; | ||
| + | -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e; | ||
| + | box-shadow:inset 0px 1px 0px 0px #f5978e; | ||
| + | background-color:#f58f89; | ||
| + | -moz-border-radius:10px; | ||
| + | -webkit-border-radius:10px; | ||
| + | border-radius:10px; | ||
| + | border:1px solid #b0000f; | ||
| + | display:inline-block; | ||
| + | cursor:pointer; | ||
| + | background-color: #FFFFFF; | ||
| + | color:#b0000f; | ||
| + | font-family:Arial; | ||
| + | font-size:18px; | ||
| + | padding:10px 15px; | ||
| + | text-decoration:none; | ||
| + | text-shadow: 0px 1px 3px #cc666e; | ||
| + | } | ||
| + | .myButton:hover { | ||
| + | background-color: #e87f8d; | ||
| + | text-decoration:none; | ||
| + | } | ||
| + | .myButton:active { | ||
| + | position:relative; | ||
| + | top:1px; | ||
| + | color: #FFFFFF; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | /*about*/ | ||
| + | .about.spacer{padding-left: 4em; padding-right: 4em;padding-bottom: 0;} | ||
| + | .services ul li{width: 10em;height: 10em;border: 0px solid #ccc;padding: 0;border-radius: 50%;margin: 0 1.25em;line-height: 13.5em;color: #000000; background:#fff;} | ||
| + | .services ul li span{line-height: 2em;display: inline-block;font-weight: 300;} | ||
| + | .services ul li span i{font-size: 3em; margin-top:1em} | ||
| + | .services ul li span b{display: block;font-size: 1em;font-weight: 300;} | ||
| + | /*#7dbf94*/ | ||
| + | |||
| + | /*testimonials*/ | ||
| + | .partners img{float: left;margin:0 75px 30px 0;} | ||
| + | |||
| + | .testimonails{min-height: 195px;} | ||
| + | .testimonails img{margin-top: 5px;} | ||
| + | .testimonails span{color: #888;} | ||
| + | .testimonails span b{font-weight: 400;} | ||
| + | .carousel-indicators li{border: 1px solid #B00000;} | ||
| + | .carousel-indicators{bottom: 0;} | ||
| + | |||
| + | /*works*/ | ||
| + | #works{padding-top:6em; padding-left:4em; padding-right:4em;} | ||
| + | #works figcaption a{border:1px solid #fff;margin-top: 1em;display: inline-block;color: #fff;padding: 0 2em;} | ||
| + | #works figcaption a:hover{text-decoration: none;padding: 0 3em;} | ||
| + | /*works*/ | ||
| + | |||
| + | /*team*/ | ||
| + | .team figure{width: 100%;} | ||
| + | .team img{width: 100%;} | ||
| + | .team b{font-size: 1.2em;display: block;} | ||
| + | .team a i.fa{color: #fff; font-size: 2em;} | ||
| + | .team a i.fa:hover{color: #E89F10;} | ||
| + | |||
| + | |||
| + | .highlight-info{ background:url(https://static.igem.org/mediawiki/2015/d/d6/Manette-fond.jpg) center fixed; background-size: cover; color:#fff;} | ||
| + | .highlight-info .overlay{background: rgba(178,34,34,0.8);} | ||
| + | .highlight-info h4{color: #fff;margin:0.5em 0 0 0;} | ||
| + | /*about us*/ | ||
| + | |||
| + | /*Sponsors*/ | ||
| + | |||
| + | |||
| + | .sponsors{ background:url() center fixed; background-size: cover; color:#fff;} | ||
| + | |||
| + | .sponsors h4{color: #fff;margin:0.5em 0 0 0;} | ||
| + | .sponsors a {display: block;overflow: hidden;} | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | /*0,176,128*/ | ||
| + | |||
| + | |||
| + | |||
| + | /*contact*#003333/ | ||
| + | .contactform textarea,.contactform input{width: 100%;padding:1em;border:1px solid #ccc;margin-bottom: 1em;border-radius: 0;outline: none;} | ||
| + | /*contact*/ | ||
| + | |||
| + | |||
| + | .footer{background-color:#2F4F4F ; color: #fff; font-size: 1em;color: #aaa;} | ||
| + | .footer a{color: #aaa;margin: 0 1em; } | ||
| + | |||
| + | .gototop{z-index: 1000;position: fixed;bottom: 20px; right: 20px;background: rgba(0,0,0,0.0);padding:10px;color: #66cdaa;} | ||
| + | .gototop i{line-height: 0.5em;} | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | @media (max-width: 1200px) { | ||
| + | body{font:300 13px/13px Roboto,Arial,Helvetica;} | ||
| + | .navbar-brand{padding-top: 11px;} | ||
| + | .services ul li{margin:0 0.5em; } | ||
| + | |||
| + | .grid figure h2{font: 700 1.5em Roboto,Arial,Helvetica;} | ||
| + | figure.effect-oscar figcaption{padding: 12%;} | ||
| + | figure.effect-oscar figcaption::before,figure.effect-chico figcaption::before{top: 20px;right: 20px;bottom: 20px;left: 20px;} | ||
| + | |||
| + | .partners img{margin: 0 25px 25px 0;} | ||
| + | } | ||
| + | |||
| + | @media (max-width: 900px) { | ||
| + | h1{font: 700 3.5em Roboto,Arial,Helvetica;} | ||
| + | h4 {font: 300 1.3em Roboto,Arial,Helvetica;} | ||
| + | .btn{padding: 1em 2em;} | ||
| + | .partners img{margin: 0 15px 25px 0;width: 157px;} | ||
| + | .services ul li{width: 9em;height: 9em;} | ||
| + | figure.effect-chico figcaption {padding: 2em;} | ||
| + | figure.effect-oscar figcaption {padding: 20%;} | ||
| + | figure.effect-chico figcaption::before{top: 10px;right: 10px;bottom: 10px;left: 10px;} | ||
| + | .grid figure.effect-chico p{font-size: 0.6em;line-height: 1.5em;} | ||
| + | } | ||
| + | |||
| + | |||
| + | @media (max-width: 767px) { | ||
| + | body{font:300 12px/12px Roboto,Arial,Helvetica;} | ||
| + | .navbar-nav > li > a {line-height: 1em;} | ||
| + | .navbar-brand{padding: 5px;} | ||
| + | .navbar-brand img{height: 20px;} | ||
| + | .navbar-toggle{margin-top: 12px;} | ||
| + | |||
| + | .carousel-caption,.carousel-control,.carousel-indicators{display: none;} | ||
| + | |||
| + | h2.text-center{text-align: left;font-size: 1.7em;} | ||
| + | h4 {font: 300 1.2em Roboto,Arial,Helvetica;} | ||
| + | #partners h2{padding: 0 0.5em;} | ||
| + | #home {padding-top: 0em;} | ||
| + | #partner {padding-top: 0em;} | ||
| + | #spacer {padding-top: 0em;} | ||
| + | |||
| + | .partners{display: block;float: left;} | ||
| + | .partners img{width: 120px;} | ||
| + | |||
| + | |||
| + | |||
| + | .about.spacer{padding-left: 2em;padding-right: 2em;} | ||
| + | .spacer{padding:0.5em 0 0 0;} | ||
| + | .services ul li{margin-bottom: 1em;} | ||
| + | |||
| + | .highlight-info .overlay{padding-bottom: 2em;} | ||
| + | .sponsors .overlay{padding-bottom: 2em;} | ||
| + | |||
| + | .grid.team div{margin: 0;padding: 0;} | ||
| + | figure.effect-chico figcaption {padding: 1.5em;} | ||
| + | .footer{margin-top: 2em;padding-bottom: 2em;} | ||
| + | } | ||
| + | |||
| + | |||
| + | /*---------------------------------------------------- Parallax------------------------------------------------------*/ | ||
| + | .parallax { | ||
| + | text-align:center; | ||
| + | background-position:center center; | ||
| + | background-repeat:no-repeat; | ||
| + | background-size:cover; | ||
| + | background-attachment:fixed !important; | ||
| + | overflow:hidden; | ||
| + | } | ||
| + | |||
| + | .Fullscreen | ||
| + | { | ||
| + | position:absolute; | ||
| + | left: 0; | ||
| + | top: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | overflow:hidden; | ||
| + | } | ||
| + | |||
| + | |||
| + | .parallax-pattern-overlay { | ||
| + | background:url(../images/lab.jpg) center fixed; background-size: cover; color:#fff; | ||
| + | background: rgba(200,200,200,0.5); | ||
| + | background-repeat: repeat; | ||
| + | |||
| + | @-webkit-keyframes fadeInDown { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translate3d(0, -100%, 0); | ||
| + | transform: translate3d(0, -100%, 0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: none; | ||
| + | transform: none; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes fadeInDown { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translate3d(0, -100%, 0); | ||
| + | transform: translate3d(0, -100%, 0); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: none; | ||
| + | transform: none; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .fadeInDown { | ||
| + | -webkit-animation-name: fadeInDown; | ||
| + | animation-name: fadeInDown; | ||
| + | } | ||
| + | |||
| + | img#site-title { | ||
| + | max-width: 120px; | ||
| + | } | ||
| + | |||
| + | |||
| + | @-webkit-keyframes zoomIn { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale3d(.3, .3, .3); | ||
| + | transform: scale3d(.3, .3, .3); | ||
| + | } | ||
| + | |||
| + | 50% { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes zoomIn { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale3d(.3, .3, .3); | ||
| + | transform: scale3d(.3, .3, .3); | ||
| + | } | ||
| + | |||
| + | 50% { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .zoomIn { | ||
| + | -webkit-animation-name: zoomIn; | ||
| + | animation-name: zoomIn; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes zoomInDown { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | ||
| + | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | ||
| + | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes zoomInDown { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | ||
| + | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | ||
| + | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .zoomInDown { | ||
| + | -webkit-animation-name: zoomInDown; | ||
| + | animation-name: zoomInDown; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes zoomInLeft { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | ||
| + | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | ||
| + | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes zoomInLeft { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | ||
| + | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | ||
| + | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .zoomInLeft { | ||
| + | -webkit-animation-name: zoomInLeft; | ||
| + | animation-name: zoomInLeft; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes zoomInRight { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | ||
| + | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | ||
| + | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes zoomInRight { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | ||
| + | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | ||
| + | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .zoomInRight { | ||
| + | -webkit-animation-name: zoomInRight; | ||
| + | animation-name: zoomInRight; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes zoomInUp { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | ||
| + | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | ||
| + | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes zoomInUp { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | ||
| + | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | ||
| + | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | ||
| + | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .zoomInUp { | ||
| + | -webkit-animation-name: zoomInUp; | ||
| + | animation-name: zoomInUp; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes zoomOut { | ||
| + | 0% { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | 50% { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: scale3d(.3, .3, .3); | ||
| + | transform: scale3d(.3, .3, .3); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| + | </style> | ||
| + | |||
| + | </html> | ||
Latest revision as of 15:02, 16 September 2015