Robot/animate.css
1
0
Fork 0
mirror of https://github.com/animate-css/animate.css.git synced 2024-11-17 17:45:17 +01:00
Code Issues Projects Releases Packages Wiki Activity

Simplify & centralize the Animate.css home page. Finally.

Browse source
This commit is contained in:
Daniel Eden 2014-01-20 17:31:50 -08:00
parent bb2c830e08
commit 82a4268c68
69 changed files with 370 additions and 1085 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
Gruntfile.js
View file

@ -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')
});
};

5
bower.json
View file

@ -1,5 +0,0 @@
{
"name": "animate.css",
"version": "3.0.0",
"main": "./animate.css"
}

BIN
images/ddown.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 184 B

7
images/ddown.svg Normal file
View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="16px" viewBox="0 0 24 16" enable-background="new 0 0 24 16" xml:space="preserve">
<polygon fill="#C0C8C9" points="12.333,5 7.794,10 3.254,5 "/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 540 B

149
index.html Normal file
View file

@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animate.css</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, minimal-ui" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//code.jquery.com" />
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="animate.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="animated fadeInDown">
<header class="site__header island">
<div class="wrap">
<span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Animate.css</h1></span>
<span class="beta subhead">Just-add-water CSS animations</span>
</div>
</header><!-- /.site__header -->
<main class="site__content island" role="content">
<div class="wrap">
<p>
<select class="input input--dropdown js--animations">
<optgroup label="Attention Seekers">
<option value="bounce">bounce</option>
<option value="flash">flash</option>
<option value="pulse">pulse</option>
<option value="shake">shake</option>
<option value="swing">swing</option>
<option value="tada">tada</option>
<option value="wobble">wobble</option>
</optgroup>
<optgroup label="Bouncing Entrances">
<option value="bounceIn">bounceIn</option>
<option value="bounceInDown">bounceInDown</option>
<option value="bounceInLeft">bounceInLeft</option>
<option value="bounceInRight">bounceInRight</option>
<option value="bounceInUp">bounceInUp</option>
</optgroup>
<optgroup label="Bouncing Exits">
<option value="bounceOut">bounceOut</option>
<option value="bounceOutDown">bounceOutDown</option>
<option value="bounceOutLeft">bounceOutLeft</option>
<option value="bounceOutRight">bounceOutRight</option>
<option value="bounceOutUp">bounceOutUp</option>
</optgroup>
<optgroup label="Fading Entrances">
<option value="fadeIn">fadeIn</option>
<option value="fadeInDown">fadeInDown</option>
<option value="fadeInDownBig">fadeInDownBig</option>
<option value="fadeInLeft">fadeInLeft</option>
<option value="fadeInLeftBig">fadeInLeftBig</option>
<option value="fadeInRight">fadeInRight</option>
<option value="fadeInRightBig">fadeInRightBig</option>
<option value="fadeInUp">fadeInUp</option>
<option value="fadeInUpBig">fadeInUpBig</option>
</optgroup>
<optgroup label="Fading Exits">
<option value="fadeOut">fadeOut</option>
<option value="fadeOutDown">fadeOutDown</option>
<option value="fadeOutDownBig">fadeOutDownBig</option>
<option value="fadeOutLeft">fadeOutLeft</option>
<option value="fadeOutLeftBig">fadeOutLeftBig</option>
<option value="fadeOutRight">fadeOutRight</option>
<option value="fadeOutRightBig">fadeOutRightBig</option>
<option value="fadeOutUp">fadeOutUp</option>
<option value="fadeOutUpBig">fadeOutUpBig</option>
</optgroup>
<optgroup label="Flippers">
<option value="flip">flip</option>
<option value="flipInX">flipInX</option>
<option value="flipInY">flipInY</option>
<option value="flipOutX">flipOutX</option>
<option value="flipOutY">flipOutY</option>
</optgroup>
<optgroup label="Lightspeed">
<option value="lightspeedIn">lightspeedIn</option>
<option value="lightspeedOut">lightspeedOut</option>
</optgroup>
<optgroup label="Rotating Entrances">
<option value="rotateIn">rotateIn</option>
<option value="rotateInDownLeft">rotateInDownLeft</option>
<option value="rotateInDownRight">rotateInDownRight</option>
<option value="rotateInUpLeft">rotateInUpLeft</option>
<option value="rotateInUpRight">rotateInUpRight</option>
</optgroup>
<optgroup label="Rotating Exits">
<option value="rotateOut">rotateOut</option>
<option value="rotateOutDownLeft">rotateOutDownLeft</option>
<option value="rotateOutDownRight">rotateOutDownRight</option>
<option value="rotateOutUpLeft">rotateOutUpLeft</option>
<option value="rotateOutUpRight">rotateOutUpRight</option>
</optgroup>
<optgroup label="Sliders">
<option value="slideInDown">slideInDown</option>
<option value="slideInLeft">slideInLeft</option>
<option value="slideInRight">slideInRight</option>
<option value="slideOutLeft">slideOutLeft</option>
<option value="slideOutRight">slideOutRight</option>
<option value="slideOutUp">slideOutUp</option>
</optgroup>
<optgroup label="Specials">
<option value="hinge">hinge</option>
<option value="rollIn">rollIn</option>
<option value="rollOut">rollOut</option>
</optgroup>
</select>
<button class="butt js--triggerAnimation">Animate it</button>
</p>
<hr />
<p class="meta"><a href="https://raw.github.com/daneden/animate.css/master/animate.css" download="animate.css">Download Animate.css</a> or <a href="//github.com/daneden/animate.css">View on GitHub</a></p>
<p><small>Want to thank <a href="//daneden.me">me</a> for this? <a href="mailto:dan.eden@me.com?cc=cash@square.com&subject=%242.99&body=Thanks%20for%20building%20Animate.css%21%20Have%20a%20coffee%20on%20me.">Buy me a coffee</a>.</small></p>
</div>
</main><!-- /.site__content -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function testAnim(x) {
$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd', function(){
$(this).removeClass();
});
};
$(document).ready(function(){
$('.js--triggerAnimation').click(function(){
var anim = $('.js--animations').val();
testAnim(anim);
});
});
</script>
</body>
</html>

