From 30c1f72d95cfe4e7b4275d3de1ec5e1d21220d34 Mon Sep 17 00:00:00 2001 From: VocaluxeBuildBot Date: Fri, 1 Sep 2017 16:06:12 +0000 Subject: [PATCH 1/5] Trigger page update after a new publish (triggered by Merge pull request #299 from flokuep/develop [8d4718166b96167f28a7bc0f417a8fe801cbbdac]) From d026cff3e62a34499fce644feddb65a3ddf3f9d2 Mon Sep 17 00:00:00 2001 From: VocaluxeBuildBot Date: Fri, 1 Sep 2017 16:09:00 +0000 Subject: [PATCH 2/5] Trigger page update after a new publish (triggered by Merge pull request #299 from flokuep/develop [8d4718166b96167f28a7bc0f417a8fe801cbbdac]) From f40e3ed4ea304328e55588abf9a60f746e44cd56 Mon Sep 17 00:00:00 2001 From: Hendrik Date: Fri, 1 Sep 2017 20:12:58 +0200 Subject: [PATCH 3/5] added installer download option - new download card - added buttons for each release file - improved general responsiveness --- _includes/about.html | 5 +- _includes/contribute.html | 2 +- _includes/download.html | 111 +- _includes/downloadButton.html | 4 +- _includes/help.html | 2 +- _includes/songs.html | 2 +- css/animate.css | 2823 +++++++++++---------------------- css/main.css | 67 +- js/main.js | 39 +- 9 files changed, 1136 insertions(+), 1919 deletions(-) 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")); +}); From f87c59432c27c32469c8ca8b9d03ab16359abb28 Mon Sep 17 00:00:00 2001 From: VocaluxeBuildBot Date: Sat, 2 Sep 2017 08:24:06 +0000 Subject: [PATCH 4/5] Trigger page update after a new publish (triggered by Merge pull request #296 from flokuep/installer [a284b0f2b932676fb5718b940966d1f39a911613]) From 8f7f6b63269b3c2775dc62fd8e8a3d4652363f6d Mon Sep 17 00:00:00 2001 From: VocaluxeBuildBot Date: Sat, 2 Sep 2017 08:26:25 +0000 Subject: [PATCH 5/5] Trigger page update after a new publish (triggered by Merge pull request #296 from flokuep/installer [a284b0f2b932676fb5718b940966d1f39a911613])