diff --git a/_includes/about.html b/_includes/about.html index 2324b188..2805fffc 100644 --- a/_includes/about.html +++ b/_includes/about.html @@ -3,8 +3,9 @@

{{ page.title }}

-

{{ page.subtitle }}

{% for feature in site.data.features %} -
+

{{ page.subtitle }}

+ {% for feature in site.data.features %} +
diff --git a/_includes/contribute.html b/_includes/contribute.html index 3988f438..82d6e38c 100644 --- a/_includes/contribute.html +++ b/_includes/contribute.html @@ -6,7 +6,7 @@ {{ page.content | markdownify }}
{% for contribute in site.data.contribute %} -
+
diff --git a/_includes/download.html b/_includes/download.html index 74957fc7..f16131f7 100644 --- a/_includes/download.html +++ b/_includes/download.html @@ -14,7 +14,7 @@ {% endfor %} {% if release_pre != nil and release_stable != nil and release_stable.created_at > release_pre.created_at %} - {% assign release_pre = nil %} + {% assign release_pre = nil %} {% endif %}
@@ -26,73 +26,96 @@
If you're looking for some older versions, check out our releases on GitHub and Sourceforge.

-
-
-

Nightly

-

A version with all the newest development changes. Likely to contain bugs, so use with caution.

- {% if release_nightly != nil %} - - {% for asset in release_nightly.assets %} - {% assign currentReleaseData = asset.name | split:".zip" | first | split:"_" %} - {% assign currentReleaseFileEnding = asset.name | split:"." | last %} - {% assign currentReleaseTitle = release_nightly.created_at | date: "%b %d, %Y"" %} - {% assign currentReleaseOs = currentReleaseData[2] %} - {% assign currentReleaseArch = currentReleaseData[3] %} - {% if currentReleaseFileEnding == "zip" %} - {% assign currentReleaseType = "portable" %} - {% else if currentReleaseFileEnding == "exe" %} - {% assign currentReleaseType = "installer" %} - {% endif %} - {% include downloadButton.html title=currentReleaseTitle type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %} - {% endfor %} - -

{{ release_nightly.created_at | date: "%Y-%m-%d" }} | GitHub

- {% else %} -

There isn't any nightly release yet.

- {% endif %} +
+
+

Nightly

+

A version with all the newest development changes. Likely to contain bugs, so use with caution.

+ {% if release_nightly != nil %} + {% assign currentReleaseTitle = release_nightly.created_at | date: "%b %d, %Y" %} + + + + {{currentReleaseTitle}} + + +

{{ release_nightly.created_at | date: "%Y-%m-%d" }} | GitHub

+ {% else %} +

There isn't any nightly release yet.

+ {% endif %}
-
+

Pre Release

Should be almost stable, but you might experience some bugs here.

{% if release_pre != nil %} + {% assign currentReleaseTitle = release_pre.name %} + - {% for asset in release_pre.assets %} - {% assign currentReleaseData = asset.name | remove:".zip" | remove:".exe" | split:"_" %} - {% assign currentReleaseFileEnding = asset.name | split:"." | last %} - {% assign currentReleaseTitle = release_pre.name %} - {% assign currentReleaseOs = currentReleaseData[2] %} - {% assign currentReleaseArch = currentReleaseData[3] %} - {% if currentReleaseFileEnding == "zip" %} - {% assign currentReleaseType = "portable" %} - {% else if currentReleaseFileEnding == "exe" %} - {% assign currentReleaseType = "installer" %} - {% endif %} - {% include downloadButton.html title=currentReleaseTitle type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %} - {% endfor %} + + {{currentReleaseTitle}} +

{{ release_pre.created_at | date: "%Y-%m-%d" }} | GitHub

{% else %}

There isn't any pre release yet.

{% endif %}
-
+

Stable Release

The latest release.

{% if release_stable != nil %} + {% assign currentReleaseTitle = 'Vocaluxe ' | append: release_stable.name %} + + + + + {{currentReleaseTitle}} +

{{ release_stable.created_at | date: "%Y-%m-%d" }} | GitHub

{% else %} diff --git a/_includes/downloadButton.html b/_includes/downloadButton.html index 3b9868b2..28058c04 100644 --- a/_includes/downloadButton.html +++ b/_includes/downloadButton.html @@ -5,9 +5,9 @@ {% endif %} {% if include.arch == "x86" %} - {{include.title}} (x86, {{include.type}}) + x86 {{include.type}} {% else %} - {{include.title}} (x64, {{include.type}}) + x64 {{include.type}} {% endif %}
diff --git a/_includes/help.html b/_includes/help.html index 8de39764..f7b829da 100644 --- a/_includes/help.html +++ b/_includes/help.html @@ -6,7 +6,7 @@

{{ page.content | markdownify }}

{% for help in site.data.help %} -
+
diff --git a/_includes/songs.html b/_includes/songs.html index 683ee565..ca87a209 100644 --- a/_includes/songs.html +++ b/_includes/songs.html @@ -6,7 +6,7 @@

{{ page.content | markdownify }}

{% for song in site.data.songs %} -
+
diff --git a/css/animate.css b/css/animate.css index 6f6a2dce..1e79e03a 100644 --- a/css/animate.css +++ b/css/animate.css @@ -1,2484 +1,1579 @@ @charset "UTF-8"; + /*! -Animate.css - http://daneden.me/animate -Licensed under the MIT license + * animate.css -http://daneden.me/animate + * Version - 3.5.2 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2017 Daniel Eden + */ -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-late { - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} -.delay-0-5 { - animation-delay: 0.5s; - -webkit-animation-delay: 0.5s; - /* Safari and Chrome */ -} -.delay-1 { - animation-delay: 1s; - -webkit-animation-delay: 1s; - /* Safari and Chrome */ -} -.delay-1-5 { - animation-delay: 1.5s; - -webkit-animation-delay: 1.5s; - /* Safari and Chrome */ -} -.delay-1-8 { - animation-delay: 1.8s; - -webkit-animation-delay: 1.8s; - /* Safari and Chrome */ + +.animated.infinite { + animation-iteration-count: infinite; } + .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); - } + +.animated.flipOutX, +.animated.flipOutY, +.animated.bounceIn, +.animated.bounceOut { + animation-duration: .75s; } + @keyframes bounce { - 0%, - 20%, - 50%, - 80%, - 100% { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + from, 20%, 53%, 80%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transform: translate3d(0,0,0); } - 40% { - -webkit-transform: translateY(-30px); - -ms-transform: translateY(-30px); - transform: translateY(-30px); + + 40%, 43% { + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -30px, 0); } - 60% { - -webkit-transform: translateY(-15px); - -ms-transform: translateY(-15px); - transform: translateY(-15px); + + 70% { + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -15px, 0); + } + + 90% { + transform: translate3d(0,-4px,0); } } + .bounce { - -webkit-animation-name: bounce; animation-name: bounce; + transform-origin: center bottom; } -@-webkit-keyframes flash { - 0%, - 50%, - 100% { - opacity: 1; - } - 25%, - 75% { - opacity: 0; - } -} + @keyframes flash { - 0%, - 50%, - 100% { + from, 50%, to { opacity: 1; } - 25%, - 75% { + + 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); + from { + transform: scale3d(1, 1, 1); } + 50% { - -webkit-transform: scale(1.1); - -ms-transform: scale(1.1); - transform: scale(1.1); + transform: scale3d(1.05, 1.05, 1.05); } - 100% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + + to { + transform: scale3d(1, 1, 1); } } + .pulse { - -webkit-animation-name: pulse; animation-name: pulse; } -@-webkit-keyframes shake { - 0%, - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); + +@keyframes rubberBand { + from { + transform: scale3d(1, 1, 1); } - 10%, - 30%, - 50%, - 70%, - 90% { - -webkit-transform: translateX(-10px); - transform: translateX(-10px); + + 30% { + transform: scale3d(1.25, 0.75, 1); } - 20%, - 40%, - 60%, - 80% { - -webkit-transform: translateX(10px); - transform: translateX(10px); + + 40% { + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + transform: scale3d(.95, 1.05, 1); + } + + 75% { + transform: scale3d(1.05, .95, 1); + } + + to { + transform: scale3d(1, 1, 1); } } + +.rubberBand { + animation-name: rubberBand; +} + @keyframes shake { - 0%, - 100% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + from, to { + transform: translate3d(0, 0, 0); } - 10%, - 30%, - 50%, - 70%, - 90% { - -webkit-transform: translateX(-10px); - -ms-transform: translateX(-10px); - transform: translateX(-10px); + + 10%, 30%, 50%, 70%, 90% { + transform: translate3d(-10px, 0, 0); } - 20%, - 40%, - 60%, - 80% { - -webkit-transform: translateX(10px); - -ms-transform: translateX(10px); - transform: translateX(10px); + + 20%, 40%, 60%, 80% { + transform: translate3d(10px, 0, 0); } } + .shake { - -webkit-animation-name: shake; animation-name: shake; } -@-webkit-keyframes swing { - 20% { - -webkit-transform: rotate(15deg); - transform: rotate(15deg); + +@keyframes headShake { + 0% { + transform: translateX(0); } - 40% { - -webkit-transform: rotate(-10deg); - transform: rotate(-10deg); + + 6.5% { + transform: translateX(-6px) rotateY(-9deg); } - 60% { - -webkit-transform: rotate(5deg); - transform: rotate(5deg); + + 18.5% { + transform: translateX(5px) rotateY(7deg); } - 80% { - -webkit-transform: rotate(-5deg); - transform: rotate(-5deg); + + 31.5% { + transform: translateX(-3px) rotateY(-5deg); } - 100% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); + + 43.5% { + transform: translateX(2px) rotateY(3deg); + } + + 50% { + transform: translateX(0); } } + +.headShake { + animation-timing-function: ease-in-out; + animation-name: headShake; +} + @keyframes swing { 20% { - -webkit-transform: rotate(15deg); - -ms-transform: rotate(15deg); - transform: rotate(15deg); + transform: rotate3d(0, 0, 1, 15deg); } + 40% { - -webkit-transform: rotate(-10deg); - -ms-transform: rotate(-10deg); - transform: rotate(-10deg); + transform: rotate3d(0, 0, 1, -10deg); } + 60% { - -webkit-transform: rotate(5deg); - -ms-transform: rotate(5deg); - transform: rotate(5deg); + transform: rotate3d(0, 0, 1, 5deg); } + 80% { - -webkit-transform: rotate(-5deg); - -ms-transform: rotate(-5deg); - transform: rotate(-5deg); + transform: rotate3d(0, 0, 1, -5deg); } - 100% { - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); + + to { + transform: rotate3d(0, 0, 1, 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); + from { + transform: scale3d(1, 1, 1); } - 10%, - 20% { - -webkit-transform: scale(0.9) rotate(-3deg); - -ms-transform: scale(0.9) rotate(-3deg); - transform: scale(0.9) rotate(-3deg); + + 10%, 20% { + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -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); + + 30%, 50%, 70%, 90% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } - 40%, - 60%, - 80% { - -webkit-transform: scale(1.1) rotate(-3deg); - -ms-transform: scale(1.1) rotate(-3deg); - transform: scale(1.1) rotate(-3deg); + + 40%, 60%, 80% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } - 100% { - -webkit-transform: scale(1) rotate(0); - -ms-transform: scale(1) rotate(0); - transform: scale(1) rotate(0); + + to { + transform: scale3d(1, 1, 1); } } + .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%); + from { + transform: none; } + 15% { - -webkit-transform: translateX(-25%) rotate(-5deg); - -ms-transform: translateX(-25%) rotate(-5deg); - transform: translateX(-25%) rotate(-5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } + 30% { - -webkit-transform: translateX(20%) rotate(3deg); - -ms-transform: translateX(20%) rotate(3deg); - transform: translateX(20%) rotate(3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } + 45% { - -webkit-transform: translateX(-15%) rotate(-3deg); - -ms-transform: translateX(-15%) rotate(-3deg); - transform: translateX(-15%) rotate(-3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } + 60% { - -webkit-transform: translateX(10%) rotate(2deg); - -ms-transform: translateX(10%) rotate(2deg); - transform: translateX(10%) rotate(2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } + 75% { - -webkit-transform: translateX(-5%) rotate(-1deg); - -ms-transform: translateX(-5%) rotate(-1deg); - transform: translateX(-5%) rotate(-1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } - 100% { - -webkit-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); + + to { + transform: none; } } + .wobble { - -webkit-animation-name: wobble; animation-name: wobble; } -@-webkit-keyframes bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(0.3); - transform: scale(0.3); + +@keyframes jello { + from, 11.1%, to { + transform: none; } - 50% { - opacity: 1; - -webkit-transform: scale(1.05); - transform: scale(1.05); + + 22.2% { + transform: skewX(-12.5deg) skewY(-12.5deg); } - 70% { - -webkit-transform: scale(0.9); - transform: scale(0.9); + + 33.3% { + transform: skewX(6.25deg) skewY(6.25deg); } - 100% { - -webkit-transform: scale(1); - transform: scale(1); + + 44.4% { + transform: skewX(-3.125deg) skewY(-3.125deg); + } + + 55.5% { + transform: skewX(1.5625deg) skewY(1.5625deg); + } + + 66.6% { + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + + 77.7% { + transform: skewX(0.390625deg) skewY(0.390625deg); + } + + 88.8% { + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } + +.jello { + animation-name: jello; + transform-origin: center; +} + @keyframes bounceIn { + from, 20%, 40%, 60%, 80%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: scale(0.3); - -ms-transform: scale(0.3); - transform: scale(0.3); + transform: scale3d(.3, .3, .3); } - 50% { + + 20% { + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + transform: scale3d(.9, .9, .9); + } + + 60% { opacity: 1; - -webkit-transform: scale(1.05); - -ms-transform: scale(1.05); - transform: scale(1.05); + transform: scale3d(1.03, 1.03, 1.03); } - 70% { - -webkit-transform: scale(0.9); - -ms-transform: scale(0.9); - transform: scale(0.9); + + 80% { + transform: scale3d(.97, .97, .97); } - 100% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + + to { + opacity: 1; + transform: scale3d(1, 1, 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 { + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: translateY(-2000px); - -ms-transform: translateY(-2000px); - transform: translateY(-2000px); + transform: translate3d(0, -3000px, 0); } + 60% { opacity: 1; - -webkit-transform: translateY(30px); - -ms-transform: translateY(30px); - transform: translateY(30px); + transform: translate3d(0, 25px, 0); } - 80% { - -webkit-transform: translateY(-10px); - -ms-transform: translateY(-10px); - transform: translateY(-10px); + + 75% { + transform: translate3d(0, -10px, 0); } - 100% { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + + 90% { + transform: translate3d(0, 5px, 0); + } + + to { + transform: none; } } + .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 { + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: translateX(-2000px); - -ms-transform: translateX(-2000px); - transform: translateX(-2000px); + transform: translate3d(-3000px, 0, 0); } + 60% { opacity: 1; - -webkit-transform: translateX(30px); - -ms-transform: translateX(30px); - transform: translateX(30px); + transform: translate3d(25px, 0, 0); } - 80% { - -webkit-transform: translateX(-10px); - -ms-transform: translateX(-10px); - transform: translateX(-10px); + + 75% { + transform: translate3d(-10px, 0, 0); } - 100% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + + 90% { + transform: translate3d(5px, 0, 0); + } + + to { + transform: none; } } + .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); + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } + + from { + opacity: 0; + transform: translate3d(3000px, 0, 0); + } + 60% { opacity: 1; - -webkit-transform: translateX(-30px); - -ms-transform: translateX(-30px); - transform: translateX(-30px); + transform: translate3d(-25px, 0, 0); } - 80% { - -webkit-transform: translateX(10px); - -ms-transform: translateX(10px); - transform: translateX(10px); + + 75% { + transform: translate3d(10px, 0, 0); } - 100% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + + 90% { + transform: translate3d(-5px, 0, 0); + } + + to { + transform: none; } } + .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); + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } + + from { + opacity: 0; + transform: translate3d(0, 3000px, 0); + } + 60% { opacity: 1; - -webkit-transform: translateY(-30px); - -ms-transform: translateY(-30px); - transform: translateY(-30px); + transform: translate3d(0, -20px, 0); } - 80% { - -webkit-transform: translateY(10px); - -ms-transform: translateY(10px); - transform: translateY(10px); + + 75% { + transform: translate3d(0, 10px, 0); } - 100% { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + + 90% { + transform: translate3d(0, -5px, 0); + } + + to { + transform: translate3d(0, 0, 0); } } + .bounceInUp { - -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } -@-webkit-keyframes bounceOut { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - 25% { - -webkit-transform: scale(0.95); - transform: scale(0.95); - } - 50% { - opacity: 1; - -webkit-transform: scale(1.1); - transform: scale(1.1); - } - 100% { - opacity: 0; - -webkit-transform: scale(0.3); - transform: scale(0.3); - } -} + @keyframes bounceOut { - 0% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + 20% { + transform: scale3d(.9, .9, .9); } - 25% { - -webkit-transform: scale(0.95); - -ms-transform: scale(0.95); - transform: scale(0.95); - } - 50% { + + 50%, 55% { opacity: 1; - -webkit-transform: scale(1.1); - -ms-transform: scale(1.1); - transform: scale(1.1); + transform: scale3d(1.1, 1.1, 1.1); } - 100% { + + to { opacity: 0; - -webkit-transform: scale(0.3); - -ms-transform: scale(0.3); - transform: scale(0.3); + transform: scale3d(.3, .3, .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); + transform: translate3d(0, 10px, 0); } - 100% { + + 40%, 45% { + opacity: 1; + transform: translate3d(0, -20px, 0); + } + + to { opacity: 0; - -webkit-transform: translateY(2000px); - -ms-transform: translateY(2000px); - transform: translateY(2000px); + transform: translate3d(0, 2000px, 0); } } + .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); + transform: translate3d(20px, 0, 0); } - 100% { + + to { opacity: 0; - -webkit-transform: translateX(-2000px); - -ms-transform: translateX(-2000px); - transform: translateX(-2000px); + transform: translate3d(-2000px, 0, 0); } } + .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); + transform: translate3d(-20px, 0, 0); } - 100% { + + to { opacity: 0; - -webkit-transform: translateX(2000px); - -ms-transform: translateX(2000px); - transform: translateX(2000px); + transform: translate3d(2000px, 0, 0); } } + .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); + transform: translate3d(0, -10px, 0); } - 100% { + + 40%, 45% { + opacity: 1; + transform: translate3d(0, 20px, 0); + } + + to { opacity: 0; - -webkit-transform: translateY(-2000px); - -ms-transform: translateY(-2000px); - transform: translateY(-2000px); + transform: translate3d(0, -2000px, 0); } } + .bounceOutUp { - -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } -@-webkit-keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} + @keyframes fadeIn { - 0% { + from { opacity: 0; } - 100% { + + to { 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% { + from { opacity: 0; - -webkit-transform: translateY(-20px); - -ms-transform: translateY(-20px); - transform: translateY(-20px); + transform: translate3d(0, -100%, 0); } - 100% { + + to { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + transform: none; } } + .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% { + from { opacity: 0; - -webkit-transform: translateY(-2000px); - -ms-transform: translateY(-2000px); - transform: translateY(-2000px); + transform: translate3d(0, -2000px, 0); } - 100% { + + to { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + transform: none; } } + .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% { + from { opacity: 0; - -webkit-transform: translateX(-20px); - -ms-transform: translateX(-20px); - transform: translateX(-20px); + transform: translate3d(-100%, 0, 0); } - 100% { + + to { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + transform: none; } } + .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% { + from { opacity: 0; - -webkit-transform: translateX(-2000px); - -ms-transform: translateX(-2000px); - transform: translateX(-2000px); + transform: translate3d(-2000px, 0, 0); } - 100% { + + to { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + transform: none; } } + .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% { + from { opacity: 0; - -webkit-transform: translateX(20px); - -ms-transform: translateX(20px); - transform: translateX(20px); + transform: translate3d(100%, 0, 0); } - 100% { + + to { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + transform: none; } } + .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% { + from { opacity: 0; - -webkit-transform: translateX(2000px); - -ms-transform: translateX(2000px); - transform: translateX(2000px); + transform: translate3d(2000px, 0, 0); } - 100% { + + to { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + transform: none; } } + .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% { + from { opacity: 0; - -webkit-transform: translateY(20px); - -ms-transform: translateY(20px); - transform: translateY(20px); + transform: translate3d(0, 100%, 0); } - 100% { + + to { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + transform: none; } } -.fadeInUpHide { - -webkit-animation-name: fadeInUpHide; - animation-name: fadeInUpHide; -} -/*for Nave use*/ -@-webkit-keyframes fadeInUpHide { - 0% { - opacity: 0; - -webkit-transform: translateY(20px); - transform: translateY(20px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } -} -@keyframes fadeInUpHide { - 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); - } -} -.fadeInUpHide { - -webkit-animation-name: fadeInUpHide; - animation-name: fadeInUpHide; - margin-top: -70px; -} -@-webkit-keyframes fadeInUpBig { - 0% { - opacity: 0; - -webkit-transform: translateY(2000px); - transform: translateY(2000px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } + +.fadeInUp { + animation-name: fadeInUp; } + @keyframes fadeInUpBig { - 0% { + from { opacity: 0; - -webkit-transform: translateY(2000px); - -ms-transform: translateY(2000px); - transform: translateY(2000px); + transform: translate3d(0, 2000px, 0); } - 100% { + + to { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + transform: none; } } + .fadeInUpBig { - -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } -@-webkit-keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} + @keyframes fadeOut { - 0% { + from { opacity: 1; } - 100% { + + to { 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% { + from { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); } - 100% { + + to { opacity: 0; - -webkit-transform: translateY(20px); - -ms-transform: translateY(20px); - transform: translateY(20px); + transform: translate3d(0, 100%, 0); } } + .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% { + from { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); } - 100% { + + to { opacity: 0; - -webkit-transform: translateY(2000px); - -ms-transform: translateY(2000px); - transform: translateY(2000px); + transform: translate3d(0, 2000px, 0); } } + .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% { + from { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } - 100% { + + to { opacity: 0; - -webkit-transform: translateX(-20px); - -ms-transform: translateX(-20px); - transform: translateX(-20px); + transform: translate3d(-100%, 0, 0); } } + .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% { + from { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } - 100% { + + to { opacity: 0; - -webkit-transform: translateX(-2000px); - -ms-transform: translateX(-2000px); - transform: translateX(-2000px); + transform: translate3d(-2000px, 0, 0); } } + .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% { + from { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } - 100% { + + to { opacity: 0; - -webkit-transform: translateX(20px); - -ms-transform: translateX(20px); - transform: translateX(20px); + transform: translate3d(100%, 0, 0); } } + .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% { + from { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } - 100% { + + to { opacity: 0; - -webkit-transform: translateX(2000px); - -ms-transform: translateX(2000px); - transform: translateX(2000px); + transform: translate3d(2000px, 0, 0); } } + .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% { + from { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); } - 100% { + + to { opacity: 0; - -webkit-transform: translateY(-20px); - -ms-transform: translateY(-20px); - transform: translateY(-20px); + transform: translate3d(0, -100%, 0); } } + .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% { + from { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); } - 100% { + + to { opacity: 0; - -webkit-transform: translateY(-2000px); - -ms-transform: translateY(-2000px); - transform: translateY(-2000px); + transform: translate3d(0, -2000px, 0); } } + .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(0.95); - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.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; + from { + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 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; + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 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; + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } + 80% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); - -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); - -webkit-animation-timing-function: ease-in; + transform: perspective(400px) scale3d(.95, .95, .95); 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; + + to { + transform: perspective(400px); 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); + from { + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + animation-timing-function: ease-in; opacity: 0; } + 40% { - -webkit-transform: perspective(400px) rotateX(-10deg); - -ms-transform: perspective(400px) rotateX(-10deg); - transform: perspective(400px) rotateX(-10deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + animation-timing-function: ease-in; } - 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); + + 60% { + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } + + 80% { + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + + to { + transform: perspective(400px); + } } + .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); + from { + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + animation-timing-function: ease-in; opacity: 0; } + 40% { - -webkit-transform: perspective(400px) rotateY(-10deg); - -ms-transform: perspective(400px) rotateY(-10deg); - transform: perspective(400px) rotateY(-10deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + animation-timing-function: ease-in; } - 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); + + 60% { + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } + + 80% { + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + + to { + transform: perspective(400px); + } } + .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); + from { + transform: perspective(400px); + } + + 30% { + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } - 100% { - -webkit-transform: perspective(400px) rotateX(90deg); - -ms-transform: perspective(400px) rotateX(90deg); - transform: perspective(400px) rotateX(90deg); + + to { + transform: perspective(400px) rotate3d(1, 0, 0, 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); + from { + transform: perspective(400px); + } + + 30% { + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } - 100% { - -webkit-transform: perspective(400px) rotateY(90deg); - -ms-transform: perspective(400px) rotateY(90deg); - transform: perspective(400px) rotateY(90deg); + + to { + transform: perspective(400px) rotate3d(0, 1, 0, 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); + from { + transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } + 60% { - -webkit-transform: translateX(-20%) skewX(30deg); - -ms-transform: translateX(-20%) skewX(30deg); - transform: translateX(-20%) skewX(30deg); + transform: skewX(20deg); opacity: 1; } + 80% { - -webkit-transform: translateX(0%) skewX(-15deg); - -ms-transform: translateX(0%) skewX(-15deg); - transform: translateX(0%) skewX(-15deg); + transform: skewX(-5deg); opacity: 1; } - 100% { - -webkit-transform: translateX(0%) skewX(0deg); - -ms-transform: translateX(0%) skewX(0deg); - transform: translateX(0%) skewX(0deg); + + to { + transform: none; 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); + from { opacity: 1; } - 100% { - -webkit-transform: translateX(100%) skewX(-30deg); - -ms-transform: translateX(100%) skewX(-30deg); - transform: translateX(100%) skewX(-30deg); + + to { + transform: translate3d(100%, 0, 0) 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); + from { + transform-origin: center; + transform: rotate3d(0, 0, 1, -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); + + to { + transform-origin: center; + transform: none; 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; + from { transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } - 100% { - -webkit-transform-origin: left bottom; - -ms-transform-origin: left bottom; + + to { transform-origin: left bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); + transform: none; 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; + from { transform-origin: right bottom; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); + transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } - 100% { - -webkit-transform-origin: right bottom; - -ms-transform-origin: right bottom; + + to { transform-origin: right bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); + transform: none; 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; + from { transform-origin: left bottom; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); + transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } - 100% { - -webkit-transform-origin: left bottom; - -ms-transform-origin: left bottom; + + to { transform-origin: left bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); + transform: none; 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; + from { transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); + transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } - 100% { - -webkit-transform-origin: right bottom; - -ms-transform-origin: right bottom; + + to { transform-origin: right bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); + transform: none; 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); + from { + transform-origin: center; 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); + + to { + transform-origin: center; + transform: rotate3d(0, 0, 1, 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; + from { 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; + + to { transform-origin: left bottom; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); + transform: rotate3d(0, 0, 1, 45deg); 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; + from { 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; + + to { transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); + transform: rotate3d(0, 0, 1, -45deg); 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; + from { 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; + + to { transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); + transform: rotate3d(0, 0, 1, -45deg); 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; + from { 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; + + to { transform-origin: right bottom; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); + transform: rotate3d(0, 0, 1, 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; + + 20%, 60% { + transform: rotate3d(0, 0, 1, 80deg); 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; + + 40%, 80% { + transform: rotate3d(0, 0, 1, 60deg); 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); + + to { + transform: translate3d(0, 700px, 0); opacity: 0; } } + .hinge { - -webkit-animation-name: hinge; animation-name: hinge; } + +@keyframes jackInTheBox { + from { + opacity: 0; + transform: scale(0.1) rotate(30deg); + transform-origin: center bottom; + } + + 50% { + transform: rotate(-10deg); + } + + 70% { + transform: rotate(3deg); + } + + to { + opacity: 1; + transform: scale(1); + } +} + +.jackInTheBox { + animation-name: jackInTheBox; +} + /* 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% { + from { opacity: 0; - -webkit-transform: translateX(-100%) rotate(-120deg); - -ms-transform: translateX(-100%) rotate(-120deg); - transform: translateX(-100%) rotate(-120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } - 100% { + + to { opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg); - -ms-transform: translateX(0px) rotate(0deg); - transform: translateX(0px) rotate(0deg); + transform: none; } } + .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% { + from { opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg); - -ms-transform: translateX(0px) rotate(0deg); - transform: translateX(0px) rotate(0deg); } - 100% { + + to { opacity: 0; - -webkit-transform: translateX(100%) rotate(120deg); - -ms-transform: translateX(100%) rotate(120deg); - transform: translateX(100%) rotate(120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } + .rollOut { - -webkit-animation-name: rollOut; animation-name: rollOut; } -/* -============================================== -floating -============================================== -*/ -.floating { - animation-name: floating; - -webkit-animation-name: floating; - animation-duration: 1.5s; - -webkit-animation-duration: 1.5s; - animation-iteration-count: infinite; - -webkit-animation-iteration-count: infinite; -} -@keyframes floating { - 0% { - transform: translateY(0%); + +@keyframes zoomIn { + from { + opacity: 0; + transform: scale3d(.3, .3, .3); } + 50% { - transform: translateY(8%); - } - 100% { - transform: translateY(0%); + opacity: 1; } } -@-webkit-keyframes floating { - 0% { - -webkit-transform: translateY(0%); + +.zoomIn { + animation-name: zoomIn; +} + +@keyframes zoomInDown { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInDown { + animation-name: zoomInDown; +} + +@keyframes zoomInLeft { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInLeft { + animation-name: zoomInLeft; +} + +@keyframes zoomInRight { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInRight { + animation-name: zoomInRight; +} + +@keyframes zoomInUp { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInUp { + animation-name: zoomInUp; +} + +@keyframes zoomOut { + from { + opacity: 1; + } + 50% { - -webkit-transform: translateY(8%); + opacity: 0; + transform: scale3d(.3, .3, .3); } - 100% { - -webkit-transform: translateY(0%); + + to { + opacity: 0; } } + +.zoomOut { + animation-name: zoomOut; +} + +@keyframes zoomOutDown { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + to { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomOutDown { + animation-name: zoomOutDown; +} + +@keyframes zoomOutLeft { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + } + + to { + opacity: 0; + transform: scale(.1) translate3d(-2000px, 0, 0); + transform-origin: left center; + } +} + +.zoomOutLeft { + animation-name: zoomOutLeft; +} + +@keyframes zoomOutRight { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + } + + to { + opacity: 0; + transform: scale(.1) translate3d(2000px, 0, 0); + transform-origin: right center; + } +} + +.zoomOutRight { + animation-name: zoomOutRight; +} + +@keyframes zoomOutUp { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + to { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomOutUp { + animation-name: zoomOutUp; +} + +@keyframes slideInDown { + from { + transform: translate3d(0, -100%, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInDown { + animation-name: slideInDown; +} + +@keyframes slideInLeft { + from { + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInLeft { + animation-name: slideInLeft; +} + +@keyframes slideInRight { + from { + transform: translate3d(100%, 0, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInRight { + animation-name: slideInRight; +} + +@keyframes slideInUp { + from { + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInUp { + animation-name: slideInUp; +} + +@keyframes slideOutDown { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(0, 100%, 0); + } +} + +.slideOutDown { + animation-name: slideOutDown; +} + +@keyframes slideOutLeft { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(-100%, 0, 0); + } +} + +.slideOutLeft { + animation-name: slideOutLeft; +} + +@keyframes slideOutRight { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(100%, 0, 0); + } +} + +.slideOutRight { + animation-name: slideOutRight; +} + +@keyframes slideOutUp { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(0, -100%, 0); + } +} + +.slideOutUp { + animation-name: slideOutUp; +} diff --git a/css/main.css b/css/main.css index e7ce199a..cb35cffc 100644 --- a/css/main.css +++ b/css/main.css @@ -241,13 +241,17 @@ a:hover { color: #eee; } +.navbar-default .navbar-toggle { + border: none; +} + .navbar-default .navbar-toggle .icon-bar { background: #fff; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { - background: transparent; + background: rgba(0, 0, 0, 0.2); } .affix.navbar-default { @@ -410,6 +414,13 @@ a:hover { text-align: left; } +@media (max-width: 767px) { + #news .col-md-12 { + padding: 0; + margin-left: 0; + } +} + .news-card-text { padding: 10px; color: white; @@ -442,30 +453,67 @@ a:hover { #download .card .release-date { font-size: 11pt; - margin-top: 10px; + margin-top: 15px; margin-bottom: 0px; } +#download .card-overlay { + z-index: 100; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + border-radius: 10px; +} + +.card-overlay .close-icon { + cursor: pointer; + font-size: 20pt; + margin-top: 8px; +} + +.card-overlay h3 { + margin: 10px 0; +} + .dark-bg .release-date a { color: #428bca; } +.dark-bg .card-overlay { + background-color: #233240; +} + .red-bg .release-date a { color: #2C3E50; } +.red-bg .card-overlay { + background-color: #b93d30; +} + .blue-bg .release-date a { color: #E74C3C; } +.blue-bg .card-overlay { + background-color: #356fa2; +} + .release-details { text-align: center; + margin-top: 10px; } .btnDownload { margin: 5px; } +.release-details .btnDownload { + min-width: 50%; +} + .btnDownloadIcon { padding-right: 5px; } @@ -487,6 +535,14 @@ a:hover { } } +@media (max-width: 767px) { + #download .card { + margin-left: 15px !important; + margin-right: 15px !important; + width: calc(100% - 30px); + } +} + .flex-box-col { display: flex; flex-direction: column; @@ -720,7 +776,6 @@ a:hover { .footer { background-color: #243342; color: white; - /*border-top: 1px solid rgba(255,255,255,0.1);*/ padding-top: 15px; padding-bottom: 5px; } @@ -759,3 +814,9 @@ a:hover { /**************/ + +/**Animations**/ + +.animated { + animation-duration: 0.7s !important; +} diff --git a/js/main.js b/js/main.js index 5fb8f66c..bc038bed 100644 --- a/js/main.js +++ b/js/main.js @@ -2,6 +2,43 @@ //Use .swipebox class (function($) { - $('.swipebox').swipebox(); + $(".swipebox").swipebox(); })(jQuery); + +//Download Cards + +function showCard(card) { + card.addClass("animated flipInY").removeClass("flipOutY hidden"); +} + +function hideCard(card) { + card.addClass("flipOutY").removeClass("flipInY"); +} + +// Nightlies +$(".dark-bg .btnDownload").click(function() { + showCard($(".dark-bg .card-overlay")); +}); + +$(".dark-bg .card-overlay .close-icon").click(function () { + hideCard($(".dark-bg .card-overlay")); +}); + +// Pre Release +$(".red-bg .btnDownload").click(function() { + showCard($(".red-bg .card-overlay")); +}); + +$(".red-bg .card-overlay .close-icon").click(function () { + hideCard($(".red-bg .card-overlay")); +}); + +// Stable +$(".blue-bg .btnDownload").click(function() { + showCard($(".blue-bg .card-overlay")); +}); + +$(".blue-bg .card-overlay .close-icon").click(function () { + hideCard($(".blue-bg .card-overlay")); +});