12
package.json
View file

@ -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"
}
}

22
source/_base.css
View file

@ -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;
}

9
source/attention_seekers/bounce.css
View file

@ -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;
}

8
source/attention_seekers/flash.css
View file

@ -1,8 +0,0 @@
@keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
.flash {
animation-name: flash;
}

11
source/attention_seekers/pulse.css
View file

@ -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;
}

9
source/attention_seekers/shake.css
View file

@ -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;
}

12
source/attention_seekers/swing.css
View file

@ -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;
}

11
source/attention_seekers/tada.css
View file

@ -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;
}

15
source/attention_seekers/wobble.css
View file

@ -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;
}

23
source/bouncing_entrances/bounceIn.css
View file

@ -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;
}

23
source/bouncing_entrances/bounceInDown.css
View file

@ -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;
}

23
source/bouncing_entrances/bounceInLeft.css
View file

@ -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;
}

23
source/bouncing_entrances/bounceInRight.css
View file

@ -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;
}

23
source/bouncing_entrances/bounceInUp.css
View file

@ -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;
}

23
source/bouncing_exits/bounceOut.css
View file

@ -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;
}

19
source/bouncing_exits/bounceOutDown.css
View file

@ -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;
}

19
source/bouncing_exits/bounceOutLeft.css
View file

@ -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;
}

19
source/bouncing_exits/bounceOutRight.css
View file

@ -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;
}

19
source/bouncing_exits/bounceOutUp.css
View file

@ -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;
}

8
source/fading_entrances/fadeIn.css
View file

@ -1,8 +0,0 @@
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
animation-name: fadeIn;
}

15
source/fading_entrances/fadeInDown.css
View file

@ -1,15 +0,0 @@
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
animation-name: fadeInDown;
}

15
source/fading_entrances/fadeInDownBig.css
View file

