diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index 5a4d364..0000000 --- a/Gruntfile.js +++ /dev/null @@ -1,83 +0,0 @@ -module.exports = function(grunt) { - pkg: grunt.file.readJSON('package.json'), - grunt.initConfig({ - - // Concatenate CSS files - concat: { - dist: { - src: [ - // _base.css required for .animated helper class - 'source/_base.css', - 'source/**/*.css' - ], - dest: 'animate.css' - } - }, - - // Auto-prefix CSS properties using Can I Use? - autoprefixer: { - options: { - browsers: ['last 3 versions', 'bb 10', 'android 3'] - }, - no_dest: { - // File to output - src: 'animate.css' - }, - }, - - // Minify CSS - csso: { - dist: { - files: { - // Output compressed CSS to style.min.css - 'animate.min.css': ['animate.css'] - } - } - }, - - // Watch files for changes - watch: { - css: { - files: [ - 'source/**/*', - '!node_modules', - '.animate-config' - ], - // Run Sass, autoprefixer, and CSSO - tasks: ['concat-anim', 'autoprefixer', 'csso'], - } - } - - }); - - // Register our tasks - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-concat'); - grunt.loadNpmTasks('grunt-autoprefixer'); - grunt.loadNpmTasks('grunt-csso'); - grunt.registerTask('default', ['watch']); - - grunt.registerTask('concat-anim', 'Concatenates activated animations', function () { - var config = grunt.file.readJSON('.animate-config'), - target = [ 'source/_base.css' ], - count = 0 - - for (var cat in config) { - for (var file in config[cat]) { - if (config[cat][file]) { - target.push('source/' + cat + '/' + file + '.css') - count++ - } - } - } - - if (!count) { - grunt.log.writeln('No animations activated.') - } - - grunt.log.writeln(count + (count > 1 ? ' animations' : ' animation') + ' activated.') - - grunt.config('concat', { 'animate.css': target }) - grunt.task.run('concat') - }); -}; \ No newline at end of file diff --git a/bower.json b/bower.json deleted file mode 100644 index 90bd8c0..0000000 --- a/bower.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "animate.css", - "version": "3.0.0", - "main": "./animate.css" -} diff --git a/images/ddown.png b/images/ddown.png new file mode 100644 index 0000000..e989753 Binary files /dev/null and b/images/ddown.png differ diff --git a/images/ddown.svg b/images/ddown.svg new file mode 100644 index 0000000..50b3db5 --- /dev/null +++ b/images/ddown.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..f60b859 --- /dev/null +++ b/index.html @@ -0,0 +1,149 @@ + + + + Animate.css + + + + + + + + + + + + +
+
+

Animate.css

 + Just-add-water CSS animations +
+
+ +
+
+

+ + + +

+
+

Download Animate.css or View on GitHub

+

Want to thank me for this? Buy me a coffee.

+
+
+ + + + + + \ No newline at end of file diff --git a/package.json b/package.json deleted file mode 100644 index 32960a6..0000000 --- a/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "animate.css", - "version": "3.0.0", - "devDependencies": { - "grunt": "~0.4.1", - "grunt-autoprefixer": "~0.4.0", - "grunt-contrib-sass": "~0.5.0", - "grunt-contrib-watch": "~0.5.3", - "grunt-csso": "~0.5.0", - "grunt-contrib-concat": "~0.3.0" - } -} diff --git a/source/_base.css b/source/_base.css deleted file mode 100644 index 8432987..0000000 --- a/source/_base.css +++ /dev/null @@ -1,22 +0,0 @@ -@charset "UTF-8"; -/*! -Animate.css - http://daneden.me/animate -Licensed under the MIT license - -Copyright (c) 2013 Daniel Eden - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -*/ - -.animated { - animation-duration: 1s; - animation-fill-mode: both; -} - -.animated.hinge { - animation-duration: 2s; -} \ No newline at end of file diff --git a/source/attention_seekers/bounce.css b/source/attention_seekers/bounce.css deleted file mode 100644 index a554e35..0000000 --- a/source/attention_seekers/bounce.css +++ /dev/null @@ -1,9 +0,0 @@ -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} - 40% {transform: translateY(-30px);} - 60% {transform: translateY(-15px);} -} - -.bounce { - animation-name: bounce; -} \ No newline at end of file diff --git a/source/attention_seekers/flash.css b/source/attention_seekers/flash.css deleted file mode 100644 index 5f36d8a..0000000 --- a/source/attention_seekers/flash.css +++ /dev/null @@ -1,8 +0,0 @@ -@keyframes flash { - 0%, 50%, 100% {opacity: 1;} - 25%, 75% {opacity: 0;} -} - -.flash { - animation-name: flash; -} \ No newline at end of file diff --git a/source/attention_seekers/pulse.css b/source/attention_seekers/pulse.css deleted file mode 100644 index b77622c..0000000 --- a/source/attention_seekers/pulse.css +++ /dev/null @@ -1,11 +0,0 @@ -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@keyframes pulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.1); } - 100% { transform: scale(1); } -} - -.pulse { - animation-name: pulse; -} \ No newline at end of file diff --git a/source/attention_seekers/shake.css b/source/attention_seekers/shake.css deleted file mode 100644 index 69180ba..0000000 --- a/source/attention_seekers/shake.css +++ /dev/null @@ -1,9 +0,0 @@ -@keyframes shake { - 0%, 100% {transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} - 20%, 40%, 60%, 80% {transform: translateX(10px);} -} - -.shake { - animation-name: shake; -} \ No newline at end of file diff --git a/source/attention_seekers/swing.css b/source/attention_seekers/swing.css deleted file mode 100644 index 70e7261..0000000 --- a/source/attention_seekers/swing.css +++ /dev/null @@ -1,12 +0,0 @@ -@keyframes swing { - 20% { transform: rotate(15deg); } - 40% { transform: rotate(-10deg); } - 60% { transform: rotate(5deg); } - 80% { transform: rotate(-5deg); } - 100% { transform: rotate(0deg); } -} - -.swing { - transform-origin: top center; - animation-name: swing; -} \ No newline at end of file diff --git a/source/attention_seekers/tada.css b/source/attention_seekers/tada.css deleted file mode 100644 index 172ac2f..0000000 --- a/source/attention_seekers/tada.css +++ /dev/null @@ -1,11 +0,0 @@ -@keyframes tada { - 0% {transform: scale(1);} - 10%, 20% {transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} - 100% {transform: scale(1) rotate(0);} -} - -.tada { - animation-name: tada; -} \ No newline at end of file diff --git a/source/attention_seekers/wobble.css b/source/attention_seekers/wobble.css deleted file mode 100644 index d4e16e6..0000000 --- a/source/attention_seekers/wobble.css +++ /dev/null @@ -1,15 +0,0 @@ -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@keyframes wobble { - 0% { transform: translateX(0%); } - 15% { transform: translateX(-25%) rotate(-5deg); } - 30% { transform: translateX(20%) rotate(3deg); } - 45% { transform: translateX(-15%) rotate(-3deg); } - 60% { transform: translateX(10%) rotate(2deg); } - 75% { transform: translateX(-5%) rotate(-1deg); } - 100% { transform: translateX(0%); } -} - -.wobble { - animation-name: wobble; -} \ No newline at end of file diff --git a/source/bouncing_entrances/bounceIn.css b/source/bouncing_entrances/bounceIn.css deleted file mode 100644 index f872596..0000000 --- a/source/bouncing_entrances/bounceIn.css +++ /dev/null @@ -1,23 +0,0 @@ -@keyframes bounceIn { - 0% { - opacity: 0; - transform: scale(.3); - } - - 50% { - opacity: 1; - transform: scale(1.05); - } - - 70% { - transform: scale(.9); - } - - 100% { - transform: scale(1); - } -} - -.bounceIn { - animation-name: bounceIn; -} \ No newline at end of file diff --git a/source/bouncing_entrances/bounceInDown.css b/source/bouncing_entrances/bounceInDown.css deleted file mode 100644 index 698c78d..0000000 --- a/source/bouncing_entrances/bounceInDown.css +++ /dev/null @@ -1,23 +0,0 @@ -@keyframes bounceInDown { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 60% { - opacity: 1; - transform: translateY(30px); - } - - 80% { - transform: translateY(-10px); - } - - 100% { - transform: translateY(0); - } -} - -.bounceInDown { - animation-name: bounceInDown; -} \ No newline at end of file diff --git a/source/bouncing_entrances/bounceInLeft.css b/source/bouncing_entrances/bounceInLeft.css deleted file mode 100644 index 8907502..0000000 --- a/source/bouncing_entrances/bounceInLeft.css +++ /dev/null @@ -1,23 +0,0 @@ -@keyframes bounceInLeft { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 60% { - opacity: 1; - transform: translateX(30px); - } - - 80% { - transform: translateX(-10px); - } - - 100% { - transform: translateX(0); - } -} - -.bounceInLeft { - animation-name: bounceInLeft; -} \ No newline at end of file diff --git a/source/bouncing_entrances/bounceInRight.css b/source/bouncing_entrances/bounceInRight.css deleted file mode 100644 index c19e3d2..0000000 --- a/source/bouncing_entrances/bounceInRight.css +++ /dev/null @@ -1,23 +0,0 @@ -@keyframes bounceInRight { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 60% { - opacity: 1; - transform: translateX(-30px); - } - - 80% { - transform: translateX(10px); - } - - 100% { - transform: translateX(0); - } -} - -.bounceInRight { - animation-name: bounceInRight; -} \ No newline at end of file diff --git a/source/bouncing_entrances/bounceInUp.css b/source/bouncing_entrances/bounceInUp.css deleted file mode 100644 index 4ae91f1..0000000 --- a/source/bouncing_entrances/bounceInUp.css +++ /dev/null @@ -1,23 +0,0 @@ -@keyframes bounceInUp { - 0% { - opacity: 0; - transform: translateY(2000px); - } - - 60% { - opacity: 1; - transform: translateY(-30px); - } - - 80% { - transform: translateY(10px); - } - - 100% { - transform: translateY(0); - } -} - -.bounceInUp { - animation-name: bounceInUp; -} \ No newline at end of file diff --git a/source/bouncing_exits/bounceOut.css b/source/bouncing_exits/bounceOut.css deleted file mode 100644 index 559f4de..0000000 --- a/source/bouncing_exits/bounceOut.css +++ /dev/null @@ -1,23 +0,0 @@ -@keyframes bounceOut { - 0% { - transform: scale(1); - } - - 25% { - transform: scale(.95); - } - - 50% { - opacity: 1; - transform: scale(1.1); - } - - 100% { - opacity: 0; - transform: scale(.3); - } -} - -.bounceOut { - animation-name: bounceOut; -} \ No newline at end of file diff --git a/source/bouncing_exits/bounceOutDown.css b/source/bouncing_exits/bounceOutDown.css deleted file mode 100644 index 43d8a43..0000000 --- a/source/bouncing_exits/bounceOutDown.css +++ /dev/null @@ -1,19 +0,0 @@ -@keyframes bounceOutDown { - 0% { - transform: translateY(0); - } - - 20% { - opacity: 1; - transform: translateY(-20px); - } - - 100% { - opacity: 0; - transform: translateY(2000px); - } -} - -.bounceOutDown { - animation-name: bounceOutDown; -} \ No newline at end of file diff --git a/source/bouncing_exits/bounceOutLeft.css b/source/bouncing_exits/bounceOutLeft.css deleted file mode 100644 index 9ec4061..0000000 --- a/source/bouncing_exits/bounceOutLeft.css +++ /dev/null @@ -1,19 +0,0 @@ -@keyframes bounceOutLeft { - 0% { - transform: translateX(0); - } - - 20% { - opacity: 1; - transform: translateX(20px); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.bounceOutLeft { - animation-name: bounceOutLeft; -} \ No newline at end of file diff --git a/source/bouncing_exits/bounceOutRight.css b/source/bouncing_exits/bounceOutRight.css deleted file mode 100644 index 5534733..0000000 --- a/source/bouncing_exits/bounceOutRight.css +++ /dev/null @@ -1,19 +0,0 @@ -@keyframes bounceOutRight { - 0% { - transform: translateX(0); - } - - 20% { - opacity: 1; - transform: translateX(-20px); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.bounceOutRight { - animation-name: bounceOutRight; -} \ No newline at end of file diff --git a/source/bouncing_exits/bounceOutUp.css b/source/bouncing_exits/bounceOutUp.css deleted file mode 100644 index a8606b8..0000000 --- a/source/bouncing_exits/bounceOutUp.css +++ /dev/null @@ -1,19 +0,0 @@ -@keyframes bounceOutUp { - 0% { - transform: translateY(0); - } - - 20% { - opacity: 1; - transform: translateY(20px); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.bounceOutUp { - animation-name: bounceOutUp; -} \ No newline at end of file diff --git a/source/fading_entrances/fadeIn.css b/source/fading_entrances/fadeIn.css deleted file mode 100644 index 2916944..0000000 --- a/source/fading_entrances/fadeIn.css +++ /dev/null @@ -1,8 +0,0 @@ -@keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -.fadeIn { - animation-name: fadeIn; -} \ No newline at end of file diff --git a/source/fading_entrances/fadeInDown.css b/source/fading_entrances/fadeInDown.css deleted file mode 100644 index 4328fba..0000000 --- a/source/fading_entrances/fadeInDown.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeInDown { - 0% { - opacity: 0; - transform: translateY(-20px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInDown { - animation-name: fadeInDown; -} \ No newline at end of file diff --git a/source/fading_entrances/fadeInDownBig.css b/source/fading_entrances/fadeInDownBig.css deleted file mode 100644 index cca41ff..0000000 --- a/source/fading_entrances/fadeInDownBig.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeInDownBig { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInDownBig { - animation-name: fadeInDownBig; -} \ No newline at end of file diff --git a/source/fading_entrances/fadeInLeft.css b/source/fading_entrances/fadeInLeft.css deleted file mode 100644 index 18ba4ea..0000000 --- a/source/fading_entrances/fadeInLeft.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeInLeft { - 0% { - opacity: 0; - transform: translateX(-20px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInLeft { - animation-name: fadeInLeft; -} \ No newline at end of file diff --git a/source/fading_entrances/fadeInLeftBig.css b/source/fading_entrances/fadeInLeftBig.css deleted file mode 100644 index 43df0d2..0000000 --- a/source/fading_entrances/fadeInLeftBig.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeInLeftBig { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInLeftBig { - animation-name: fadeInLeftBig; -} \ No newline at end of file diff --git a/source/fading_entrances/fadeInRight.css b/source/fading_entrances/fadeInRight.css deleted file mode 100644 index 1fe7767..0000000 --- a/source/fading_entrances/fadeInRight.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeInRight { - 0% { - opacity: 0; - transform: translateX(20px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInRight { - animation-name: fadeInRight; -} \ No newline at end of file diff --git a/source/fading_entrances/fadeInRightBig.css b/source/fading_entrances/fadeInRightBig.css deleted file mode 100644 index ab19aec..0000000 --- a/source/fading_entrances/fadeInRightBig.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeInRightBig { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInRightBig { - animation-name: fadeInRightBig; -} \ No newline at end of file diff --git a/source/fading_entrances/fadeInUp.css b/source/fading_entrances/fadeInUp.css deleted file mode 100644 index 0aeb471..0000000 --- a/source/fading_entrances/fadeInUp.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(20px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInUp { - animation-name: fadeInUp; -} \ No newline at end of file diff --git a/source/fading_entrances/fadeInUpBig.css b/source/fading_entrances/fadeInUpBig.css deleted file mode 100644 index e964f3d..0000000 --- a/source/fading_entrances/fadeInUpBig.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeInUpBig { - 0% { - opacity: 0; - transform: translateY(2000px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInUpBig { - animation-name: fadeInUpBig; -} \ No newline at end of file diff --git a/source/fading_exits/fadeOut.css b/source/fading_exits/fadeOut.css deleted file mode 100644 index ea9051f..0000000 --- a/source/fading_exits/fadeOut.css +++ /dev/null @@ -1,8 +0,0 @@ -@keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -.fadeOut { - animation-name: fadeOut; -} \ No newline at end of file diff --git a/source/fading_exits/fadeOutDown.css b/source/fading_exits/fadeOutDown.css deleted file mode 100644 index c02763c..0000000 --- a/source/fading_exits/fadeOutDown.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeOutDown { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(20px); - } -} - -.fadeOutDown { - animation-name: fadeOutDown; -} \ No newline at end of file diff --git a/source/fading_exits/fadeOutDownBig.css b/source/fading_exits/fadeOutDownBig.css deleted file mode 100644 index bb0bb61..0000000 --- a/source/fading_exits/fadeOutDownBig.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeOutDownBig { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(2000px); - } -} - -.fadeOutDownBig { - animation-name: fadeOutDownBig; -} \ No newline at end of file diff --git a/source/fading_exits/fadeOutLeft.css b/source/fading_exits/fadeOutLeft.css deleted file mode 100644 index d86012a..0000000 --- a/source/fading_exits/fadeOutLeft.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeOutLeft { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-20px); - } -} - -.fadeOutLeft { - animation-name: fadeOutLeft; -} \ No newline at end of file diff --git a/source/fading_exits/fadeOutLeftBig.css b/source/fading_exits/fadeOutLeftBig.css deleted file mode 100644 index c74fc51..0000000 --- a/source/fading_exits/fadeOutLeftBig.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeOutLeftBig { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.fadeOutLeftBig { - animation-name: fadeOutLeftBig; -} \ No newline at end of file diff --git a/source/fading_exits/fadeOutRight.css b/source/fading_exits/fadeOutRight.css deleted file mode 100644 index 54b62ec..0000000 --- a/source/fading_exits/fadeOutRight.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeOutRight { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(20px); - } -} - -.fadeOutRight { - animation-name: fadeOutRight; -} \ No newline at end of file diff --git a/source/fading_exits/fadeOutRightBig.css b/source/fading_exits/fadeOutRightBig.css deleted file mode 100644 index 344998d..0000000 --- a/source/fading_exits/fadeOutRightBig.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeOutRightBig { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.fadeOutRightBig { - animation-name: fadeOutRightBig; -} \ No newline at end of file diff --git a/source/fading_exits/fadeOutUp.css b/source/fading_exits/fadeOutUp.css deleted file mode 100644 index c872ab8..0000000 --- a/source/fading_exits/fadeOutUp.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeOutUp { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-20px); - } -} - -.fadeOutUp { - animation-name: fadeOutUp; -} \ No newline at end of file diff --git a/source/fading_exits/fadeOutUpBig.css b/source/fading_exits/fadeOutUpBig.css deleted file mode 100644 index 9029557..0000000 --- a/source/fading_exits/fadeOutUpBig.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes fadeOutUpBig { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.fadeOutUpBig { - animation-name: fadeOutUpBig; -} \ No newline at end of file diff --git a/source/flippers/flip.css b/source/flippers/flip.css deleted file mode 100644 index 7e23d90..0000000 --- a/source/flippers/flip.css +++ /dev/null @@ -1,27 +0,0 @@ -@keyframes flip { - 0% { - transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - animation-timing-function: ease-out; - } - 40% { - transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - animation-timing-function: ease-out; - } - 50% { - transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - animation-timing-function: ease-in; - } - 80% { - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - animation-timing-function: ease-in; - } - 100% { - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - animation-timing-function: ease-in; - } -} - -.animated.flip { - backface-visibility: visible; - animation-name: flip; -} diff --git a/source/flippers/flipInX.css b/source/flippers/flipInX.css deleted file mode 100644 index dce639f..0000000 --- a/source/flippers/flipInX.css +++ /dev/null @@ -1,24 +0,0 @@ -@keyframes flipInX { - 0% { - transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - transform: perspective(400px) rotateX(-10deg); - } - - 70% { - transform: perspective(400px) rotateX(10deg); - } - - 100% { - transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} - -.flipInX { - backface-visibility: visible !important; - animation-name: flipInX; -} \ No newline at end of file diff --git a/source/flippers/flipInY.css b/source/flippers/flipInY.css deleted file mode 100644 index 0078030..0000000 --- a/source/flippers/flipInY.css +++ /dev/null @@ -1,24 +0,0 @@ -@keyframes flipInY { - 0% { - transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - transform: perspective(400px) rotateY(-10deg); - } - - 70% { - transform: perspective(400px) rotateY(10deg); - } - - 100% { - transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} - -.flipInY { - backface-visibility: visible !important; - animation-name: flipInY; -} \ No newline at end of file diff --git a/source/flippers/flipOutX.css b/source/flippers/flipOutX.css deleted file mode 100644 index 4bb32d0..0000000 --- a/source/flippers/flipOutX.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes flipOutX { - 0% { - transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -.flipOutX { - animation-name: flipOutX; - backface-visibility: visible !important; -} \ No newline at end of file diff --git a/source/flippers/flipOutY.css b/source/flippers/flipOutY.css deleted file mode 100644 index 948caf8..0000000 --- a/source/flippers/flipOutY.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes flipOutY { - 0% { - transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} - -.flipOutY { - backface-visibility: visible !important; - animation-name: flipOutY; -} \ No newline at end of file diff --git a/source/lightspeed/lightSpeedIn.css b/source/lightspeed/lightSpeedIn.css deleted file mode 100644 index dee261e..0000000 --- a/source/lightspeed/lightSpeedIn.css +++ /dev/null @@ -1,11 +0,0 @@ -@keyframes lightSpeedIn { - 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } -} - -.lightSpeedIn { - animation-name: lightSpeedIn; - animation-timing-function: ease-out; -} \ No newline at end of file diff --git a/source/lightspeed/lightSpeedOut.css b/source/lightspeed/lightSpeedOut.css deleted file mode 100644 index 927f6b4..0000000 --- a/source/lightspeed/lightSpeedOut.css +++ /dev/null @@ -1,10 +0,0 @@ -@keyframes lightSpeedOut { - 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } -} - -.lightSpeedOut { - animation-name: lightSpeedOut; - - animation-timing-function: ease-in; -} \ No newline at end of file diff --git a/source/rotating_entrances/rotateIn.css b/source/rotating_entrances/rotateIn.css deleted file mode 100644 index a1ecc2e..0000000 --- a/source/rotating_entrances/rotateIn.css +++ /dev/null @@ -1,17 +0,0 @@ -@keyframes rotateIn { - 0% { - transform-origin: center center; - transform: rotate(-200deg); - opacity: 0; - } - - 100% { - transform-origin: center center; - transform: rotate(0); - opacity: 1; - } -} - -.rotateIn { - animation-name: rotateIn; -} \ No newline at end of file diff --git a/source/rotating_entrances/rotateInDownLeft.css b/source/rotating_entrances/rotateInDownLeft.css deleted file mode 100644 index d347488..0000000 --- a/source/rotating_entrances/rotateInDownLeft.css +++ /dev/null @@ -1,17 +0,0 @@ -@keyframes rotateInDownLeft { - 0% { - transform-origin: left bottom; - transform: rotate(-90deg); - opacity: 0; - } - - 100% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInDownLeft { - animation-name: rotateInDownLeft; -} \ No newline at end of file diff --git a/source/rotating_entrances/rotateInDownRight.css b/source/rotating_entrances/rotateInDownRight.css deleted file mode 100644 index 9205910..0000000 --- a/source/rotating_entrances/rotateInDownRight.css +++ /dev/null @@ -1,17 +0,0 @@ -@keyframes rotateInDownRight { - 0% { - transform-origin: right bottom; - transform: rotate(90deg); - opacity: 0; - } - - 100% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInDownRight { - animation-name: rotateInDownRight; -} \ No newline at end of file diff --git a/source/rotating_entrances/rotateInUpLeft.css b/source/rotating_entrances/rotateInUpLeft.css deleted file mode 100644 index d2f8dfa..0000000 --- a/source/rotating_entrances/rotateInUpLeft.css +++ /dev/null @@ -1,17 +0,0 @@ -@keyframes rotateInUpLeft { - 0% { - transform-origin: left bottom; - transform: rotate(90deg); - opacity: 0; - } - - 100% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInUpLeft { - animation-name: rotateInUpLeft; -} \ No newline at end of file diff --git a/source/rotating_entrances/rotateInUpRight.css b/source/rotating_entrances/rotateInUpRight.css deleted file mode 100644 index 5b4c50d..0000000 --- a/source/rotating_entrances/rotateInUpRight.css +++ /dev/null @@ -1,17 +0,0 @@ -@keyframes rotateInUpRight { - 0% { - transform-origin: right bottom; - transform: rotate(-90deg); - opacity: 0; - } - - 100% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInUpRight { - animation-name: rotateInUpRight; -} \ No newline at end of file diff --git a/source/rotating_exits/rotateOut.css b/source/rotating_exits/rotateOut.css deleted file mode 100644 index d81e919..0000000 --- a/source/rotating_exits/rotateOut.css +++ /dev/null @@ -1,17 +0,0 @@ -@keyframes rotateOut { - 0% { - transform-origin: center center; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: center center; - transform: rotate(200deg); - opacity: 0; - } -} - -.rotateOut { - animation-name: rotateOut; -} \ No newline at end of file diff --git a/source/rotating_exits/rotateOutDownLeft.css b/source/rotating_exits/rotateOutDownLeft.css deleted file mode 100644 index d94c3c8..0000000 --- a/source/rotating_exits/rotateOutDownLeft.css +++ /dev/null @@ -1,17 +0,0 @@ -@keyframes rotateOutDownLeft { - 0% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: left bottom; - transform: rotate(90deg); - opacity: 0; - } -} - -.rotateOutDownLeft { - animation-name: rotateOutDownLeft; -} \ No newline at end of file diff --git a/source/rotating_exits/rotateOutDownRight.css b/source/rotating_exits/rotateOutDownRight.css deleted file mode 100644 index 5d0b90f..0000000 --- a/source/rotating_exits/rotateOutDownRight.css +++ /dev/null @@ -1,17 +0,0 @@ -@keyframes rotateOutDownRight { - 0% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: right bottom; - transform: rotate(-90deg); - opacity: 0; - } -} - -.rotateOutDownRight { - animation-name: rotateOutDownRight; -} \ No newline at end of file diff --git a/source/rotating_exits/rotateOutUpLeft.css b/source/rotating_exits/rotateOutUpLeft.css deleted file mode 100644 index 4b9e423..0000000 --- a/source/rotating_exits/rotateOutUpLeft.css +++ /dev/null @@ -1,17 +0,0 @@ -@keyframes rotateOutUpLeft { - 0% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: left bottom; - transform: rotate(-90deg); - opacity: 0; - } -} - -.rotateOutUpLeft { - animation-name: rotateOutUpLeft; -} diff --git a/source/rotating_exits/rotateOutUpRight.css b/source/rotating_exits/rotateOutUpRight.css deleted file mode 100644 index 528fa8b..0000000 --- a/source/rotating_exits/rotateOutUpRight.css +++ /dev/null @@ -1,17 +0,0 @@ -@keyframes rotateOutUpRight { - 0% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: right bottom; - transform: rotate(90deg); - opacity: 0; - } -} - -.rotateOutUpRight { - animation-name: rotateOutUpRight; -} \ No newline at end of file diff --git a/source/sliders/slideInDown.css b/source/sliders/slideInDown.css deleted file mode 100644 index 397861d..0000000 --- a/source/sliders/slideInDown.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideInDown { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 100% { - transform: translateY(0); - } -} - -.slideInDown { - animation-name: slideInDown; -} \ No newline at end of file diff --git a/source/sliders/slideInLeft.css b/source/sliders/slideInLeft.css deleted file mode 100644 index 219d949..0000000 --- a/source/sliders/slideInLeft.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideInLeft { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 100% { - transform: translateX(0); - } -} - -.slideInLeft { - animation-name: slideInLeft; -} \ No newline at end of file diff --git a/source/sliders/slideInRight.css b/source/sliders/slideInRight.css deleted file mode 100644 index 7bde814..0000000 --- a/source/sliders/slideInRight.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideInRight { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 100% { - transform: translateX(0); - } -} - -.slideInRight { - animation-name: slideInRight; -} \ No newline at end of file diff --git a/source/sliders/slideOutLeft.css b/source/sliders/slideOutLeft.css deleted file mode 100644 index d0bbde7..0000000 --- a/source/sliders/slideOutLeft.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideOutLeft { - 0% { - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.slideOutLeft { - animation-name: slideOutLeft; -} \ No newline at end of file diff --git a/source/sliders/slideOutRight.css b/source/sliders/slideOutRight.css deleted file mode 100644 index 1253906..0000000 --- a/source/sliders/slideOutRight.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideOutRight { - 0% { - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.slideOutRight { - animation-name: slideOutRight; -} \ No newline at end of file diff --git a/source/sliders/slideOutUp.css b/source/sliders/slideOutUp.css deleted file mode 100644 index 4c344d1..0000000 --- a/source/sliders/slideOutUp.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideOutUp { - 0% { - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.slideOutUp { - animation-name: slideOutUp; -} \ No newline at end of file diff --git a/source/specials/hinge.css b/source/specials/hinge.css deleted file mode 100644 index 0d063d9..0000000 --- a/source/specials/hinge.css +++ /dev/null @@ -1,11 +0,0 @@ -@keyframes hinge { - 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } - 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } - 100% { transform: translateY(700px); opacity: 0; } -} - -.hinge { - animation-name: hinge; -} \ No newline at end of file diff --git a/source/specials/rollIn.css b/source/specials/rollIn.css deleted file mode 100644 index 2398ca1..0000000 --- a/source/specials/rollIn.css +++ /dev/null @@ -1,10 +0,0 @@ -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@keyframes rollIn { - 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } -} - -.rollIn { - animation-name: rollIn; -} \ No newline at end of file diff --git a/source/specials/rollOut.css b/source/specials/rollOut.css deleted file mode 100644 index 4471b20..0000000 --- a/source/specials/rollOut.css +++ /dev/null @@ -1,17 +0,0 @@ -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@keyframes rollOut { - 0% { - opacity: 1; - transform: translateX(0px) rotate(0deg); - } - - 100% { - opacity: 0; - transform: translateX(100%) rotate(120deg); - } -} - -.rollOut { - animation-name: rollOut; -} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d95a18f --- /dev/null +++ b/style.css @@ -0,0 +1,214 @@ +/*-----------------------------------*\ + $RESET +\*-----------------------------------*/ + +*, :before, :after { + margin: 0; + padding: 0; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +input, select, button, textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + font: inherit; + color: inherit; +} + +/*-----------------------------------*\ + $OBJECTS +\*-----------------------------------*/ + +.butt, .input { + padding: .75rem; + + background-color: transparent; + border-radius: 4px; +} + + .butt:focus, .input:focus { + outline: none; + } + +.butt { + border: 2px solid #f35626; + line-height: 1.375; + padding-left: 1.5rem; + padding-right: 1.5rem; + + font-weight: 700; + + color: #f35626; + + cursor: pointer; + -webkit-animation: hue 60s infinite linear; +} + + .butt--primary { + background-color: #f35626; + color: #fff; + } + +.input { + border: 1px solid #c0c8c9; + border-radius: 4px; +} + + .input--dropdown { + background-image: url("images/ddown.png"); + background-image: url("images/ddown.svg?3"), none; + background-repeat: no-repeat; + background-size: 1.5rem 1rem; + background-position: right center; + } + +/*-----------------------------------*\ + $TYPOGRAPHY +\*-----------------------------------*/ + +h1, .alpha { + margin-bottom: 1.5rem; + + font-size: 3rem; + font-weight: 100; + line-height: 1; + letter-spacing: -.05em; +} + +h2, .beta { + margin-bottom: .75rem; + + font-weight: 400; + font-size: 1.5rem; + line-height: 1; +} + +@media (min-width: 650px) { + .mega { + font-size: 6rem; + line-height: 1; + } +} + +.subhead, .meta { + color: #7b8993; +} + +.promo { + text-align: center; +} + +p, hr { + margin-bottom: 1.5rem; +} + +hr { + border: none; + margin-top: -1px; + height: 1px; + background-color: #c0c8c9; + background-image: -webkit-linear-gradient(0deg, #fff, #c0c8c9, #fff); +} + +a { + color: inherit; + text-decoration: underline; + -webkit-animation: hue 60s infinite linear; +} + + a:hover { + color: #f35626; + } + +/*-----------------------------------*\ + $LAYOUT +\*-----------------------------------*/ + +.wrap { + max-width: 38rem; + margin: 0 auto; +} + +.island { + padding: 1.5rem; +} + +.isle { + padding: .75rem; +} + +.spit { + padding: .375rem; +} + +/*-----------------------------------*\ + $BASE +\*-----------------------------------*/ + +html { + font: 100%/1.5 "Roboto", Verdana, sans-serif; + color: #3d464d; + background-color: #fff; + -webkit-font-smoothing: antialiased; + width: 100%; + + overflow: hidden-x; + + /* Centering in The Unknown */ + text-align: center; +} + +@media (min-width: 650px) { + html { + height: 100%; + } + + html:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-right: -0.25em; + } + + body { + display: inline-block; + vertical-align: middle; + max-width: 38rem; + } +} + +/*-----------------------------------*\ + $HEADER +\*-----------------------------------*/ + +.site__header { + +} + + .site__title { + color: #f35626; + background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -webkit-animation: hue 60s infinite linear; + } + +/*-----------------------------------*\ + $ANIMATIONS +\*-----------------------------------*/ + +@-webkit-keyframes hue { + from { + -webkit-filter: hue-rotate(0deg); + } + + to { + -webkit-filter: hue-rotate(360deg); + } +} \ No newline at end of file