@ -1,15 +0,0 @@
@keyframes fadeInDownBig {
0% {
opacity: 0;
transform: translateY(-2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDownBig {
animation-name: fadeInDownBig;
}

15
source/fading_entrances/fadeInLeft.css
View file

@ -1,15 +0,0 @@
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeft {
animation-name: fadeInLeft;
}

15
source/fading_entrances/fadeInLeftBig.css
View file

@ -1,15 +0,0 @@
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeftBig {
animation-name: fadeInLeftBig;
}

15
source/fading_entrances/fadeInRight.css
View file

@ -1,15 +0,0 @@
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRight {
animation-name: fadeInRight;
}

15
source/fading_entrances/fadeInRightBig.css
View file

@ -1,15 +0,0 @@
@keyframes fadeInRightBig {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRightBig {
animation-name: fadeInRightBig;
}

15
source/fading_entrances/fadeInUp.css
View file

@ -1,15 +0,0 @@
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
animation-name: fadeInUp;
}

15
source/fading_entrances/fadeInUpBig.css
View file

@ -1,15 +0,0 @@
@keyframes fadeInUpBig {
0% {
opacity: 0;
transform: translateY(2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUpBig {
animation-name: fadeInUpBig;
}

8
source/fading_exits/fadeOut.css
View file

@ -1,8 +0,0 @@
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
animation-name: fadeOut;
}

15
source/fading_exits/fadeOutDown.css
View file

@ -1,15 +0,0 @@
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.fadeOutDown {
animation-name: fadeOutDown;
}

15
source/fading_exits/fadeOutDownBig.css
View file

@ -1,15 +0,0 @@
@keyframes fadeOutDownBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.fadeOutDownBig {
animation-name: fadeOutDownBig;
}

15
source/fading_exits/fadeOutLeft.css
View file

@ -1,15 +0,0 @@
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
.fadeOutLeft {
animation-name: fadeOutLeft;
}

15
source/fading_exits/fadeOutLeftBig.css
View file

@ -1,15 +0,0 @@
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
animation-name: fadeOutLeftBig;
}

15
source/fading_exits/fadeOutRight.css
View file

@ -1,15 +0,0 @@
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
.fadeOutRight {
animation-name: fadeOutRight;
}

15
source/fading_exits/fadeOutRightBig.css
View file

@ -1,15 +0,0 @@
@keyframes fadeOutRightBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.fadeOutRightBig {
animation-name: fadeOutRightBig;
}

15
source/fading_exits/fadeOutUp.css
View file

@ -1,15 +0,0 @@
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.fadeOutUp {
animation-name: fadeOutUp;
}

15
source/fading_exits/fadeOutUpBig.css
View file

@ -1,15 +0,0 @@
@keyframes fadeOutUpBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.fadeOutUpBig {
animation-name: fadeOutUpBig;
}

27
source/flippers/flip.css
View file

@ -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;
}

24
source/flippers/flipInX.css
View file

@ -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;
}

24
source/flippers/flipInY.css
View file

@ -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;
}

15
source/flippers/flipOutX.css
View file

@ -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;
}

15
source/flippers/flipOutY.css
View file

@ -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;
}

11
source/lightspeed/lightSpeedIn.css
View file

@ -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;
}

10
source/lightspeed/lightSpeedOut.css
View file

@ -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;
}

17
source/rotating_entrances/rotateIn.css
View file

@ -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;
}

17
source/rotating_entrances/rotateInDownLeft.css
View file

@ -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;
}

17
source/rotating_entrances/rotateInDownRight.css
View file

@ -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;
}

17
source/rotating_entrances/rotateInUpLeft.css
View file

@ -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;
}

17
source/rotating_entrances/rotateInUpRight.css
View file

@ -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;
}

17
source/rotating_exits/rotateOut.css
View file

@ -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;
}

17
source/rotating_exits/rotateOutDownLeft.css
View file

@ -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;
}

17
source/rotating_exits/rotateOutDownRight.css
View file

@ -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;
}

17
source/rotating_exits/rotateOutUpLeft.css
View file

@ -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;
}

17
source/rotating_exits/rotateOutUpRight.css
View file

@ -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;
}

14
source/sliders/slideInDown.css
View file

@ -1,14 +0,0 @@
@keyframes slideInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
100% {
transform: translateY(0);
}
}
.slideInDown {
animation-name: slideInDown;
}

14
source/sliders/slideInLeft.css
View file

@ -1,14 +0,0 @@
@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
transform: translateX(0);
}
}
.slideInLeft {
animation-name: slideInLeft;
}

14
source/sliders/slideInRight.css
View file

@ -1,14 +0,0 @@
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
transform: translateX(0);
}
}
.slideInRight {
animation-name: slideInRight;
}

14
source/sliders/slideOutLeft.css
View file

@ -1,14 +0,0 @@
@keyframes slideOutLeft {
0% {
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.slideOutLeft {
animation-name: slideOutLeft;
}

14
source/sliders/slideOutRight.css
View file

@ -1,14 +0,0 @@
@keyframes slideOutRight {
0% {
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.slideOutRight {
animation-name: slideOutRight;
}

14
source/sliders/slideOutUp.css
View file

@ -1,14 +0,0 @@
@keyframes slideOutUp {
0% {
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.slideOutUp {
animation-name: slideOutUp;
}

11
source/specials/hinge.css
View file

@ -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;
}

10
source/specials/rollIn.css
View file

@ -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;
}

17
source/specials/rollOut.css
View file

@ -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;
}

214
style.css Normal file
View file

@ -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);
}
}