├── .travis.yml ├── features ├── support │ └── env.rb ├── version.feature ├── step_definitions │ └── saffron.rb ├── install.feature └── update.feature ├── lib ├── saffron │ ├── version.rb │ ├── engine.rb │ └── installer.rb └── saffron.rb ├── .gitignore ├── Gemfile ├── saffron ├── helpers │ ├── _animation.scss │ ├── _contains.scss │ ├── _transition.scss │ ├── _transform.scss │ ├── _keyframes.scss │ └── _prefix.scss ├── in-place │ ├── _expand.scss │ ├── _contract.scss │ ├── _enlarge.scss │ ├── _ping.scss │ ├── _spin.scss │ ├── _pulsate.scss │ ├── _sunrise.scss │ ├── _sway.scss │ ├── _square-dance.scss │ ├── _around-the-world.scss │ ├── _float.scss │ ├── _flip.scss │ ├── _colors.scss │ ├── _shake.scss │ ├── _bounce.scss │ ├── _teeter.scss │ ├── _quiver.scss │ └── _cube-flip.scss ├── entrances │ ├── _fade-in.scss │ ├── _rise-in.scss │ ├── _fade-in-up.scss │ ├── _pop-in.scss │ ├── _fade-in-right.scss │ ├── _fade-in-down.scss │ ├── _fade-in-left.scss │ ├── _fade-in-zoom.scss │ ├── _newspaper.scss │ ├── _fade-in-zoom-big.scss │ ├── _drop-in.scss │ ├── _slide-in.scss │ ├── _turn-in.scss │ └── _stretch.scss ├── exits │ ├── _fade-out.scss │ ├── _explode.scss │ ├── _fade-out-right.scss │ ├── _fade-out-zoom.scss │ ├── _fade-out-left.scss │ ├── _rise-out.scss │ ├── _fade-out-up.scss │ ├── _drop-out.scss │ ├── _fade-out-down.scss │ ├── _poof.scss │ ├── _fade-out-zoom-big.scss │ ├── _slide-out.scss │ ├── _compress.scss │ └── _turn-out.scss ├── _variables.scss └── saffron.scss ├── app └── assets │ └── stylesheets │ ├── helpers │ ├── _animation.scss │ ├── _contains.scss │ ├── _transition.scss │ ├── _transform.scss │ ├── _keyframes.scss │ └── _prefix.scss │ ├── in-place │ ├── _expand.scss │ ├── _contract.scss │ ├── _enlarge.scss │ ├── _ping.scss │ ├── _spin.scss │ ├── _pulsate.scss │ ├── _sunrise.scss │ ├── _sway.scss │ ├── _square-dance.scss │ ├── _around-the-world.scss │ ├── _float.scss │ ├── _flip.scss │ ├── _colors.scss │ ├── _shake.scss │ ├── _bounce.scss │ ├── _teeter.scss │ ├── _quiver.scss │ └── _cube-flip.scss │ ├── entrances │ ├── _fade-in.scss │ ├── _rise-in.scss │ ├── _fade-in-up.scss │ ├── _pop-in.scss │ ├── _fade-in-right.scss │ ├── _fade-in-down.scss │ ├── _fade-in-left.scss │ ├── _fade-in-zoom.scss │ ├── _newspaper.scss │ ├── _fade-in-zoom-big.scss │ ├── _drop-in.scss │ ├── _slide-in.scss │ ├── _turn-in.scss │ └── _stretch.scss │ ├── exits │ ├── _fade-out.scss │ ├── _explode.scss │ ├── _fade-out-right.scss │ ├── _fade-out-zoom.scss │ ├── _fade-out-left.scss │ ├── _rise-out.scss │ ├── _fade-out-up.scss │ ├── _drop-out.scss │ ├── _fade-out-down.scss │ ├── _poof.scss │ ├── _fade-out-zoom-big.scss │ ├── _slide-out.scss │ ├── _compress.scss │ └── _turn-out.scss │ ├── _variables.scss │ └── saffron.scss ├── sache.json ├── bin └── saffron ├── tasks ├── compiled │ ├── index.html │ └── saffron.css ├── test.scss ├── .csslintrc ├── package.json ├── Gruntfile.js └── .csscomb.json ├── Rakefile ├── bower.json ├── Gemfile.lock ├── MIT ├── saffron.gemspec └── README.md /.travis.yml: -------------------------------------------------------------------------------- 1 | language: ruby 2 | rvm: 3 | - 1.9.3 4 | -------------------------------------------------------------------------------- /features/support/env.rb: -------------------------------------------------------------------------------- 1 | require 'aruba/cucumber' 2 | -------------------------------------------------------------------------------- /lib/saffron/version.rb: -------------------------------------------------------------------------------- 1 | module Saffron 2 | VERSION = "0.2.3" 3 | end 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tasks/.sass-cache/ 3 | tasks/node_modules/ 4 | pkg/ 5 | tmp/ 6 | -------------------------------------------------------------------------------- /lib/saffron/engine.rb: -------------------------------------------------------------------------------- 1 | module Saffron 2 | class Engine < Rails::Engine 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # Specify your gem's dependencies in saffron.gemspec 4 | gemspec 5 | -------------------------------------------------------------------------------- /saffron/helpers/_animation.scss: -------------------------------------------------------------------------------- 1 | @mixin u-animation($properties...) { 2 | @include u-prefix(animation, $properties, webkit spec); 3 | } 4 | -------------------------------------------------------------------------------- /app/assets/stylesheets/helpers/_animation.scss: -------------------------------------------------------------------------------- 1 | @mixin u-animation($properties...) { 2 | @include u-prefix(animation, $properties, webkit spec); 3 | } 4 | -------------------------------------------------------------------------------- /saffron/helpers/_contains.scss: -------------------------------------------------------------------------------- 1 | // Thanks to @lunelson and @zaus 2 | @function u-contains($list, $var) { 3 | @return (false != index($list, $var)); 4 | } 5 | -------------------------------------------------------------------------------- /app/assets/stylesheets/helpers/_contains.scss: -------------------------------------------------------------------------------- 1 | // Thanks to @lunelson and @zaus 2 | @function u-contains($list, $var) { 3 | @return (false != index($list, $var)); 4 | } 5 | -------------------------------------------------------------------------------- /sache.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Saffron", 3 | "description": "A simple sass mixin library for animations and transitions", 4 | "tags": ["mixins", "animations", "transitions", "css3", "gem"] 5 | } 6 | -------------------------------------------------------------------------------- /bin/saffron: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | begin 4 | require File.dirname(__FILE__) + "/../lib/saffron" 5 | rescue LoadError 6 | require "saffron" 7 | end 8 | 9 | Saffron::Installer.start 10 | -------------------------------------------------------------------------------- /tasks/compiled/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Testing 6 | 7 | 8 | 9 |
Box
10 | 11 | 12 | -------------------------------------------------------------------------------- /tasks/test.scss: -------------------------------------------------------------------------------- 1 | @import "../saffron/saffron"; 2 | 3 | .box { 4 | height: 100px; 5 | width: 100px; 6 | margin: 0 auto; 7 | background: red; 8 | text-align: center; 9 | padding-left: 0; 10 | @include teeter(); 11 | &:hover { 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /saffron/helpers/_transition.scss: -------------------------------------------------------------------------------- 1 | @mixin u-transition ($properties...) { 2 | @if u-contains($saf-prefixes, "webkit") { 3 | @include u-prefix(transition, $properties, webkit spec); 4 | } @else { 5 | @include u-prefix(transition, $properties, spec); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /app/assets/stylesheets/helpers/_transition.scss: -------------------------------------------------------------------------------- 1 | @mixin u-transition ($properties...) { 2 | @if u-contains($saf-prefixes, "webkit") { 3 | @include u-prefix(transition, $properties, webkit spec); 4 | } @else { 5 | @include u-prefix(transition, $properties, spec); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /saffron/in-place/_expand.scss: -------------------------------------------------------------------------------- 1 | @mixin expand($direction, $amount: 1em, $selector: ":hover", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(0.680, -0.550, 0.275, 1.465)) { 2 | @include u-transition(padding-#{$direction} $duration $delay $timing); 3 | &#{$selector} { 4 | padding-#{$direction}: $amount; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_expand.scss: -------------------------------------------------------------------------------- 1 | @mixin expand($direction, $amount: 1em, $selector: ":hover", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(0.680, -0.550, 0.275, 1.465)) { 2 | @include u-transition(padding-#{$direction} $duration $delay $timing); 3 | &#{$selector} { 4 | padding-#{$direction}: $amount; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /saffron/entrances/_fade-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeIn) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @mixin fadeIn($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeIn $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /saffron/exits/_fade-out.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOut) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | } 9 | } 10 | 11 | @mixin fadeOut($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeOut $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /features/version.feature: -------------------------------------------------------------------------------- 1 | Feature: Output version 2 | As a user 3 | I want to know the current version of Saffron I have installed 4 | So I can keep it up to date 5 | 6 | Scenario: Viewing the current version of Saffron 7 | When I run `bundle exec saffron version` 8 | Then the output should contain the current version number 9 | 10 | -------------------------------------------------------------------------------- /saffron/in-place/_contract.scss: -------------------------------------------------------------------------------- 1 | @mixin contract($selector: ":hover", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(1.000, -0.600, 0.595, 0.835)) { 2 | @include u-transition(all $duration $delay $timing); 3 | &#{$selector} { 4 | @include u-transform(translateY($saf-enlarge-contract-jump) scale(1 / $saf-enlarge-contract-multiple)); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /saffron/in-place/_enlarge.scss: -------------------------------------------------------------------------------- 1 | @mixin enlarge($selector: ":hover", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(1.000, -0.600, 0.595, 0.835)) { 2 | @include u-transition(all $duration $delay $timing); 3 | &#{$selector} { 4 | @include u-transform(translateY($saf-enlarge-contract-jump * -1) scale($saf-enlarge-contract-multiple)); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /lib/saffron.rb: -------------------------------------------------------------------------------- 1 | require "saffron/installer" 2 | require "sass" unless defined? Sass 3 | 4 | module Saffron 5 | if defined?(Rails) && defined?(Rails::Engine) 6 | class Engine < ::Rails::Engine 7 | require "saffron/engine" 8 | end 9 | else 10 | Sass.load_paths << File.expand_path("../saffron", __FILE__) 11 | end 12 | end 13 | 14 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_fade-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeIn) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @mixin fadeIn($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeIn $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_fade-out.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOut) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | } 9 | } 10 | 11 | @mixin fadeOut($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeOut $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_contract.scss: -------------------------------------------------------------------------------- 1 | @mixin contract($selector: ":hover", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(1.000, -0.600, 0.595, 0.835)) { 2 | @include u-transition(all $duration $delay $timing); 3 | &#{$selector} { 4 | @include u-transform(translateY($saf-enlarge-contract-jump) scale(1 / $saf-enlarge-contract-multiple)); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_enlarge.scss: -------------------------------------------------------------------------------- 1 | @mixin enlarge($selector: ":hover", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(1.000, -0.600, 0.595, 0.835)) { 2 | @include u-transition(all $duration $delay $timing); 3 | &#{$selector} { 4 | @include u-transform(translateY($saf-enlarge-contract-jump * -1) scale($saf-enlarge-contract-multiple)); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /saffron/entrances/_rise-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(riseIn) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateY($saf-drop-rise-distance) translateZ(0)); 5 | } 6 | 50% { 7 | opacity: 1 8 | } 9 | } 10 | 11 | @mixin riseIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(riseIn $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /saffron/exits/_explode.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(explode) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(scale(5)); 9 | } 10 | } 11 | 12 | @mixin explode($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(explode $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /saffron/entrances/_fade-in-up.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInUp) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateY($saf-translateY-distance) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @mixin fadeInUp($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeInUp $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_rise-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(riseIn) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateY($saf-drop-rise-distance) translateZ(0)); 5 | } 6 | 50% { 7 | opacity: 1 8 | } 9 | } 10 | 11 | @mixin riseIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(riseIn $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /saffron/entrances/_pop-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(popIn) { 2 | 0% { 3 | @include u-transform(scale(0.25) translateZ(0)); 4 | opacity: 0; 5 | } 6 | 100% { 7 | opacity: 1; 8 | @include u-transform(scale(1)); 9 | } 10 | } 11 | 12 | @mixin popIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(popIn $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require "bundler/gem_tasks" 2 | require "cucumber/rake/task" 3 | 4 | namespace :test do 5 | desc "Runs aruba tests" 6 | 7 | Cucumber::Rake::Task.new(:tests) do |t| 8 | t.cucumber_opts = "--format progress" 9 | end 10 | 11 | Cucumber::Rake::Task.new(:features) do |t| 12 | t.cucumber_opts = "--format pretty" 13 | end 14 | end 15 | 16 | task :default => "test:tests" 17 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_explode.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(explode) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(scale(5)); 9 | } 10 | } 11 | 12 | @mixin explode($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(explode $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /saffron/entrances/_fade-in-right.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInRight) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateX($saf-translateX-distance) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @mixin fadeInRight($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeInRight $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /saffron/exits/_fade-out-right.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutRight) { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 100% { 6 | opacity: 0; 7 | @include u-transform(translateX($saf-translateX-distance) translateZ(0)); 8 | } 9 | } 10 | 11 | @mixin fadeOutRight($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeOutRight $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /saffron/exits/_fade-out-zoom.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutZoom) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(scale(0)); 9 | } 10 | } 11 | 12 | @mixin fadeOutZoom($duration: 1s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(fadeOutZoom $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /saffron/in-place/_ping.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(ping) { 2 | 0% { 3 | @include u-transform(scale(0)); 4 | } 5 | 100% { 6 | @include u-transform(scale(1)); 7 | opacity: 0; 8 | } 9 | } 10 | 11 | @mixin ping($duration: 1.5s, $delay: 0s, $fill-mode: none, $count: infinite, $timing: ease-in-out) { 12 | @include u-animation(ping $count $duration $delay $fill-mode $timing); 13 | } 14 | -------------------------------------------------------------------------------- /saffron/in-place/_spin.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(spin) { 2 | 0% { 3 | @include u-transform(rotate(0deg) translateZ(0)); 4 | } 5 | 100% { 6 | @include u-transform(rotate(360deg)); 7 | } 8 | } 9 | 10 | @mixin spin($duration: 0.5s, $delay: 0s, $fill-mode: none, $count: 1, $timing: ease-in-out) { 11 | @include u-animation(spin $count $duration $delay $fill-mode $timing); 12 | } 13 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_fade-in-up.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInUp) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateY($saf-translateY-distance) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @mixin fadeInUp($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeInUp $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /saffron/entrances/_fade-in-down.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInDown) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateY($saf-translateY-distance * -1) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @mixin fadeInDown($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeInDown $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /saffron/entrances/_fade-in-left.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInLeft) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateX($saf-translateX-distance * -1) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @mixin fadeInLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeInLeft $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /saffron/exits/_fade-out-left.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutLeft) { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 100% { 6 | opacity: 0; 7 | @include u-transform(translateX($saf-translateX-distance * -1) translateZ(0)); 8 | } 9 | } 10 | 11 | @mixin fadeOutLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeOutLeft $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_pop-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(popIn) { 2 | 0% { 3 | @include u-transform(scale(0.25) translateZ(0)); 4 | opacity: 0; 5 | } 6 | 100% { 7 | opacity: 1; 8 | @include u-transform(scale(1)); 9 | } 10 | } 11 | 12 | @mixin popIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(popIn $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /saffron/entrances/_fade-in-zoom.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInZoom) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(scale(0) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | @include u-transform(scale(1)); 9 | } 10 | } 11 | 12 | @mixin fadeInZoom($duration: 1s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(fadeInZoom $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_fade-in-right.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInRight) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateX($saf-translateX-distance) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @mixin fadeInRight($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeInRight $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_fade-out-right.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutRight) { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 100% { 6 | opacity: 0; 7 | @include u-transform(translateX($saf-translateX-distance) translateZ(0)); 8 | } 9 | } 10 | 11 | @mixin fadeOutRight($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeOutRight $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_fade-out-zoom.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutZoom) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(scale(0)); 9 | } 10 | } 11 | 12 | @mixin fadeOutZoom($duration: 1s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(fadeOutZoom $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_ping.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(ping) { 2 | 0% { 3 | @include u-transform(scale(0)); 4 | } 5 | 100% { 6 | @include u-transform(scale(1)); 7 | opacity: 0; 8 | } 9 | } 10 | 11 | @mixin ping($duration: 1.5s, $delay: 0s, $fill-mode: none, $count: infinite, $timing: ease-in-out) { 12 | @include u-animation(ping $count $duration $delay $fill-mode $timing); 13 | } 14 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_spin.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(spin) { 2 | 0% { 3 | @include u-transform(rotate(0deg) translateZ(0)); 4 | } 5 | 100% { 6 | @include u-transform(rotate(360deg)); 7 | } 8 | } 9 | 10 | @mixin spin($duration: 0.5s, $delay: 0s, $fill-mode: none, $count: 1, $timing: ease-in-out) { 11 | @include u-animation(spin $count $duration $delay $fill-mode $timing); 12 | } 13 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_fade-in-down.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInDown) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateY($saf-translateY-distance * -1) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @mixin fadeInDown($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeInDown $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_fade-in-left.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInLeft) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateX($saf-translateX-distance * -1) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @mixin fadeInLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeInLeft $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_fade-out-left.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutLeft) { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 100% { 6 | opacity: 0; 7 | @include u-transform(translateX($saf-translateX-distance * -1) translateZ(0)); 8 | } 9 | } 10 | 11 | @mixin fadeOutLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) { 12 | @include u-animation(fadeOutLeft $duration $delay $fill-mode); 13 | } 14 | -------------------------------------------------------------------------------- /saffron/exits/_rise-out.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(riseOut) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(translateY($saf-drop-rise-distance * -1)); 9 | } 10 | } 11 | 12 | @mixin riseOut($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(riseOut $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_fade-in-zoom.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInZoom) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(scale(0) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | @include u-transform(scale(1)); 9 | } 10 | } 11 | 12 | @mixin fadeInZoom($duration: 1s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(fadeInZoom $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /saffron/exits/_fade-out-up.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutUp) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(translateY($saf-translateY-distance * -1)); 9 | } 10 | } 11 | 12 | @mixin fadeOutUp($duration: 1s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(fadeOutUp $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /saffron/helpers/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin u-transform($property: none) { 2 | @if u-contains($saf-prefixes, "webkit") and u-contains($saf-prefixes, "ms") { 3 | @include u-prefix(transform, $property, webkit ms spec); 4 | } @else if u-contains($saf-prefixes, "webkit") { 5 | @include u-prefix(transform, $property, webkit spec); 6 | } @else { 7 | @include u-prefix(transform, $property, spec); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /saffron/exits/_drop-out.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(dropOut) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(translateY($saf-drop-rise-distance) rotate(-40deg)); 9 | } 10 | } 11 | 12 | @mixin dropOut($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(dropOut $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /saffron/exits/_fade-out-down.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutDown) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(translateY($saf-translateY-distance)); 9 | } 10 | } 11 | 12 | @mixin fadeOutDown($duration: 1s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(fadeOutDown $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_rise-out.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(riseOut) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(translateY($saf-drop-rise-distance * -1)); 9 | } 10 | } 11 | 12 | @mixin riseOut($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(riseOut $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /saffron/in-place/_pulsate.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(pulsate) { 2 | 0%, 100% { 3 | opacity: 1; 4 | @include u-transform(scale(1) translateZ(0)); 5 | } 6 | 50% { 7 | opacity: 0.85; 8 | @include u-transform(scale($saf-pulsate-scale)); 9 | } 10 | } 11 | 12 | @mixin pulsate($duration: 1.5s, $delay: 0s, $fill-mode: none, $count: 3) { 13 | @include u-animation(pulsate $count $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_fade-out-up.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutUp) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(translateY($saf-translateY-distance * -1)); 9 | } 10 | } 11 | 12 | @mixin fadeOutUp($duration: 1s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(fadeOutUp $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /app/assets/stylesheets/helpers/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin u-transform($property: none) { 2 | @if u-contains($saf-prefixes, "webkit") and u-contains($saf-prefixes, "ms") { 3 | @include u-prefix(transform, $property, webkit ms spec); 4 | } @else if u-contains($saf-prefixes, "webkit") { 5 | @include u-prefix(transform, $property, webkit spec); 6 | } @else { 7 | @include u-prefix(transform, $property, spec); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_drop-out.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(dropOut) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(translateY($saf-drop-rise-distance) rotate(-40deg)); 9 | } 10 | } 11 | 12 | @mixin dropOut($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(dropOut $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_fade-out-down.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutDown) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(translateY($saf-translateY-distance)); 9 | } 10 | } 11 | 12 | @mixin fadeOutDown($duration: 1s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(fadeOutDown $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /saffron/exits/_poof.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(poof) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(scale(1)); 5 | -webkit-filter: blur(0); 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | @include u-transform(scale(2)); 11 | -webkit-filter: blur(40px); 12 | } 13 | } 14 | 15 | @mixin poof($duration: 0.85s, $delay: 0s, $fill-mode: forwards) { 16 | @include u-animation(poof $duration $delay $fill-mode); 17 | } 18 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_pulsate.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(pulsate) { 2 | 0%, 100% { 3 | opacity: 1; 4 | @include u-transform(scale(1) translateZ(0)); 5 | } 6 | 50% { 7 | opacity: 0.85; 8 | @include u-transform(scale($saf-pulsate-scale)); 9 | } 10 | } 11 | 12 | @mixin pulsate($duration: 1.5s, $delay: 0s, $fill-mode: none, $count: 3) { 13 | @include u-animation(pulsate $count $duration $delay $fill-mode); 14 | } 15 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_poof.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(poof) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(scale(1)); 5 | -webkit-filter: blur(0); 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | @include u-transform(scale(2)); 11 | -webkit-filter: blur(40px); 12 | } 13 | } 14 | 15 | @mixin poof($duration: 0.85s, $delay: 0s, $fill-mode: forwards) { 16 | @include u-animation(poof $duration $delay $fill-mode); 17 | } 18 | -------------------------------------------------------------------------------- /saffron/entrances/_newspaper.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(newspaper) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(rotate(720deg) scale(0.33) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | @include u-transform(rotate(0deg) scale(1)); 9 | } 10 | } 11 | 12 | @mixin newspaper($duration: 1s, $delay: 0s, $fill-mode: both, $count: 1, $timing: ease-in-out) { 13 | @include u-animation(newspaper $count $duration $delay $fill-mode $timing); 14 | } 15 | -------------------------------------------------------------------------------- /saffron/in-place/_sunrise.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(sunrise) { 2 | 0% { 3 | @include u-transform(rotate(0deg) translate($saf-sunrise-arch) rotate(0deg)); 4 | } 5 | 100% { 6 | @include u-transform(rotate(180deg) translate($saf-sunrise-arch) rotate(-180deg)); 7 | } 8 | } 9 | 10 | @mixin sunrise($duration: 4s, $delay: 0s, $fill-mode: both, $count: 1, $timing: ease-in-out) { 11 | @include u-animation(sunrise $count $duration $delay $fill-mode $timing); 12 | } 13 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_newspaper.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(newspaper) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(rotate(720deg) scale(0.33) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | @include u-transform(rotate(0deg) scale(1)); 9 | } 10 | } 11 | 12 | @mixin newspaper($duration: 1s, $delay: 0s, $fill-mode: both, $count: 1, $timing: ease-in-out) { 13 | @include u-animation(newspaper $count $duration $delay $fill-mode $timing); 14 | } 15 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_sunrise.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(sunrise) { 2 | 0% { 3 | @include u-transform(rotate(0deg) translate($saf-sunrise-arch) rotate(0deg)); 4 | } 5 | 100% { 6 | @include u-transform(rotate(180deg) translate($saf-sunrise-arch) rotate(-180deg)); 7 | } 8 | } 9 | 10 | @mixin sunrise($duration: 4s, $delay: 0s, $fill-mode: both, $count: 1, $timing: ease-in-out) { 11 | @include u-animation(sunrise $count $duration $delay $fill-mode $timing); 12 | } 13 | -------------------------------------------------------------------------------- /saffron/exits/_fade-out-zoom-big.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutZoomBig) { 2 | 0% { 3 | @include u-transform(scale(1) translateZ(0)); 4 | } 5 | 40% { 6 | @include u-transform(scale(1.25)); 7 | } 8 | 60% { 9 | opacity: 1; 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include u-transform(scale(0)); 14 | } 15 | } 16 | 17 | @mixin fadeOutZoomBig($duration: 1s, $delay: 0s, $fill-mode: forwards) { 18 | @include u-animation(fadeOutZoomBig $duration $delay $fill-mode); 19 | } 20 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_fade-out-zoom-big.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeOutZoomBig) { 2 | 0% { 3 | @include u-transform(scale(1) translateZ(0)); 4 | } 5 | 40% { 6 | @include u-transform(scale(1.25)); 7 | } 8 | 60% { 9 | opacity: 1; 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include u-transform(scale(0)); 14 | } 15 | } 16 | 17 | @mixin fadeOutZoomBig($duration: 1s, $delay: 0s, $fill-mode: forwards) { 18 | @include u-animation(fadeOutZoomBig $duration $delay $fill-mode); 19 | } 20 | -------------------------------------------------------------------------------- /saffron/entrances/_fade-in-zoom-big.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInZoomBig) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(scale(0)); 5 | } 6 | 60% { 7 | @include u-transform(scale(1.25)); 8 | } 9 | 80% { 10 | @include u-transform(scale(0.95)); 11 | } 12 | 100% { 13 | opacity: 1; 14 | @include u-transform(scale(1)); 15 | } 16 | } 17 | 18 | @mixin fadeInZoomBig($duration: 1s, $delay: 0s, $fill-mode: forwards) { 19 | @include u-animation(fadeInZoomBig $duration $delay $fill-mode); 20 | } 21 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_fade-in-zoom-big.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(fadeInZoomBig) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(scale(0)); 5 | } 6 | 60% { 7 | @include u-transform(scale(1.25)); 8 | } 9 | 80% { 10 | @include u-transform(scale(0.95)); 11 | } 12 | 100% { 13 | opacity: 1; 14 | @include u-transform(scale(1)); 15 | } 16 | } 17 | 18 | @mixin fadeInZoomBig($duration: 1s, $delay: 0s, $fill-mode: forwards) { 19 | @include u-animation(fadeInZoomBig $duration $delay $fill-mode); 20 | } 21 | -------------------------------------------------------------------------------- /tasks/.csslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "adjoining-classes": false, 3 | "box-sizing": false, 4 | "box-model": false, 5 | "compatible-vendor-prefixes": false, 6 | "floats": false, 7 | "font-sizes": false, 8 | "gradients": false, 9 | "important": false, 10 | "known-properties": false, 11 | "outline-none": false, 12 | "qualified-headings": false, 13 | "regex-selectors": false, 14 | "shorthand": false, 15 | "text-indent": false, 16 | "unique-headings": false, 17 | "universal-selector": false, 18 | "unqualified-attributes": false 19 | } 20 | -------------------------------------------------------------------------------- /saffron/entrances/_drop-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(dropIn) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateY($saf-drop-rise-distance * -1) rotate(0) translateZ(0)); 5 | } 6 | 10% { 7 | @include u-transform(translateY($saf-drop-rise-distance * -1) rotate(-40deg)); 8 | } 9 | 90% { 10 | opacity: 1; 11 | } 12 | 100% { 13 | @include u-transform(translateY(0) rotate(0)); 14 | } 15 | } 16 | 17 | @mixin dropIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 18 | @include u-animation(dropIn $duration $delay $fill-mode); 19 | } 20 | -------------------------------------------------------------------------------- /saffron/in-place/_sway.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(sway) { 2 | 0%, 50%, 100% { 3 | @include u-transform(rotate($saf-sway-angle) translateZ(0)); 4 | } 5 | 25% { 6 | @include u-transform(rotate($saf-sway-angle * -1)); 7 | } 8 | 75% { 9 | @include u-transform(rotate($saf-sway-angle * -1)); 10 | } 11 | } 12 | 13 | @mixin sway($duration: 6.5s, $delay: 0s, $fill-mode: none, $count: infinite, $timing: ease-in-out) { 14 | // hack to fix jagged edges 15 | outline: 1px solid transparent; 16 | @include u-animation(sway $count $duration $delay $fill-mode $timing); 17 | } 18 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_drop-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(dropIn) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateY($saf-drop-rise-distance * -1) rotate(0) translateZ(0)); 5 | } 6 | 10% { 7 | @include u-transform(translateY($saf-drop-rise-distance * -1) rotate(-40deg)); 8 | } 9 | 90% { 10 | opacity: 1; 11 | } 12 | 100% { 13 | @include u-transform(translateY(0) rotate(0)); 14 | } 15 | } 16 | 17 | @mixin dropIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) { 18 | @include u-animation(dropIn $duration $delay $fill-mode); 19 | } 20 | -------------------------------------------------------------------------------- /saffron/in-place/_square-dance.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(squareDance) { 2 | 0%, 100% { 3 | @include u-transform(translate3d(100%, 0, 0)); 4 | } 5 | 25% { 6 | @include u-transform(translate3d(100%, 100%, 0)); 7 | } 8 | 50% { 9 | @include u-transform(translate3d(0, 100%, 0)); 10 | } 11 | 75% { 12 | @include u-transform(translate3d(0, 0, 0)); 13 | } 14 | } 15 | 16 | @mixin squareDance($duration: 3s, $delay: 0s, $fill-mode: none, $count: infinite, $timing: ease-in-out) { 17 | @include u-animation(squareDance $count $duration $delay $fill-mode $timing); 18 | } 19 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_sway.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(sway) { 2 | 0%, 50%, 100% { 3 | @include u-transform(rotate($saf-sway-angle) translateZ(0)); 4 | } 5 | 25% { 6 | @include u-transform(rotate($saf-sway-angle * -1)); 7 | } 8 | 75% { 9 | @include u-transform(rotate($saf-sway-angle * -1)); 10 | } 11 | } 12 | 13 | @mixin sway($duration: 6.5s, $delay: 0s, $fill-mode: none, $count: infinite, $timing: ease-in-out) { 14 | // hack to fix jagged edges 15 | outline: 1px solid transparent; 16 | @include u-animation(sway $count $duration $delay $fill-mode $timing); 17 | } 18 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_square-dance.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(squareDance) { 2 | 0%, 100% { 3 | @include u-transform(translate3d(100%, 0, 0)); 4 | } 5 | 25% { 6 | @include u-transform(translate3d(100%, 100%, 0)); 7 | } 8 | 50% { 9 | @include u-transform(translate3d(0, 100%, 0)); 10 | } 11 | 75% { 12 | @include u-transform(translate3d(0, 0, 0)); 13 | } 14 | } 15 | 16 | @mixin squareDance($duration: 3s, $delay: 0s, $fill-mode: none, $count: infinite, $timing: ease-in-out) { 17 | @include u-animation(squareDance $count $duration $delay $fill-mode $timing); 18 | } 19 | -------------------------------------------------------------------------------- /saffron/in-place/_around-the-world.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(aroundTheWorld) { 2 | 0% { 3 | @include u-transform(rotate(0deg) translate3d($saf-distance-from-origin * -1, $saf-distance-from-origin * -1, 0) rotate(0deg)); 4 | } 5 | 100% { 6 | @include u-transform(rotate(360deg) translate3d($saf-distance-from-origin * -1, $saf-distance-from-origin * -1, 0) rotate(-360deg)); 7 | } 8 | } 9 | 10 | @mixin aroundTheWorld($duration: 2s, $delay: 0s, $fill-mode: none, $count: infinite, $timing: ease-in-out) { 11 | @include u-animation(aroundTheWorld $count $duration $delay $fill-mode $timing); 12 | } 13 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_around-the-world.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(aroundTheWorld) { 2 | 0% { 3 | @include u-transform(rotate(0deg) translate3d($saf-distance-from-origin * -1, $saf-distance-from-origin * -1, 0) rotate(0deg)); 4 | } 5 | 100% { 6 | @include u-transform(rotate(360deg) translate3d($saf-distance-from-origin * -1, $saf-distance-from-origin * -1, 0) rotate(-360deg)); 7 | } 8 | } 9 | 10 | @mixin aroundTheWorld($duration: 2s, $delay: 0s, $fill-mode: none, $count: infinite, $timing: ease-in-out) { 11 | @include u-animation(aroundTheWorld $count $duration $delay $fill-mode $timing); 12 | } 13 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "saffron", 3 | "version": "0.2.3", 4 | "homepage": "https://github.com/corporadobob/saffron", 5 | "authors": [ 6 | "JC " 7 | ], 8 | "description": "A simple sass mixin library for animations and transitions.", 9 | "main": "saffron/saffron.scss", 10 | "keywords": [ 11 | "sass", 12 | "animations" 13 | ], 14 | "license": "MIT", 15 | "ignore": [ 16 | "**/.*", 17 | "node_modules", 18 | "bower_components", 19 | "app", 20 | "bin", 21 | "features", 22 | "lib", 23 | "tasks", 24 | "Gemfile", 25 | "Gemfile.lock", 26 | "Rakefile", 27 | "saffron.gemspec" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /saffron/in-place/_float.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(float) { 2 | 0%, 50%, 100% { 3 | @include u-transform(translateY($saf-float-bob-distance * -1) translateZ(0)); 4 | } 5 | 25% { 6 | @include u-transform(translateY($saf-float-bob-distance) rotate($saf-float-bob-angle)); 7 | } 8 | 75% { 9 | @include u-transform(translateY($saf-float-bob-distance) rotate($saf-float-bob-angle * -1)); 10 | } 11 | } 12 | 13 | @mixin float($duration: 5s, $delay: 0s, $fill-mode: none, $count: infinite, $timing: ease-in-out) { 14 | // hack to fix jagged edges 15 | outline: 1px solid transparent; 16 | @include u-animation(float $count $duration $delay $fill-mode $timing); 17 | } 18 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_float.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(float) { 2 | 0%, 50%, 100% { 3 | @include u-transform(translateY($saf-float-bob-distance * -1) translateZ(0)); 4 | } 5 | 25% { 6 | @include u-transform(translateY($saf-float-bob-distance) rotate($saf-float-bob-angle)); 7 | } 8 | 75% { 9 | @include u-transform(translateY($saf-float-bob-distance) rotate($saf-float-bob-angle * -1)); 10 | } 11 | } 12 | 13 | @mixin float($duration: 5s, $delay: 0s, $fill-mode: none, $count: infinite, $timing: ease-in-out) { 14 | // hack to fix jagged edges 15 | outline: 1px solid transparent; 16 | @include u-animation(float $count $duration $delay $fill-mode $timing); 17 | } 18 | -------------------------------------------------------------------------------- /saffron/in-place/_flip.scss: -------------------------------------------------------------------------------- 1 | @mixin flip($selector: ".flipped", $duration: 0.5s, $delay: 0s, $fill-mode: both, $count: 1, $timing: ease-in) { 2 | position: relative; 3 | @include u-prefix(transform-style, preserve-3d, webkit spec); 4 | @include u-transition(all $duration $delay $timing); 5 | @include u-prefix(backface-visibility, hidden, webkit moz spec); 6 | &#{$selector} { 7 | @include u-transform(rotateY(180deg)translateZ(0)); 8 | } 9 | &::after { 10 | content: ''; 11 | position: absolute; 12 | left: 0; 13 | height: 100%; 14 | width: 100%; 15 | @include u-prefix(backface-visibility, inherit, webkit moz spec); 16 | @include u-transform(rotateY(180deg)); 17 | } 18 | } 19 | 20 | -------------------------------------------------------------------------------- /saffron/helpers/_keyframes.scss: -------------------------------------------------------------------------------- 1 | @mixin u-keyframes($name) { 2 | @each $prefix in $saf-prefixes { 3 | @if $prefix == "webkit" { 4 | @-webkit-keyframes #{$name} { 5 | @include u-prefix-only($prefix); 6 | @content; 7 | } 8 | } @else if $prefix == "moz" { 9 | @-moz-keyframes #{$name} { 10 | @include u-prefix-only($prefix); 11 | @content; 12 | } 13 | } @else if $prefix == "o" { 14 | @-o-keyframes #{$name} { 15 | @include u-prefix-only($prefix); 16 | @content; 17 | } 18 | } @else if $prefix == "spec" { 19 | @keyframes #{$name} { 20 | @include u-prefix-all(); 21 | @content; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_flip.scss: -------------------------------------------------------------------------------- 1 | @mixin flip($selector: ".flipped", $duration: 0.5s, $delay: 0s, $fill-mode: both, $count: 1, $timing: ease-in) { 2 | position: relative; 3 | @include u-prefix(transform-style, preserve-3d, webkit spec); 4 | @include u-transition(all $duration $delay $timing); 5 | @include u-prefix(backface-visibility, hidden, webkit moz spec); 6 | &#{$selector} { 7 | @include u-transform(rotateY(180deg)translateZ(0)); 8 | } 9 | &::after { 10 | content: ''; 11 | position: absolute; 12 | left: 0; 13 | height: 100%; 14 | width: 100%; 15 | @include u-prefix(backface-visibility, inherit, webkit moz spec); 16 | @include u-transform(rotateY(180deg)); 17 | } 18 | } 19 | 20 | -------------------------------------------------------------------------------- /saffron/in-place/_colors.scss: -------------------------------------------------------------------------------- 1 | @mixin backgroundColor($from, $to, $selector: ":hover", $duration: 1.5s, $delay: 0s) { 2 | background-color: $from; 3 | @include u-transition(background-color $duration $delay); 4 | &#{$selector} { 5 | background-color: $to; 6 | } 7 | } 8 | 9 | @mixin borderColor($from, $to, $selector: ":hover", $duration: 1.5s, $delay: 0s) { 10 | border-color: $from; 11 | @include u-transition(border-color $duration $delay); 12 | &#{$selector} { 13 | border-color: $to; 14 | } 15 | } 16 | 17 | @mixin color($from, $to, $selector: ":hover", $duration: 1.5s, $delay: 0s) { 18 | color: $from; 19 | @include u-transition(color $duration $delay); 20 | &#{$selector} { 21 | color: $to; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /app/assets/stylesheets/helpers/_keyframes.scss: -------------------------------------------------------------------------------- 1 | @mixin u-keyframes($name) { 2 | @each $prefix in $saf-prefixes { 3 | @if $prefix == "webkit" { 4 | @-webkit-keyframes #{$name} { 5 | @include u-prefix-only($prefix); 6 | @content; 7 | } 8 | } @else if $prefix == "moz" { 9 | @-moz-keyframes #{$name} { 10 | @include u-prefix-only($prefix); 11 | @content; 12 | } 13 | } @else if $prefix == "o" { 14 | @-o-keyframes #{$name} { 15 | @include u-prefix-only($prefix); 16 | @content; 17 | } 18 | } @else if $prefix == "spec" { 19 | @keyframes #{$name} { 20 | @include u-prefix-all(); 21 | @content; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /saffron/in-place/_shake.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(shake) { 2 | 0%, 100% { 3 | @include u-transform(translateX(0) translateZ(0)); 4 | } 5 | 15% { 6 | @include u-transform(translateX($saf-shake-distance)); 7 | } 8 | 35% { 9 | @include u-transform(translateX($saf-shake-distance * -1)); 10 | } 11 | 50% { 12 | @include u-transform(translateX($saf-shake-distance / 2)); 13 | } 14 | 65% { 15 | @include u-transform(translateX($saf-shake-distance / 2 * -1)); 16 | } 17 | 85% { 18 | @include u-transform(translateX($saf-shake-distance / 3)); 19 | } 20 | } 21 | 22 | @mixin shake($duration: 0.5s, $delay: 0s, $fill-mode: none, $count: 1) { 23 | @include u-animation(shake $duration $delay $fill-mode $count); 24 | } 25 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_colors.scss: -------------------------------------------------------------------------------- 1 | @mixin backgroundColor($from, $to, $selector: ":hover", $duration: 1.5s, $delay: 0s) { 2 | background-color: $from; 3 | @include u-transition(background-color $duration $delay); 4 | &#{$selector} { 5 | background-color: $to; 6 | } 7 | } 8 | 9 | @mixin borderColor($from, $to, $selector: ":hover", $duration: 1.5s, $delay: 0s) { 10 | border-color: $from; 11 | @include u-transition(border-color $duration $delay); 12 | &#{$selector} { 13 | border-color: $to; 14 | } 15 | } 16 | 17 | @mixin color($from, $to, $selector: ":hover", $duration: 1.5s, $delay: 0s) { 18 | color: $from; 19 | @include u-transition(color $duration $delay); 20 | &#{$selector} { 21 | color: $to; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_shake.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(shake) { 2 | 0%, 100% { 3 | @include u-transform(translateX(0) translateZ(0)); 4 | } 5 | 15% { 6 | @include u-transform(translateX($saf-shake-distance)); 7 | } 8 | 35% { 9 | @include u-transform(translateX($saf-shake-distance * -1)); 10 | } 11 | 50% { 12 | @include u-transform(translateX($saf-shake-distance / 2)); 13 | } 14 | 65% { 15 | @include u-transform(translateX($saf-shake-distance / 2 * -1)); 16 | } 17 | 85% { 18 | @include u-transform(translateX($saf-shake-distance / 3)); 19 | } 20 | } 21 | 22 | @mixin shake($duration: 0.5s, $delay: 0s, $fill-mode: none, $count: 1) { 23 | @include u-animation(shake $duration $delay $fill-mode $count); 24 | } 25 | -------------------------------------------------------------------------------- /saffron/in-place/_bounce.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(bounce) { 2 | 0%, 85%, 100% { 3 | @include u-transform(translateY(0) scaleY(1) scaleX(1) translateZ(0)); 4 | } 5 | 25% { 6 | @include u-transform(translateY(-1.35rem) scaleY(1.02) scaleX(0.98)); 7 | } 8 | 35% { 9 | @include u-transform(translateY(0) scaleY(0.98) scaleX(1.02)); 10 | } 11 | 50% { 12 | @include u-transform(translateY(-1rem) scaleY(1.01) scaleX(0.99)); 13 | } 14 | 60% { 15 | @include u-transform(translateY(0) scaleY(0.99) scaleX(1.01)); 16 | } 17 | 75% { 18 | @include u-transform(translateY(-0.05rem)); 19 | } 20 | } 21 | 22 | @mixin bounce($duration: 1s, $delay: 0s, $count: 1, $fill-mode: none) { 23 | @include u-animation(bounce $count $duration $delay $fill-mode); 24 | } 25 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_bounce.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(bounce) { 2 | 0%, 85%, 100% { 3 | @include u-transform(translateY(0) scaleY(1) scaleX(1) translateZ(0)); 4 | } 5 | 25% { 6 | @include u-transform(translateY(-1.35rem) scaleY(1.02) scaleX(0.98)); 7 | } 8 | 35% { 9 | @include u-transform(translateY(0) scaleY(0.98) scaleX(1.02)); 10 | } 11 | 50% { 12 | @include u-transform(translateY(-1rem) scaleY(1.01) scaleX(0.99)); 13 | } 14 | 60% { 15 | @include u-transform(translateY(0) scaleY(0.99) scaleX(1.01)); 16 | } 17 | 75% { 18 | @include u-transform(translateY(-0.05rem)); 19 | } 20 | } 21 | 22 | @mixin bounce($duration: 1s, $delay: 0s, $count: 1, $fill-mode: none) { 23 | @include u-animation(bounce $count $duration $delay $fill-mode); 24 | } 25 | -------------------------------------------------------------------------------- /saffron/_variables.scss: -------------------------------------------------------------------------------- 1 | $saf-prefixes: ("webkit", "moz", "o", "ms", "spec") !default; 2 | $saf-translateY-distance: 1.334em !default; 3 | $saf-translateX-distance: 1.334em !default; 4 | $saf-drop-rise-distance: 10em !default; 5 | $saf-shake-distance: 0.55em !default; 6 | $saf-teeter-angle: 10deg !default; 7 | $saf-quiver-angle: 2deg !default; 8 | $saf-float-bob-distance: 0.25em !default; 9 | $saf-float-bob-angle: 1deg !default; 10 | $saf-sway-angle: 3deg !default; 11 | $saf-turn-angle: 225deg !default; 12 | $saf-pulsate-scale: 1.1 !default; 13 | $saf-stretch-compress-exageration: 1.05 !default; 14 | $saf-distance-from-origin: 5em !default; 15 | $saf-sunrise-arch: -15em !default; 16 | $saf-enlarge-contract-multiple: 1.15 !default; 17 | $saf-enlarge-contract-jump: 1em !default; 18 | $saf-flip-scale: 1.2 !default; 19 | -------------------------------------------------------------------------------- /app/assets/stylesheets/_variables.scss: -------------------------------------------------------------------------------- 1 | $saf-prefixes: ("webkit", "moz", "o", "ms", "spec") !default; 2 | $saf-translateY-distance: 1.334em !default; 3 | $saf-translateX-distance: 1.334em !default; 4 | $saf-drop-rise-distance: 10em !default; 5 | $saf-shake-distance: 0.55em !default; 6 | $saf-teeter-angle: 10deg !default; 7 | $saf-quiver-angle: 2deg !default; 8 | $saf-float-bob-distance: 0.25em !default; 9 | $saf-float-bob-angle: 1deg !default; 10 | $saf-sway-angle: 3deg !default; 11 | $saf-turn-angle: 225deg !default; 12 | $saf-pulsate-scale: 1.1 !default; 13 | $saf-stretch-compress-exageration: 1.05 !default; 14 | $saf-distance-from-origin: 5em !default; 15 | $saf-sunrise-arch: -15em !default; 16 | $saf-enlarge-contract-multiple: 1.15 !default; 17 | $saf-enlarge-contract-jump: 1em !default; 18 | $saf-flip-scale: 1.2 !default; 19 | -------------------------------------------------------------------------------- /tasks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "saffron", 3 | "description": "A simple sass mixin library for animations and transitions.", 4 | "version": "0.2.3", 5 | "keywords": [ 6 | "sass", 7 | "scss", 8 | "animation" 9 | ], 10 | "author": { 11 | "name": "JC", 12 | "email": "j@colindres.com", 13 | "url": "http://colindres.me" 14 | }, 15 | "licenses": [ 16 | "MIT" 17 | ], 18 | "engines": { 19 | "node": ">= 0.10.0" 20 | }, 21 | "devDependencies": { 22 | "grunt": "~0.4.2", 23 | "grunt-contrib-watch": "~0.5.3", 24 | "grunt-contrib-clean": "~0.5.0", 25 | "grunt-csscomb": "~2.0.1", 26 | "grunt-contrib-csslint": "~0.2.0", 27 | "grunt-contrib-cssmin": "~0.7.0", 28 | "grunt-contrib-connect": "~0.6.0", 29 | "grunt-contrib-copy": "~0.5.0", 30 | "grunt-sass": "~0.12.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /saffron/in-place/_teeter.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(teeter) { 2 | 0%, 100% { 3 | @include u-transform(rotate(0deg) translateZ(0)); 4 | } 5 | 15% { 6 | @include u-transform(rotate($saf-teeter-angle)); 7 | } 8 | 30% { 9 | @include u-transform(rotate($saf-teeter-angle * -1)); 10 | } 11 | 45% { 12 | @include u-transform(rotate($saf-teeter-angle / 2)); 13 | } 14 | 60% { 15 | @include u-transform(rotate($saf-teeter-angle / 2 * -1)); 16 | } 17 | 73% { 18 | @include u-transform(rotate($saf-teeter-angle / 3)); 19 | } 20 | 86% { 21 | @include u-transform(rotate($saf-teeter-angle / 3 * -1)); 22 | } 23 | } 24 | 25 | @mixin teeter($duration: 1s, $delay: 0s, $fill-mode: none, $count: 1) { 26 | // hack to fix jagged edges 27 | outline: 1px solid transparent; 28 | @include u-animation(teeter $duration $delay $fill-mode $count); 29 | } 30 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_teeter.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(teeter) { 2 | 0%, 100% { 3 | @include u-transform(rotate(0deg) translateZ(0)); 4 | } 5 | 15% { 6 | @include u-transform(rotate($saf-teeter-angle)); 7 | } 8 | 30% { 9 | @include u-transform(rotate($saf-teeter-angle * -1)); 10 | } 11 | 45% { 12 | @include u-transform(rotate($saf-teeter-angle / 2)); 13 | } 14 | 60% { 15 | @include u-transform(rotate($saf-teeter-angle / 2 * -1)); 16 | } 17 | 73% { 18 | @include u-transform(rotate($saf-teeter-angle / 3)); 19 | } 20 | 86% { 21 | @include u-transform(rotate($saf-teeter-angle / 3 * -1)); 22 | } 23 | } 24 | 25 | @mixin teeter($duration: 1s, $delay: 0s, $fill-mode: none, $count: 1) { 26 | // hack to fix jagged edges 27 | outline: 1px solid transparent; 28 | @include u-animation(teeter $duration $delay $fill-mode $count); 29 | } 30 | -------------------------------------------------------------------------------- /saffron/exits/_slide-out.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(slideOutLeft) { 2 | 35% { 3 | opacity: 1; 4 | @include u-transform(translateX($saf-translateX-distance) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(translateX($saf-translateX-distance * -10)); 9 | } 10 | } 11 | 12 | @mixin slideOutLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(slideOutLeft $duration $delay $fill-mode); 14 | } 15 | 16 | @include u-keyframes(slideOutRight) { 17 | 35% { 18 | opacity: 1; 19 | @include u-transform(translateX($saf-translateX-distance * -1) translateZ(0)); 20 | } 21 | 100% { 22 | opacity: 0; 23 | @include u-transform(translateX($saf-translateX-distance * 10)); 24 | } 25 | } 26 | 27 | @mixin slideOutRight($duration: 1s, $delay: 0s, $fill-mode: forwards) { 28 | @include u-animation(slideOutRight $duration $delay $fill-mode); 29 | } 30 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_slide-out.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(slideOutLeft) { 2 | 35% { 3 | opacity: 1; 4 | @include u-transform(translateX($saf-translateX-distance) translateZ(0)); 5 | } 6 | 100% { 7 | opacity: 0; 8 | @include u-transform(translateX($saf-translateX-distance * -10)); 9 | } 10 | } 11 | 12 | @mixin slideOutLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) { 13 | @include u-animation(slideOutLeft $duration $delay $fill-mode); 14 | } 15 | 16 | @include u-keyframes(slideOutRight) { 17 | 35% { 18 | opacity: 1; 19 | @include u-transform(translateX($saf-translateX-distance * -1) translateZ(0)); 20 | } 21 | 100% { 22 | opacity: 0; 23 | @include u-transform(translateX($saf-translateX-distance * 10)); 24 | } 25 | } 26 | 27 | @mixin slideOutRight($duration: 1s, $delay: 0s, $fill-mode: forwards) { 28 | @include u-animation(slideOutRight $duration $delay $fill-mode); 29 | } 30 | -------------------------------------------------------------------------------- /saffron/exits/_compress.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(compress) { 2 | 0% { 3 | @include u-transform(scaleY(1) translateZ(0)); 4 | } 5 | 30% { 6 | @include u-transform(scaleY($saf-stretch-compress-exageration)); 7 | } 8 | 50% { 9 | @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075))); 10 | } 11 | 100% { 12 | @include u-transform(scaleY(0)); 13 | } 14 | } 15 | 16 | @mixin compressUp($duration: 0.7s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) { 17 | @include u-animation(compress $count $duration $delay $fill-mode $timing); 18 | @include prefix(u-transform-origin, 0 0, webkit moz spec); 19 | } 20 | 21 | @mixin compressDown($duration: 0.7s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) { 22 | @include u-animation(compress $count $duration $delay $fill-mode $timing); 23 | @include prefix(u-transform-origin, 0 100%, webkit moz spec); 24 | } 25 | 26 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_compress.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(compress) { 2 | 0% { 3 | @include u-transform(scaleY(1) translateZ(0)); 4 | } 5 | 30% { 6 | @include u-transform(scaleY($saf-stretch-compress-exageration)); 7 | } 8 | 50% { 9 | @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075))); 10 | } 11 | 100% { 12 | @include u-transform(scaleY(0)); 13 | } 14 | } 15 | 16 | @mixin compressUp($duration: 0.7s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) { 17 | @include u-animation(compress $count $duration $delay $fill-mode $timing); 18 | @include prefix(u-transform-origin, 0 0, webkit moz spec); 19 | } 20 | 21 | @mixin compressDown($duration: 0.7s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) { 22 | @include u-animation(compress $count $duration $delay $fill-mode $timing); 23 | @include prefix(u-transform-origin, 0 100%, webkit moz spec); 24 | } 25 | 26 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | PATH 2 | remote: . 3 | specs: 4 | saffron (0.2.3) 5 | sass (~> 3.2) 6 | thor 7 | 8 | GEM 9 | remote: https://rubygems.org/ 10 | specs: 11 | aruba (0.5.4) 12 | childprocess (>= 0.3.6) 13 | cucumber (>= 1.1.1) 14 | rspec-expectations (>= 2.7.0) 15 | builder (3.2.2) 16 | childprocess (0.5.2) 17 | ffi (~> 1.0, >= 1.0.11) 18 | cucumber (1.3.14) 19 | builder (>= 2.1.2) 20 | diff-lcs (>= 1.1.3) 21 | gherkin (~> 2.12) 22 | multi_json (>= 1.7.5, < 2.0) 23 | multi_test (>= 0.1.1) 24 | diff-lcs (1.2.5) 25 | ffi (1.9.3) 26 | gherkin (2.12.2) 27 | multi_json (~> 1.3) 28 | multi_json (1.9.2) 29 | multi_test (0.1.1) 30 | rake (10.2.2) 31 | rspec-expectations (2.14.5) 32 | diff-lcs (>= 1.1.3, < 2.0) 33 | sass (3.3.4) 34 | thor (0.19.1) 35 | 36 | PLATFORMS 37 | ruby 38 | 39 | DEPENDENCIES 40 | aruba (~> 0.5) 41 | bundler (~> 1.3) 42 | rake 43 | saffron! 44 | -------------------------------------------------------------------------------- /saffron/entrances/_slide-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(slideInLeft) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateX($saf-translateX-distance * -10) translateZ(0)); 5 | } 6 | 65% { 7 | opacity: 1; 8 | @include u-transform(translateX($saf-translateX-distance)); 9 | } 10 | 100% { 11 | @include u-transform(translateX(0)); 12 | } 13 | } 14 | 15 | @mixin slideInLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) { 16 | @include u-animation(slideInLeft $duration $delay $fill-mode); 17 | } 18 | 19 | @include u-keyframes(slideInRight) { 20 | 0% { 21 | opacity: 0; 22 | @include u-transform(translateX($saf-translateX-distance * 10) translateZ(0)); 23 | } 24 | 65% { 25 | opacity: 1; 26 | @include u-transform(translateX($saf-translateX-distance * -1)); 27 | } 28 | 100% { 29 | @include u-transform(translateX(0)); 30 | } 31 | } 32 | 33 | @mixin slideInRight($duration: 1s, $delay: 0s, $fill-mode: forwards) { 34 | @include u-animation(slideInRight $duration $delay $fill-mode); 35 | } 36 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_slide-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(slideInLeft) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(translateX($saf-translateX-distance * -10) translateZ(0)); 5 | } 6 | 65% { 7 | opacity: 1; 8 | @include u-transform(translateX($saf-translateX-distance)); 9 | } 10 | 100% { 11 | @include u-transform(translateX(0)); 12 | } 13 | } 14 | 15 | @mixin slideInLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) { 16 | @include u-animation(slideInLeft $duration $delay $fill-mode); 17 | } 18 | 19 | @include u-keyframes(slideInRight) { 20 | 0% { 21 | opacity: 0; 22 | @include u-transform(translateX($saf-translateX-distance * 10) translateZ(0)); 23 | } 24 | 65% { 25 | opacity: 1; 26 | @include u-transform(translateX($saf-translateX-distance * -1)); 27 | } 28 | 100% { 29 | @include u-transform(translateX(0)); 30 | } 31 | } 32 | 33 | @mixin slideInRight($duration: 1s, $delay: 0s, $fill-mode: forwards) { 34 | @include u-animation(slideInRight $duration $delay $fill-mode); 35 | } 36 | -------------------------------------------------------------------------------- /saffron/entrances/_turn-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(turnInDown) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(perspective(500px) rotateX($saf-turn-angle * -1) translateZ(150px)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | @include u-transform(perspective(800px) rotateX(0deg) translateZ(0)); 9 | @include u-prefix(backface-visibility, hidden, webkit moz spec); 10 | } 11 | } 12 | 13 | @mixin turnInDown($duration: 1s, $delay: 0s, $fill-mode: forwards) { 14 | @include u-animation(turnInDown $duration $delay $fill-mode); 15 | } 16 | 17 | @include u-keyframes(turnInUp) { 18 | 0% { 19 | opacity: 0; 20 | @include u-transform(perspective(500px) rotateX($saf-turn-angle) translateZ(150px)); 21 | } 22 | 100% { 23 | opacity: 1; 24 | @include u-transform(perspective(800px) rotateX(0deg) translateZ(0)); 25 | @include u-prefix(backface-visibility, hidden, webkit moz spec); 26 | } 27 | } 28 | 29 | @mixin turnInUp($duration: 1s, $delay: 0s, $fill-mode: forwards) { 30 | @include u-animation(turnInUp $duration $delay $fill-mode); 31 | } 32 | -------------------------------------------------------------------------------- /saffron/exits/_turn-out.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(turnOutDown) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(perspective(800px) rotateX(0deg) translateZ(0)); 5 | @include u-prefix(backface-visibility, hidden, webkit spec); 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | @include u-transform(perspective(500px) rotateX($saf-turn-angle * -1) translateZ(150px)); 11 | } 12 | } 13 | 14 | @mixin turnOutDown($duration: 1s, $delay: 0s, $fill-mode: forwards) { 15 | @include u-animation(turnOutDown $duration $delay $fill-mode); 16 | } 17 | 18 | @include u-keyframes(turnOutUp) { 19 | 0% { 20 | opacity: 1; 21 | @include u-transform(perspective(800px) rotateX(0deg) translateZ(0)); 22 | @include u-prefix(backface-visibility, hidden, webkit spec); 23 | } 24 | 25 | 100% { 26 | opacity: 0; 27 | @include u-transform(perspective(500px) rotateX($saf-turn-angle) translateZ(150px)); 28 | } 29 | } 30 | 31 | @mixin turnOutUp($duration: 1s, $delay: 0s, $fill-mode: forwards) { 32 | @include u-animation(turnOutUp $duration $delay $fill-mode); 33 | } 34 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_turn-in.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(turnInDown) { 2 | 0% { 3 | opacity: 0; 4 | @include u-transform(perspective(500px) rotateX($saf-turn-angle * -1) translateZ(150px)); 5 | } 6 | 100% { 7 | opacity: 1; 8 | @include u-transform(perspective(800px) rotateX(0deg) translateZ(0)); 9 | @include u-prefix(backface-visibility, hidden, webkit moz spec); 10 | } 11 | } 12 | 13 | @mixin turnInDown($duration: 1s, $delay: 0s, $fill-mode: forwards) { 14 | @include u-animation(turnInDown $duration $delay $fill-mode); 15 | } 16 | 17 | @include u-keyframes(turnInUp) { 18 | 0% { 19 | opacity: 0; 20 | @include u-transform(perspective(500px) rotateX($saf-turn-angle) translateZ(150px)); 21 | } 22 | 100% { 23 | opacity: 1; 24 | @include u-transform(perspective(800px) rotateX(0deg) translateZ(0)); 25 | @include u-prefix(backface-visibility, hidden, webkit moz spec); 26 | } 27 | } 28 | 29 | @mixin turnInUp($duration: 1s, $delay: 0s, $fill-mode: forwards) { 30 | @include u-animation(turnInUp $duration $delay $fill-mode); 31 | } 32 | -------------------------------------------------------------------------------- /app/assets/stylesheets/exits/_turn-out.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(turnOutDown) { 2 | 0% { 3 | opacity: 1; 4 | @include u-transform(perspective(800px) rotateX(0deg) translateZ(0)); 5 | @include u-prefix(backface-visibility, hidden, webkit spec); 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | @include u-transform(perspective(500px) rotateX($saf-turn-angle * -1) translateZ(150px)); 11 | } 12 | } 13 | 14 | @mixin turnOutDown($duration: 1s, $delay: 0s, $fill-mode: forwards) { 15 | @include u-animation(turnOutDown $duration $delay $fill-mode); 16 | } 17 | 18 | @include u-keyframes(turnOutUp) { 19 | 0% { 20 | opacity: 1; 21 | @include u-transform(perspective(800px) rotateX(0deg) translateZ(0)); 22 | @include u-prefix(backface-visibility, hidden, webkit spec); 23 | } 24 | 25 | 100% { 26 | opacity: 0; 27 | @include u-transform(perspective(500px) rotateX($saf-turn-angle) translateZ(150px)); 28 | } 29 | } 30 | 31 | @mixin turnOutUp($duration: 1s, $delay: 0s, $fill-mode: forwards) { 32 | @include u-animation(turnOutUp $duration $delay $fill-mode); 33 | } 34 | -------------------------------------------------------------------------------- /MIT: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Jorge Colindres 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /saffron/helpers/_prefix.scss: -------------------------------------------------------------------------------- 1 | @mixin u-prefix($property, $value, $prefixes: $saf-prefixes) { 2 | @each $prefix in $prefixes { 3 | @if $prefix == "webkit" { 4 | -webkit-#{$property}: #{$value}; 5 | } @else if $prefix == "moz" { 6 | -moz-#{$property}: #{$value}; 7 | } @else if $prefix == "o" { 8 | -o-#{$property}: #{$value}; 9 | } @else if $prefix == "ms" { 10 | -ms-#{$property}: #{$value}; 11 | } @else if $prefix == "spec" { 12 | #{$property}: #{$value}; 13 | } @else { 14 | @warn "Unknown prefix: #{$prefix}"; 15 | } 16 | } 17 | } 18 | 19 | @mixin u-prefix-all($value: true){ 20 | @if $value { 21 | $prefixes: ("webkit", "moz", "o", "ms", "spec"); 22 | } @else { 23 | $prefixes: ("spec"); 24 | } 25 | } 26 | 27 | @mixin u-prefix-only($only) { 28 | @if $only == "webkit" { 29 | $prefixes: ("webkit", "spec"); 30 | } @else if $only == "moz" { 31 | $prefixes: ("moz", "spec"); 32 | } @else if $only == "o" { 33 | $prefixes: ("o", "spec"); 34 | } @else if $only == "ms" { 35 | $prefixes: ("ms", "spec"); 36 | } @else { 37 | @warn "Unknown prefix: #{$only}"; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /app/assets/stylesheets/helpers/_prefix.scss: -------------------------------------------------------------------------------- 1 | @mixin u-prefix($property, $value, $prefixes: $saf-prefixes) { 2 | @each $prefix in $prefixes { 3 | @if $prefix == "webkit" { 4 | -webkit-#{$property}: #{$value}; 5 | } @else if $prefix == "moz" { 6 | -moz-#{$property}: #{$value}; 7 | } @else if $prefix == "o" { 8 | -o-#{$property}: #{$value}; 9 | } @else if $prefix == "ms" { 10 | -ms-#{$property}: #{$value}; 11 | } @else if $prefix == "spec" { 12 | #{$property}: #{$value}; 13 | } @else { 14 | @warn "Unknown prefix: #{$prefix}"; 15 | } 16 | } 17 | } 18 | 19 | @mixin u-prefix-all($value: true){ 20 | @if $value { 21 | $prefixes: ("webkit", "moz", "o", "ms", "spec"); 22 | } @else { 23 | $prefixes: ("spec"); 24 | } 25 | } 26 | 27 | @mixin u-prefix-only($only) { 28 | @if $only == "webkit" { 29 | $prefixes: ("webkit", "spec"); 30 | } @else if $only == "moz" { 31 | $prefixes: ("moz", "spec"); 32 | } @else if $only == "o" { 33 | $prefixes: ("o", "spec"); 34 | } @else if $only == "ms" { 35 | $prefixes: ("ms", "spec"); 36 | } @else { 37 | @warn "Unknown prefix: #{$only}"; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /features/step_definitions/saffron.rb: -------------------------------------------------------------------------------- 1 | Then(/^the output should contain the current version number$/) do 2 | assert_partial_output Saffron::VERSION, all_output 3 | end 4 | 5 | Then(/^the sub directories should exist inside "(.*?)"$/) do |directory| 6 | sub_dirs = %w{entrances exits helpers in-place}.map do |sub_dir| 7 | "#{directory}#{sub_dir}" 8 | end 9 | check_directory_presence sub_dirs, true 10 | end 11 | 12 | Given(/^Saffron already exists$/) do 13 | run_simple "bundle exec saffron install" 14 | end 15 | 16 | When(/^I modify saffron at "(.*?)" with "(.*?)"$/) do |path, mod| 17 | append_to_file "#{path}/saffron.scss", mod 18 | end 19 | 20 | Given(/^Saffron was installed into a specific directory$/) do 21 | run_simple "bundle exec saffron install -p path/to/directory" 22 | end 23 | 24 | Then(/^saffron at "(.*?)" should still be modified with "(.*?)"$/) do |path, mod| 25 | run_simple "cat #{path}/saffron.scss" 26 | assert_partial_output mod, all_output 27 | end 28 | 29 | Then(/^saffron at "(.*?)" should no longer contain "(.*?)"$/) do |path, mod| 30 | run_simple "cat #{path}/saffron.scss" 31 | assert_no_partial_output mod, all_output 32 | end 33 | 34 | Given(/^Saffron does not yet exist$/) do 35 | check_directory_presence(["saffron/"], false) 36 | end 37 | 38 | -------------------------------------------------------------------------------- /saffron/entrances/_stretch.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(stretch) { 2 | 0% { 3 | @include u-transform(scaleY(0)); 4 | } 5 | 40% { 6 | @include u-transform(scaleY($saf-stretch-compress-exageration)); 7 | } 8 | 60% { 9 | @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075))); 10 | } 11 | 80% { 12 | @include u-transform(scaleY($saf-stretch-compress-exageration)); 13 | } 14 | 100% { 15 | @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075))); 16 | } 17 | 80% { 18 | @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .025))); 19 | } 20 | 100% { 21 | @include u-transform(scaleY(1)); 22 | } 23 | } 24 | 25 | @mixin stretchUp($duration: 1.75s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) { 26 | @include u-animation(stretch $count $duration $delay $fill-mode $timing); 27 | @include u-prefix(u-transform-origin, 0 100%, webkit moz spec); 28 | } 29 | 30 | @mixin stretchDown($duration: 1.75s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) { 31 | @include u-animation(stretch $count $duration $delay $fill-mode $timing); 32 | @include u-prefix(u-transform-origin, 0 0, webkit moz spec); 33 | } 34 | -------------------------------------------------------------------------------- /app/assets/stylesheets/entrances/_stretch.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(stretch) { 2 | 0% { 3 | @include u-transform(scaleY(0)); 4 | } 5 | 40% { 6 | @include u-transform(scaleY($saf-stretch-compress-exageration)); 7 | } 8 | 60% { 9 | @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075))); 10 | } 11 | 80% { 12 | @include u-transform(scaleY($saf-stretch-compress-exageration)); 13 | } 14 | 100% { 15 | @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075))); 16 | } 17 | 80% { 18 | @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .025))); 19 | } 20 | 100% { 21 | @include u-transform(scaleY(1)); 22 | } 23 | } 24 | 25 | @mixin stretchUp($duration: 1.75s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) { 26 | @include u-animation(stretch $count $duration $delay $fill-mode $timing); 27 | @include u-prefix(u-transform-origin, 0 100%, webkit moz spec); 28 | } 29 | 30 | @mixin stretchDown($duration: 1.75s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) { 31 | @include u-animation(stretch $count $duration $delay $fill-mode $timing); 32 | @include u-prefix(u-transform-origin, 0 0, webkit moz spec); 33 | } 34 | -------------------------------------------------------------------------------- /features/install.feature: -------------------------------------------------------------------------------- 1 | Feature: Install saffron 2 | As a user 3 | I want to easily generate the Saffron files and directories 4 | So I can use them in my project 5 | 6 | Scenario: Installing Saffron by default 7 | When I run `bundle exec saffron install` 8 | Then the output should contain "Saffron succesfully installed in saffron/" 9 | And a directory named "saffron" should exist 10 | And the sub directories should exist inside "saffron/" 11 | And the following files should exist: 12 | | saffron/saffron.scss | 13 | | saffron/_variables.scss | 14 | 15 | Scenario: Installing Saffron into a specific directory 16 | When I run `bundle exec saffron install -p path/to/directory` 17 | Then the output should contain "Saffron succesfully installed in path/to/directory/saffron" 18 | And a directory named "path/to/directory/saffron" should exist 19 | And the sub directories should exist inside "path/to/directory/saffron/" 20 | And the following files should exist: 21 | | path/to/directory/saffron/saffron.scss | 22 | | path/to/directory/saffron/_variables.scss | 23 | 24 | Scenario: Saffron is already installed 25 | When I run `bundle exec saffron install` 26 | And I run `bundle exec saffron install` 27 | Then the output should contain "Saffron already exists" 28 | -------------------------------------------------------------------------------- /saffron.gemspec: -------------------------------------------------------------------------------- 1 | # coding: utf-8 2 | lib = File.expand_path('../lib', __FILE__) 3 | $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib) 4 | require 'saffron/version' 5 | 6 | Gem::Specification.new do |spec| 7 | spec.name = "saffron" 8 | spec.version = Saffron::VERSION 9 | spec.authors = ["JC"] 10 | spec.email = ["j@colindres.me"] 11 | spec.summary = "A simple sass mixin library for animations and transitions." 12 | spec.homepage = "https://github.com/corporadobob/saffron" 13 | spec.license = "MIT" 14 | spec.description = <<-DESC 15 | Saffron is a collection of sass mixins and helpers that make adding CSS3 animations and transitions much simpler. 16 | Just include a mixin in your sass declaration, then set any configuration using variables and mixin parameters. 17 | DESC 18 | 19 | 20 | spec.files = `git ls-files`.split($/) 21 | spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) } 22 | spec.test_files = spec.files.grep(%r{^(test|spec|features)/}) 23 | spec.require_paths = ["lib"] 24 | 25 | spec.add_dependency "sass", "~> 3.2" 26 | spec.add_dependency "thor" 27 | 28 | spec.add_development_dependency "bundler", "~> 1.3" 29 | spec.add_development_dependency "rake" 30 | spec.add_development_dependency "aruba", "~> 0.5" 31 | end 32 | -------------------------------------------------------------------------------- /saffron/in-place/_quiver.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(quiver) { 2 | 0%{ 3 | @include u-transform(translate3d(2px, 1px, 0) rotate(0deg)); 4 | } 5 | 10% { 6 | @include u-transform(translate3d(-1px, 2px, 0) rotate($saf-quiver-angle)); 7 | } 8 | 20% { 9 | @include u-transform(translate3d(-3px, 0) rotate($saf-quiver-angle * -1)); 10 | } 11 | 30% { 12 | @include u-transform(translate3d(0, 2px, 0) rotate(0deg)); 13 | } 14 | 40% { 15 | @include u-transform(translate3d(1px, -1px, 0) rotate($saf-quiver-angle)); 16 | } 17 | 50% { 18 | @include u-transform(translate3d(-1px, 2px, 0) rotate($saf-quiver-angle * -1)); 19 | } 20 | 60% { 21 | @include u-transform(translate3d(-3px, 1px, 0) rotate(0deg)); 22 | } 23 | 70% { 24 | @include u-transform(translate3d(2px, 1px, 0) rotate($saf-quiver-angle)); 25 | } 26 | 80% { 27 | @include u-transform(translate3d(-1px, -1px, 0) rotate($saf-quiver-angle * -1)); 28 | } 29 | 90% { 30 | @include u-transform(translate3d(2px, 2px, 0) rotate(0deg)); 31 | } 32 | 100% { 33 | @include u-transform(translate3d(1px, -2px, 0) rotate($saf-quiver-angle)); 34 | } 35 | 36 | } 37 | 38 | @mixin quiver($duration: 0.75s, $delay: 0s, $fill-mode: none, $count: infinite) { 39 | // hack to fix jagged edges 40 | outline: 1px solid transparent; 41 | @include u-animation(quiver $duration $delay $fill-mode $count); 42 | } 43 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_quiver.scss: -------------------------------------------------------------------------------- 1 | @include u-keyframes(quiver) { 2 | 0%{ 3 | @include u-transform(translate3d(2px, 1px, 0) rotate(0deg)); 4 | } 5 | 10% { 6 | @include u-transform(translate3d(-1px, 2px, 0) rotate($saf-quiver-angle)); 7 | } 8 | 20% { 9 | @include u-transform(translate3d(-3px, 0) rotate($saf-quiver-angle * -1)); 10 | } 11 | 30% { 12 | @include u-transform(translate3d(0, 2px, 0) rotate(0deg)); 13 | } 14 | 40% { 15 | @include u-transform(translate3d(1px, -1px, 0) rotate($saf-quiver-angle)); 16 | } 17 | 50% { 18 | @include u-transform(translate3d(-1px, 2px, 0) rotate($saf-quiver-angle * -1)); 19 | } 20 | 60% { 21 | @include u-transform(translate3d(-3px, 1px, 0) rotate(0deg)); 22 | } 23 | 70% { 24 | @include u-transform(translate3d(2px, 1px, 0) rotate($saf-quiver-angle)); 25 | } 26 | 80% { 27 | @include u-transform(translate3d(-1px, -1px, 0) rotate($saf-quiver-angle * -1)); 28 | } 29 | 90% { 30 | @include u-transform(translate3d(2px, 2px, 0) rotate(0deg)); 31 | } 32 | 100% { 33 | @include u-transform(translate3d(1px, -2px, 0) rotate($saf-quiver-angle)); 34 | } 35 | 36 | } 37 | 38 | @mixin quiver($duration: 0.75s, $delay: 0s, $fill-mode: none, $count: infinite) { 39 | // hack to fix jagged edges 40 | outline: 1px solid transparent; 41 | @include u-animation(quiver $duration $delay $fill-mode $count); 42 | } 43 | -------------------------------------------------------------------------------- /lib/saffron/installer.rb: -------------------------------------------------------------------------------- 1 | require "saffron/version" 2 | require "thor" 3 | 4 | module Saffron 5 | class Installer < Thor 6 | include Thor::Actions 7 | source_root File.dirname(__FILE__) 8 | map ["--version", "-v"] => :version 9 | 10 | desc "install", "Installs Saffron" 11 | method_option :path, :aliases => "-p", :desc => "Set the install path" 12 | def install 13 | unless File.directory? set_destination 14 | install_saffron 15 | puts "Saffron succesfully installed in #{@destination}/" 16 | else 17 | puts "Saffron already exists." 18 | end 19 | end 20 | 21 | desc "update", "Updates Saffron" 22 | method_option :path, :aliases => "-p", :desc => "Set the update path" 23 | def update 24 | if File.directory? set_destination 25 | remove_saffron 26 | install_saffron 27 | puts "Saffron succesfully updated in #{@destination}/" 28 | else 29 | puts "Saffron not found. No updates occured." 30 | end 31 | end 32 | 33 | desc "version", "Outputs version number" 34 | def version 35 | say "Saffron #{Saffron::VERSION}" 36 | end 37 | 38 | private 39 | def set_destination 40 | @destination ||= if options[:path] 41 | File.join(options[:path], "saffron") 42 | else 43 | "saffron" 44 | end 45 | end 46 | 47 | def install_saffron 48 | directory "../../saffron/", @destination 49 | end 50 | 51 | def remove_saffron 52 | remove_dir @destination 53 | end 54 | end 55 | end 56 | -------------------------------------------------------------------------------- /saffron/saffron.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | @import "variables"; 3 | 4 | // Helper Mixins and Functions 5 | @import "helpers/contains"; 6 | @import "helpers/prefix"; 7 | @import "helpers/animation"; 8 | @import "helpers/transition"; 9 | @import "helpers/transform"; 10 | @import "helpers/keyframes"; 11 | 12 | // Entrances 13 | @import "entrances/fade-in"; 14 | @import "entrances/fade-in-up"; 15 | @import "entrances/fade-in-down"; 16 | @import "entrances/fade-in-left"; 17 | @import "entrances/fade-in-right"; 18 | @import "entrances/fade-in-zoom"; 19 | @import "entrances/fade-in-zoom-big"; 20 | @import "entrances/slide-in"; 21 | @import "entrances/drop-in"; 22 | @import "entrances/rise-in"; 23 | @import "entrances/pop-in"; 24 | @import "entrances/turn-in"; 25 | @import "entrances/stretch"; 26 | @import "entrances/newspaper"; 27 | 28 | // Exits 29 | @import "exits/fade-out"; 30 | @import "exits/fade-out-down"; 31 | @import "exits/fade-out-up"; 32 | @import "exits/fade-out-left"; 33 | @import "exits/fade-out-right"; 34 | @import "exits/fade-out-zoom"; 35 | @import "exits/fade-out-zoom-big"; 36 | @import "exits/slide-out"; 37 | @import "exits/explode"; 38 | @import "exits/drop-out"; 39 | @import "exits/rise-out"; 40 | @import "exits/poof"; 41 | @import "exits/turn-out"; 42 | @import "exits/compress"; 43 | 44 | // In Place 45 | @import "in-place/float"; 46 | @import "in-place/shake"; 47 | @import "in-place/expand"; 48 | @import "in-place/teeter"; 49 | @import "in-place/quiver"; 50 | @import "in-place/sway"; 51 | @import "in-place/spin"; 52 | @import "in-place/bounce"; 53 | @import "in-place/pulsate"; 54 | @import "in-place/colors"; 55 | @import "in-place/around-the-world"; 56 | @import "in-place/ping"; 57 | @import "in-place/square-dance"; 58 | @import "in-place/sunrise"; 59 | @import "in-place/enlarge"; 60 | @import "in-place/contract"; 61 | @import "in-place/flip"; 62 | @import "in-place/cube-flip"; 63 | -------------------------------------------------------------------------------- /app/assets/stylesheets/saffron.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | @import "variables"; 3 | 4 | // Helper Mixins and Functions 5 | @import "helpers/contains"; 6 | @import "helpers/prefix"; 7 | @import "helpers/animation"; 8 | @import "helpers/transition"; 9 | @import "helpers/transform"; 10 | @import "helpers/keyframes"; 11 | 12 | // Entrances 13 | @import "entrances/fade-in"; 14 | @import "entrances/fade-in-up"; 15 | @import "entrances/fade-in-down"; 16 | @import "entrances/fade-in-left"; 17 | @import "entrances/fade-in-right"; 18 | @import "entrances/fade-in-zoom"; 19 | @import "entrances/fade-in-zoom-big"; 20 | @import "entrances/slide-in"; 21 | @import "entrances/drop-in"; 22 | @import "entrances/rise-in"; 23 | @import "entrances/pop-in"; 24 | @import "entrances/turn-in"; 25 | @import "entrances/stretch"; 26 | @import "entrances/newspaper"; 27 | 28 | // Exits 29 | @import "exits/fade-out"; 30 | @import "exits/fade-out-down"; 31 | @import "exits/fade-out-up"; 32 | @import "exits/fade-out-left"; 33 | @import "exits/fade-out-right"; 34 | @import "exits/fade-out-zoom"; 35 | @import "exits/fade-out-zoom-big"; 36 | @import "exits/slide-out"; 37 | @import "exits/explode"; 38 | @import "exits/drop-out"; 39 | @import "exits/rise-out"; 40 | @import "exits/poof"; 41 | @import "exits/turn-out"; 42 | @import "exits/compress"; 43 | 44 | // In Place 45 | @import "in-place/float"; 46 | @import "in-place/shake"; 47 | @import "in-place/expand"; 48 | @import "in-place/teeter"; 49 | @import "in-place/quiver"; 50 | @import "in-place/sway"; 51 | @import "in-place/spin"; 52 | @import "in-place/bounce"; 53 | @import "in-place/pulsate"; 54 | @import "in-place/colors"; 55 | @import "in-place/around-the-world"; 56 | @import "in-place/ping"; 57 | @import "in-place/square-dance"; 58 | @import "in-place/sunrise"; 59 | @import "in-place/enlarge"; 60 | @import "in-place/contract"; 61 | @import "in-place/flip"; 62 | @import "in-place/cube-flip"; 63 | -------------------------------------------------------------------------------- /saffron/in-place/_cube-flip.scss: -------------------------------------------------------------------------------- 1 | @mixin cubeFlipUp($selector: ".flipUp", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(0.905, -0.190, 0.480, 0.995)) { 2 | position: relative; 3 | @include u-prefix(transform-style, preserve-3d, webkit spec); 4 | @include u-transition(all $duration $delay $timing); 5 | &#{$selector} { 6 | @include u-transform(rotateX(-90deg) translateY(100%) translateZ(0)); 7 | @include u-prefix(transform-origin, 50% 100%, webkit moz spec); 8 | } 9 | &::before, 10 | &::after { 11 | content: ''; 12 | position: absolute; 13 | left: 0; 14 | height: 100%; 15 | width: 100%; 16 | } 17 | &::before { 18 | top: 100%; 19 | @include u-transform(rotateX(-90deg)); 20 | @include u-prefix(transform-origin, 0 0, webkit moz spec); 21 | } 22 | &::after { 23 | top: -100%; 24 | @include u-transform(rotateX(90deg)); 25 | @include u-prefix(transform-origin, 0 100%, webkit moz spec); 26 | } 27 | } 28 | 29 | @mixin cubeFlipDown($selector: ".flipDown", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(0.905, -0.190, 0.480, 0.995)) { 30 | position: relative; 31 | @include u-prefix(transform-style, preserve-3d, webkit spec); 32 | @include u-transition(all $duration $delay $timing); 33 | &#{$selector} { 34 | @include u-transform(rotateX(90deg) translateY(-100%) translateZ(0)); 35 | @include u-prefix(transform-origin, 50% 0, webkit moz spec); 36 | } 37 | &::before, 38 | &::after { 39 | content: ''; 40 | position: absolute; 41 | left: 0; 42 | height: 100%; 43 | width: 100%; 44 | } 45 | &::before { 46 | top: 100%; 47 | @include u-transform(rotateX(-90deg)); 48 | @include u-prefix(transform-origin, 0 0, webkit moz spec); 49 | } 50 | &::after { 51 | top: -100%; 52 | @include u-transform(rotateX(90deg)); 53 | @include u-prefix(transform-origin, 0 100%, webkit moz spec); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /app/assets/stylesheets/in-place/_cube-flip.scss: -------------------------------------------------------------------------------- 1 | @mixin cubeFlipUp($selector: ".flipUp", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(0.905, -0.190, 0.480, 0.995)) { 2 | position: relative; 3 | @include u-prefix(transform-style, preserve-3d, webkit spec); 4 | @include u-transition(all $duration $delay $timing); 5 | &#{$selector} { 6 | @include u-transform(rotateX(-90deg) translateY(100%) translateZ(0)); 7 | @include u-prefix(transform-origin, 50% 100%, webkit moz spec); 8 | } 9 | &::before, 10 | &::after { 11 | content: ''; 12 | position: absolute; 13 | left: 0; 14 | height: 100%; 15 | width: 100%; 16 | } 17 | &::before { 18 | top: 100%; 19 | @include u-transform(rotateX(-90deg)); 20 | @include u-prefix(transform-origin, 0 0, webkit moz spec); 21 | } 22 | &::after { 23 | top: -100%; 24 | @include u-transform(rotateX(90deg)); 25 | @include u-prefix(transform-origin, 0 100%, webkit moz spec); 26 | } 27 | } 28 | 29 | @mixin cubeFlipDown($selector: ".flipDown", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(0.905, -0.190, 0.480, 0.995)) { 30 | position: relative; 31 | @include u-prefix(transform-style, preserve-3d, webkit spec); 32 | @include u-transition(all $duration $delay $timing); 33 | &#{$selector} { 34 | @include u-transform(rotateX(90deg) translateY(-100%) translateZ(0)); 35 | @include u-prefix(transform-origin, 50% 0, webkit moz spec); 36 | } 37 | &::before, 38 | &::after { 39 | content: ''; 40 | position: absolute; 41 | left: 0; 42 | height: 100%; 43 | width: 100%; 44 | } 45 | &::before { 46 | top: 100%; 47 | @include u-transform(rotateX(-90deg)); 48 | @include u-prefix(transform-origin, 0 0, webkit moz spec); 49 | } 50 | &::after { 51 | top: -100%; 52 | @include u-transform(rotateX(90deg)); 53 | @include u-prefix(transform-origin, 0 100%, webkit moz spec); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /features/update.feature: -------------------------------------------------------------------------------- 1 | Feature: Update saffron 2 | As a user 3 | I want to easily update my Saffron files 4 | So I can maintain the most up-to-date functionality 5 | 6 | Scenario: Updating Saffron at the default directory 7 | Given Saffron does not yet exist 8 | When I run `bundle exec saffron update` 9 | Then the output should contain "Saffron not found. No updates occured." 10 | And a directory named "saffron/" should not exist 11 | And a file named "saffron/saffron.scss" should not exist 12 | 13 | Given Saffron already exists 14 | When I modify saffron at "saffron/" with "modification text" 15 | And I run `bundle exec saffron update` 16 | Then the output should contain "Saffron succesfully updated in saffron/" 17 | And a directory named "saffron" should exist 18 | And the sub directories should exist inside "saffron/" 19 | And the following files should exist: 20 | | saffron/saffron.scss | 21 | | saffron/_variables.scss | 22 | And saffron at "saffron/" should no longer contain "modification text" 23 | 24 | Scenario: Updating Saffron at a specific directory 25 | Given Saffron was installed into a specific directory 26 | When I modify saffron at "path/to/directory/saffron/" with "modification text" 27 | And I run `bundle exec saffron update` 28 | Then saffron at "path/to/directory/saffron/" should still be modified with "modification text" 29 | And the output should contain "Saffron not found. No updates occured." 30 | And I run `bundle exec saffron update -p path/to/directory` 31 | Then the output should contain "Saffron succesfully updated in path/to/directory/saffron" 32 | And a directory named "path/to/directory/saffron" should exist 33 | And the sub directories should exist inside "path/to/directory/saffron/" 34 | And the following files should exist: 35 | | path/to/directory/saffron/saffron.scss | 36 | | path/to/directory/saffron/_variables.scss | 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Saffron 2 | [![Build Status](https://travis-ci.org/colindresj/saffron.svg?branch=v0.2.2)](https://travis-ci.org/colindresj/saffron) 3 | [![Gem Version](https://badge.fury.io/rb/saffron.svg)](http://badge.fury.io/rb/saffron) 4 | 5 | > A simple Sass mixin library for animations and transitions. 6 | 7 | Saffron is a collection of Sass mixins and helpers that make adding CSS3 animations and transitions much simpler. 8 | Just include a mixin in your Sass declaration, then set any configuration using variables and mixin parameters. 9 | 10 | ### Requirements 11 | Sass 3.2+ 12 | 13 | ## Installing 14 | ### Standard Installation 15 | Install the gem from the command line with `gem install saffron`, then `cd` into the directory where you want to install Saffron and run the installation command: 16 | ```bash 17 | saffron install 18 | ``` 19 | You can also use the `-p` flag to install Saffron into a relative directory: 20 | ```bash 21 | saffron install -p path/to/directory/ 22 | ``` 23 | Finally, import the mixins into your main SCSS file: 24 | ```scss 25 | @import "saffron/saffron"; 26 | ``` 27 | 28 | ### Rails 29 | If you're using Rails 3.1+, you can add Saffron to your Gemfile: 30 | ```ruby 31 | gem "saffron" 32 | ``` 33 | Run `bundle install` to make all the mixins available to your Rails application, and import Saffron at the top of your `application.css.scss`: 34 | ```scss 35 | @import "saffron"; 36 | ``` 37 | 38 | ### Bower 39 | Saffron is available on [Bower](http://bower.io/). Run `bower install saffron` to get the latest tagged version of Saffron 40 | from Bower. Unless you've changed the default directory, Saffron will be installed into your `bower_componenents` directory within the `saffron` subdirectory. 41 | 42 | ### Manual Installation 43 | Download or clone the project repo from GitHub. Copy the `saffron` folder and paste into your `sass` folder (or whatever you call it). You won't need any of the other directories or files. 44 | ```scss 45 | @import "saffron/saffron"; 46 | ``` 47 | No matter how you installed Saffron, you can now use any of the mixins: 48 | ```scss 49 | .my-class { 50 | @include teeter(); 51 | } 52 | ``` 53 | 54 | ## Updating 55 | To get the latest mixins you should update the Saffron files every once in a while. You can do so by running: 56 | ```bash 57 | saffron update 58 | ``` 59 | If you initially installed Saffron in a specific directory using the `-p` flag, you'll need to do the the same when updating: 60 | ```bash 61 | saffron update -p path/to/directory/ 62 | ``` 63 | 64 | ## Browser Support 65 | Saffron uses CSS3 transform, keyframes, animations and transitions, so it's really only for modern browsers. Visit http://caniuse.com/ for a clear idea of CSS3 browser support. 66 | 67 | All the mixins compile down to vendor prefixed CSS, and have been tested on the latest versions of Chrome, Safari, Firefox and Opera. I aim to do more browser testing and hope to increase compatability, especially for IE. 68 | 69 | ## Stylus 70 | If you're more of a Stylus user, check out [@willhoag](https://github.com/willhoag)'s port: [Saffron-Stylus](https://github.com/willhoag/saffron-stylus). 71 | 72 | ## License 73 | MIT 74 | -------------------------------------------------------------------------------- /tasks/Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 'use strict'; 3 | 4 | // Project configuration. 5 | grunt.initConfig({ 6 | 7 | // Metadata. 8 | pkg: grunt.file.readJSON('package.json'), 9 | banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + 10 | '<%= grunt.template.today("yyyy-mm-dd") %>\n' + 11 | '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + 12 | '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + 13 | ' Licensed <%= _.map(pkg.licenses) %> */\n', 14 | 15 | // Task configuration. 16 | watch: { 17 | sass: { 18 | files: ['../<%= pkg.name %>/**/**.scss', 'test.scss'], 19 | tasks: 'default', 20 | options: { 21 | livereload: true 22 | }, 23 | }, 24 | }, 25 | connect: { 26 | server: { 27 | options: { 28 | port: 7000 29 | } 30 | } 31 | }, 32 | clean: { 33 | options: { force: true }, 34 | build: ['compiled/*.css'], 35 | rails: ['../app/**/*.scss'] 36 | }, 37 | sass: { 38 | dist: { 39 | options: { 40 | style: 'expanded', 41 | banner: '<%= banner %>' 42 | }, 43 | files: { 44 | 'compiled/<%= pkg.name %>.css': '../<%= pkg.name %>/<%= pkg.name %>.scss', 45 | 'compiled/test.css': 'test.scss' 46 | }, 47 | } 48 | }, 49 | csscomb: { 50 | options: { 51 | config: '.csscomb.json' 52 | }, 53 | dist: { 54 | files: { 55 | 'compiled/<%= pkg.name %>.css': 'compiled/<%= pkg.name %>.css', 56 | 'compiled/test.css': 'compiled/test.css' 57 | } 58 | } 59 | }, 60 | csslint: { 61 | options: { 62 | csslintrc: '.csslintrc' 63 | }, 64 | src: ['compiled/<%= pkg.name %>.css', 'compiled/test.css'] 65 | }, 66 | cssmin: { 67 | options: { 68 | keepSpecialComments: 0, 69 | noAdvanced: true, // turn advanced optimizations off until the issue is fixed in clean-css 70 | report: 'min', 71 | selectorsMergeMode: 'ie8' 72 | }, 73 | minify: { 74 | files: { 75 | 'compiled/<%= pkg.name %>.min.css': 'compiled/<%= pkg.name %>.css' 76 | } 77 | } 78 | }, 79 | copy: { 80 | options: { 81 | mode: true 82 | }, 83 | main: { 84 | files: [ 85 | { 86 | expand: true, 87 | cwd: '../<%= pkg.name %>/', 88 | src: ['**/*.scss'], 89 | dest: '../app/assets/stylesheets/' 90 | } 91 | ] 92 | } 93 | } 94 | }); 95 | 96 | // These plugins provide necessary tasks. 97 | grunt.loadNpmTasks('grunt-contrib-connect'); 98 | grunt.loadNpmTasks('grunt-contrib-watch'); 99 | grunt.loadNpmTasks('grunt-contrib-clean'); 100 | grunt.loadNpmTasks('grunt-sass'); 101 | grunt.loadNpmTasks('grunt-csscomb'); 102 | grunt.loadNpmTasks('grunt-contrib-csslint'); 103 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 104 | grunt.loadNpmTasks('grunt-contrib-copy'); 105 | 106 | // Tasks 107 | grunt.registerTask('livereload', ['connect', 'watch']); 108 | grunt.registerTask('railsBuild', ['clean:rails', 'copy']); 109 | grunt.registerTask('default', ['clean:build', 'sass', 'csscomb', 'csslint']); 110 | 111 | }; 112 | -------------------------------------------------------------------------------- /tasks/.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "always-semicolon": true, 3 | "block-indent": 2, 4 | "colon-space": true, 5 | "color-case": "lower", 6 | "color-shorthand": true, 7 | "combinator-space": true, 8 | "element-case": "lower", 9 | "eof-newline": true, 10 | "leading-zero": false, 11 | "remove-empty-rulesets": true, 12 | "rule-indent": 2, 13 | "stick-brace": true, 14 | "strip-spaces": true, 15 | "unitless-zero": true, 16 | "vendor-prefix-align": true, 17 | "sort-order": [ 18 | [ 19 | "position", 20 | "top", 21 | "right", 22 | "bottom", 23 | "left", 24 | "z-index", 25 | "display", 26 | "float", 27 | "width", 28 | "min-width", 29 | "max-width", 30 | "height", 31 | "min-height", 32 | "max-height", 33 | "-webkit-box-sizing", 34 | "-moz-box-sizing", 35 | "box-sizing", 36 | "-webkit-appearance", 37 | "padding", 38 | "padding-top", 39 | "padding-right", 40 | "padding-bottom", 41 | "padding-left", 42 | "margin", 43 | "margin-top", 44 | "margin-right", 45 | "margin-bottom", 46 | "margin-left", 47 | "overflow", 48 | "overflow-x", 49 | "overflow-y", 50 | "-webkit-overflow-scrolling", 51 | "-ms-overflow-x", 52 | "-ms-overflow-y", 53 | "-ms-overflow-style", 54 | "clip", 55 | "clear", 56 | "font", 57 | "font-family", 58 | "font-size", 59 | "font-style", 60 | "font-weight", 61 | "font-variant", 62 | "font-size-adjust", 63 | "font-stretch", 64 | "font-effect", 65 | "font-emphasize", 66 | "font-emphasize-position", 67 | "font-emphasize-style", 68 | "font-smooth", 69 | "-webkit-hyphens", 70 | "-moz-hyphens", 71 | "hyphens", 72 | "line-height", 73 | "color", 74 | "text-align", 75 | "-webkit-text-align-last", 76 | "-moz-text-align-last", 77 | "-ms-text-align-last", 78 | "text-align-last", 79 | "text-emphasis", 80 | "text-emphasis-color", 81 | "text-emphasis-style", 82 | "text-emphasis-position", 83 | "text-decoration", 84 | "text-indent", 85 | "text-justify", 86 | "text-outline", 87 | "-ms-text-overflow", 88 | "text-overflow", 89 | "text-overflow-ellipsis", 90 | "text-overflow-mode", 91 | "text-shadow", 92 | "text-transform", 93 | "text-wrap", 94 | "-webkit-text-size-adjust", 95 | "-ms-text-size-adjust", 96 | "letter-spacing", 97 | "-ms-word-break", 98 | "word-break", 99 | "word-spacing", 100 | "-ms-word-wrap", 101 | "word-wrap", 102 | "-moz-tab-size", 103 | "-o-tab-size", 104 | "tab-size", 105 | "white-space", 106 | "vertical-align", 107 | "list-style", 108 | "list-style-position", 109 | "list-style-type", 110 | "list-style-image", 111 | "pointer-events", 112 | "cursor", 113 | "visibility", 114 | "zoom", 115 | "flex-direction", 116 | "flex-order", 117 | "flex-pack", 118 | "flex-align", 119 | "table-layout", 120 | "empty-cells", 121 | "caption-side", 122 | "border-spacing", 123 | "border-collapse", 124 | "content", 125 | "quotes", 126 | "counter-reset", 127 | "counter-increment", 128 | "resize", 129 | "-webkit-user-select", 130 | "-moz-user-select", 131 | "-ms-user-select", 132 | "-o-user-select", 133 | "user-select", 134 | "nav-index", 135 | "nav-up", 136 | "nav-right", 137 | "nav-down", 138 | "nav-left", 139 | "background", 140 | "background-color", 141 | "background-image", 142 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", 143 | "filter:progid:DXImageTransform.Microsoft.gradient", 144 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", 145 | "filter", 146 | "background-repeat", 147 | "background-attachment", 148 | "background-position", 149 | "background-position-x", 150 | "background-position-y", 151 | "-webkit-background-clip", 152 | "-moz-background-clip", 153 | "background-clip", 154 | "background-origin", 155 | "-webkit-background-size", 156 | "-moz-background-size", 157 | "-o-background-size", 158 | "background-size", 159 | "border", 160 | "border-color", 161 | "border-style", 162 | "border-width", 163 | "border-top", 164 | "border-top-color", 165 | "border-top-style", 166 | "border-top-width", 167 | "border-right", 168 | "border-right-color", 169 | "border-right-style", 170 | "border-right-width", 171 | "border-bottom", 172 | "border-bottom-color", 173 | "border-bottom-style", 174 | "border-bottom-width", 175 | "border-left", 176 | "border-left-color", 177 | "border-left-style", 178 | "border-left-width", 179 | "border-radius", 180 | "border-top-left-radius", 181 | "border-top-right-radius", 182 | "border-bottom-right-radius", 183 | "border-bottom-left-radius", 184 | "-webkit-border-image", 185 | "-moz-border-image", 186 | "-o-border-image", 187 | "border-image", 188 | "-webkit-border-image-source", 189 | "-moz-border-image-source", 190 | "-o-border-image-source", 191 | "border-image-source", 192 | "-webkit-border-image-slice", 193 | "-moz-border-image-slice", 194 | "-o-border-image-slice", 195 | "border-image-slice", 196 | "-webkit-border-image-width", 197 | "-moz-border-image-width", 198 | "-o-border-image-width", 199 | "border-image-width", 200 | "-webkit-border-image-outset", 201 | "-moz-border-image-outset", 202 | "-o-border-image-outset", 203 | "border-image-outset", 204 | "-webkit-border-image-repeat", 205 | "-moz-border-image-repeat", 206 | "-o-border-image-repeat", 207 | "border-image-repeat", 208 | "outline", 209 | "outline-width", 210 | "outline-style", 211 | "outline-color", 212 | "outline-offset", 213 | "-webkit-box-shadow", 214 | "-moz-box-shadow", 215 | "box-shadow", 216 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", 217 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", 218 | "opacity", 219 | "-ms-interpolation-mode", 220 | "-webkit-transition", 221 | "-moz-transition", 222 | "-ms-transition", 223 | "-o-transition", 224 | "transition", 225 | "-webkit-transition-delay", 226 | "-moz-transition-delay", 227 | "-ms-transition-delay", 228 | "-o-transition-delay", 229 | "transition-delay", 230 | "-webkit-transition-timing-function", 231 | "-moz-transition-timing-function", 232 | "-ms-transition-timing-function", 233 | "-o-transition-timing-function", 234 | "transition-timing-function", 235 | "-webkit-transition-duration", 236 | "-moz-transition-duration", 237 | "-ms-transition-duration", 238 | "-o-transition-duration", 239 | "transition-duration", 240 | "-webkit-transition-property", 241 | "-moz-transition-property", 242 | "-ms-transition-property", 243 | "-o-transition-property", 244 | "transition-property", 245 | "-webkit-transform", 246 | "-moz-transform", 247 | "-ms-transform", 248 | "-o-transform", 249 | "transform", 250 | "-webkit-transform-origin", 251 | "-moz-transform-origin", 252 | "-ms-transform-origin", 253 | "-o-transform-origin", 254 | "transform-origin", 255 | "-webkit-animation", 256 | "-moz-animation", 257 | "-ms-animation", 258 | "-o-animation", 259 | "animation", 260 | "-webkit-animation-name", 261 | "-moz-animation-name", 262 | "-ms-animation-name", 263 | "-o-animation-name", 264 | "animation-name", 265 | "-webkit-animation-duration", 266 | "-moz-animation-duration", 267 | "-ms-animation-duration", 268 | "-o-animation-duration", 269 | "animation-duration", 270 | "-webkit-animation-play-state", 271 | "-moz-animation-play-state", 272 | "-ms-animation-play-state", 273 | "-o-animation-play-state", 274 | "animation-play-state", 275 | "-webkit-animation-timing-function", 276 | "-moz-animation-timing-function", 277 | "-ms-animation-timing-function", 278 | "-o-animation-timing-function", 279 | "animation-timing-function", 280 | "-webkit-animation-delay", 281 | "-moz-animation-delay", 282 | "-ms-animation-delay", 283 | "-o-animation-delay", 284 | "animation-delay", 285 | "-webkit-animation-iteration-count", 286 | "-moz-animation-iteration-count", 287 | "-ms-animation-iteration-count", 288 | "-o-animation-iteration-count", 289 | "animation-iteration-count", 290 | "-webkit-animation-direction", 291 | "-moz-animation-direction", 292 | "-ms-animation-direction", 293 | "-o-animation-direction", 294 | "animation-direction" 295 | ] 296 | ] 297 | } 298 | -------------------------------------------------------------------------------- /tasks/compiled/saffron.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes fadeIn { 2 | 0% { 3 | opacity: 0; 4 | -webkit-transform: translateZ(0); 5 | -ms-transform: translateZ(0); 6 | transform: translateZ(0); 7 | } 8 | 9 | 100% { 10 | opacity: 1; 11 | } 12 | } 13 | 14 | @-moz-keyframes fadeIn { 15 | 0% { 16 | opacity: 0; 17 | -webkit-transform: translateZ(0); 18 | -ms-transform: translateZ(0); 19 | transform: translateZ(0); 20 | } 21 | 22 | 100% { 23 | opacity: 1; 24 | } 25 | } 26 | 27 | @-o-keyframes fadeIn { 28 | 0% { 29 | opacity: 0; 30 | -webkit-transform: translateZ(0); 31 | -ms-transform: translateZ(0); 32 | transform: translateZ(0); 33 | } 34 | 35 | 100% { 36 | opacity: 1; 37 | } 38 | } 39 | 40 | @keyframes fadeIn { 41 | 0% { 42 | opacity: 0; 43 | -webkit-transform: translateZ(0); 44 | -ms-transform: translateZ(0); 45 | transform: translateZ(0); 46 | } 47 | 48 | 100% { 49 | opacity: 1; 50 | } 51 | } 52 | 53 | @-webkit-keyframes fadeInUp { 54 | 0% { 55 | opacity: 0; 56 | -webkit-transform: translateY(1.334em) translateZ(0); 57 | -ms-transform: translateY(1.334em) translateZ(0); 58 | transform: translateY(1.334em) translateZ(0); 59 | } 60 | 61 | 100% { 62 | opacity: 1; 63 | } 64 | } 65 | 66 | @-moz-keyframes fadeInUp { 67 | 0% { 68 | opacity: 0; 69 | -webkit-transform: translateY(1.334em) translateZ(0); 70 | -ms-transform: translateY(1.334em) translateZ(0); 71 | transform: translateY(1.334em) translateZ(0); 72 | } 73 | 74 | 100% { 75 | opacity: 1; 76 | } 77 | } 78 | 79 | @-o-keyframes fadeInUp { 80 | 0% { 81 | opacity: 0; 82 | -webkit-transform: translateY(1.334em) translateZ(0); 83 | -ms-transform: translateY(1.334em) translateZ(0); 84 | transform: translateY(1.334em) translateZ(0); 85 | } 86 | 87 | 100% { 88 | opacity: 1; 89 | } 90 | } 91 | 92 | @keyframes fadeInUp { 93 | 0% { 94 | opacity: 0; 95 | -webkit-transform: translateY(1.334em) translateZ(0); 96 | -ms-transform: translateY(1.334em) translateZ(0); 97 | transform: translateY(1.334em) translateZ(0); 98 | } 99 | 100 | 100% { 101 | opacity: 1; 102 | } 103 | } 104 | 105 | @-webkit-keyframes fadeInDown { 106 | 0% { 107 | opacity: 0; 108 | -webkit-transform: translateY(-1.334em) translateZ(0); 109 | -ms-transform: translateY(-1.334em) translateZ(0); 110 | transform: translateY(-1.334em) translateZ(0); 111 | } 112 | 113 | 100% { 114 | opacity: 1; 115 | } 116 | } 117 | 118 | @-moz-keyframes fadeInDown { 119 | 0% { 120 | opacity: 0; 121 | -webkit-transform: translateY(-1.334em) translateZ(0); 122 | -ms-transform: translateY(-1.334em) translateZ(0); 123 | transform: translateY(-1.334em) translateZ(0); 124 | } 125 | 126 | 100% { 127 | opacity: 1; 128 | } 129 | } 130 | 131 | @-o-keyframes fadeInDown { 132 | 0% { 133 | opacity: 0; 134 | -webkit-transform: translateY(-1.334em) translateZ(0); 135 | -ms-transform: translateY(-1.334em) translateZ(0); 136 | transform: translateY(-1.334em) translateZ(0); 137 | } 138 | 139 | 100% { 140 | opacity: 1; 141 | } 142 | } 143 | 144 | @keyframes fadeInDown { 145 | 0% { 146 | opacity: 0; 147 | -webkit-transform: translateY(-1.334em) translateZ(0); 148 | -ms-transform: translateY(-1.334em) translateZ(0); 149 | transform: translateY(-1.334em) translateZ(0); 150 | } 151 | 152 | 100% { 153 | opacity: 1; 154 | } 155 | } 156 | 157 | @-webkit-keyframes fadeInLeft { 158 | 0% { 159 | opacity: 0; 160 | -webkit-transform: translateX(-1.334em) translateZ(0); 161 | -ms-transform: translateX(-1.334em) translateZ(0); 162 | transform: translateX(-1.334em) translateZ(0); 163 | } 164 | 165 | 100% { 166 | opacity: 1; 167 | } 168 | } 169 | 170 | @-moz-keyframes fadeInLeft { 171 | 0% { 172 | opacity: 0; 173 | -webkit-transform: translateX(-1.334em) translateZ(0); 174 | -ms-transform: translateX(-1.334em) translateZ(0); 175 | transform: translateX(-1.334em) translateZ(0); 176 | } 177 | 178 | 100% { 179 | opacity: 1; 180 | } 181 | } 182 | 183 | @-o-keyframes fadeInLeft { 184 | 0% { 185 | opacity: 0; 186 | -webkit-transform: translateX(-1.334em) translateZ(0); 187 | -ms-transform: translateX(-1.334em) translateZ(0); 188 | transform: translateX(-1.334em) translateZ(0); 189 | } 190 | 191 | 100% { 192 | opacity: 1; 193 | } 194 | } 195 | 196 | @keyframes fadeInLeft { 197 | 0% { 198 | opacity: 0; 199 | -webkit-transform: translateX(-1.334em) translateZ(0); 200 | -ms-transform: translateX(-1.334em) translateZ(0); 201 | transform: translateX(-1.334em) translateZ(0); 202 | } 203 | 204 | 100% { 205 | opacity: 1; 206 | } 207 | } 208 | 209 | @-webkit-keyframes fadeInRight { 210 | 0% { 211 | opacity: 0; 212 | -webkit-transform: translateX(1.334em) translateZ(0); 213 | -ms-transform: translateX(1.334em) translateZ(0); 214 | transform: translateX(1.334em) translateZ(0); 215 | } 216 | 217 | 100% { 218 | opacity: 1; 219 | } 220 | } 221 | 222 | @-moz-keyframes fadeInRight { 223 | 0% { 224 | opacity: 0; 225 | -webkit-transform: translateX(1.334em) translateZ(0); 226 | -ms-transform: translateX(1.334em) translateZ(0); 227 | transform: translateX(1.334em) translateZ(0); 228 | } 229 | 230 | 100% { 231 | opacity: 1; 232 | } 233 | } 234 | 235 | @-o-keyframes fadeInRight { 236 | 0% { 237 | opacity: 0; 238 | -webkit-transform: translateX(1.334em) translateZ(0); 239 | -ms-transform: translateX(1.334em) translateZ(0); 240 | transform: translateX(1.334em) translateZ(0); 241 | } 242 | 243 | 100% { 244 | opacity: 1; 245 | } 246 | } 247 | 248 | @keyframes fadeInRight { 249 | 0% { 250 | opacity: 0; 251 | -webkit-transform: translateX(1.334em) translateZ(0); 252 | -ms-transform: translateX(1.334em) translateZ(0); 253 | transform: translateX(1.334em) translateZ(0); 254 | } 255 | 256 | 100% { 257 | opacity: 1; 258 | } 259 | } 260 | 261 | @-webkit-keyframes fadeInZoom { 262 | 0% { 263 | opacity: 0; 264 | -webkit-transform: scale(0) translateZ(0); 265 | -ms-transform: scale(0) translateZ(0); 266 | transform: scale(0) translateZ(0); 267 | } 268 | 269 | 100% { 270 | opacity: 1; 271 | -webkit-transform: scale(1); 272 | -ms-transform: scale(1); 273 | transform: scale(1); 274 | } 275 | } 276 | 277 | @-moz-keyframes fadeInZoom { 278 | 0% { 279 | opacity: 0; 280 | -webkit-transform: scale(0) translateZ(0); 281 | -ms-transform: scale(0) translateZ(0); 282 | transform: scale(0) translateZ(0); 283 | } 284 | 285 | 100% { 286 | opacity: 1; 287 | -webkit-transform: scale(1); 288 | -ms-transform: scale(1); 289 | transform: scale(1); 290 | } 291 | } 292 | 293 | @-o-keyframes fadeInZoom { 294 | 0% { 295 | opacity: 0; 296 | -webkit-transform: scale(0) translateZ(0); 297 | -ms-transform: scale(0) translateZ(0); 298 | transform: scale(0) translateZ(0); 299 | } 300 | 301 | 100% { 302 | opacity: 1; 303 | -webkit-transform: scale(1); 304 | -ms-transform: scale(1); 305 | transform: scale(1); 306 | } 307 | } 308 | 309 | @keyframes fadeInZoom { 310 | 0% { 311 | opacity: 0; 312 | -webkit-transform: scale(0) translateZ(0); 313 | -ms-transform: scale(0) translateZ(0); 314 | transform: scale(0) translateZ(0); 315 | } 316 | 317 | 100% { 318 | opacity: 1; 319 | -webkit-transform: scale(1); 320 | -ms-transform: scale(1); 321 | transform: scale(1); 322 | } 323 | } 324 | 325 | @-webkit-keyframes fadeInZoomBig { 326 | 0% { 327 | opacity: 0; 328 | -webkit-transform: scale(0); 329 | -ms-transform: scale(0); 330 | transform: scale(0); 331 | } 332 | 333 | 60% { 334 | -webkit-transform: scale(1.25); 335 | -ms-transform: scale(1.25); 336 | transform: scale(1.25); 337 | } 338 | 339 | 80% { 340 | -webkit-transform: scale(.95); 341 | -ms-transform: scale(.95); 342 | transform: scale(.95); 343 | } 344 | 345 | 100% { 346 | opacity: 1; 347 | -webkit-transform: scale(1); 348 | -ms-transform: scale(1); 349 | transform: scale(1); 350 | } 351 | } 352 | 353 | @-moz-keyframes fadeInZoomBig { 354 | 0% { 355 | opacity: 0; 356 | -webkit-transform: scale(0); 357 | -ms-transform: scale(0); 358 | transform: scale(0); 359 | } 360 | 361 | 60% { 362 | -webkit-transform: scale(1.25); 363 | -ms-transform: scale(1.25); 364 | transform: scale(1.25); 365 | } 366 | 367 | 80% { 368 | -webkit-transform: scale(.95); 369 | -ms-transform: scale(.95); 370 | transform: scale(.95); 371 | } 372 | 373 | 100% { 374 | opacity: 1; 375 | -webkit-transform: scale(1); 376 | -ms-transform: scale(1); 377 | transform: scale(1); 378 | } 379 | } 380 | 381 | @-o-keyframes fadeInZoomBig { 382 | 0% { 383 | opacity: 0; 384 | -webkit-transform: scale(0); 385 | -ms-transform: scale(0); 386 | transform: scale(0); 387 | } 388 | 389 | 60% { 390 | -webkit-transform: scale(1.25); 391 | -ms-transform: scale(1.25); 392 | transform: scale(1.25); 393 | } 394 | 395 | 80% { 396 | -webkit-transform: scale(.95); 397 | -ms-transform: scale(.95); 398 | transform: scale(.95); 399 | } 400 | 401 | 100% { 402 | opacity: 1; 403 | -webkit-transform: scale(1); 404 | -ms-transform: scale(1); 405 | transform: scale(1); 406 | } 407 | } 408 | 409 | @keyframes fadeInZoomBig { 410 | 0% { 411 | opacity: 0; 412 | -webkit-transform: scale(0); 413 | -ms-transform: scale(0); 414 | transform: scale(0); 415 | } 416 | 417 | 60% { 418 | -webkit-transform: scale(1.25); 419 | -ms-transform: scale(1.25); 420 | transform: scale(1.25); 421 | } 422 | 423 | 80% { 424 | -webkit-transform: scale(.95); 425 | -ms-transform: scale(.95); 426 | transform: scale(.95); 427 | } 428 | 429 | 100% { 430 | opacity: 1; 431 | -webkit-transform: scale(1); 432 | -ms-transform: scale(1); 433 | transform: scale(1); 434 | } 435 | } 436 | 437 | @-webkit-keyframes slideInLeft { 438 | 0% { 439 | opacity: 0; 440 | -webkit-transform: translateX(-13.34em) translateZ(0); 441 | -ms-transform: translateX(-13.34em) translateZ(0); 442 | transform: translateX(-13.34em) translateZ(0); 443 | } 444 | 445 | 65% { 446 | opacity: 1; 447 | -webkit-transform: translateX(1.334em); 448 | -ms-transform: translateX(1.334em); 449 | transform: translateX(1.334em); 450 | } 451 | 452 | 100% { 453 | -webkit-transform: translateX(0); 454 | -ms-transform: translateX(0); 455 | transform: translateX(0); 456 | } 457 | } 458 | 459 | @-moz-keyframes slideInLeft { 460 | 0% { 461 | opacity: 0; 462 | -webkit-transform: translateX(-13.34em) translateZ(0); 463 | -ms-transform: translateX(-13.34em) translateZ(0); 464 | transform: translateX(-13.34em) translateZ(0); 465 | } 466 | 467 | 65% { 468 | opacity: 1; 469 | -webkit-transform: translateX(1.334em); 470 | -ms-transform: translateX(1.334em); 471 | transform: translateX(1.334em); 472 | } 473 | 474 | 100% { 475 | -webkit-transform: translateX(0); 476 | -ms-transform: translateX(0); 477 | transform: translateX(0); 478 | } 479 | } 480 | 481 | @-o-keyframes slideInLeft { 482 | 0% { 483 | opacity: 0; 484 | -webkit-transform: translateX(-13.34em) translateZ(0); 485 | -ms-transform: translateX(-13.34em) translateZ(0); 486 | transform: translateX(-13.34em) translateZ(0); 487 | } 488 | 489 | 65% { 490 | opacity: 1; 491 | -webkit-transform: translateX(1.334em); 492 | -ms-transform: translateX(1.334em); 493 | transform: translateX(1.334em); 494 | } 495 | 496 | 100% { 497 | -webkit-transform: translateX(0); 498 | -ms-transform: translateX(0); 499 | transform: translateX(0); 500 | } 501 | } 502 | 503 | @keyframes slideInLeft { 504 | 0% { 505 | opacity: 0; 506 | -webkit-transform: translateX(-13.34em) translateZ(0); 507 | -ms-transform: translateX(-13.34em) translateZ(0); 508 | transform: translateX(-13.34em) translateZ(0); 509 | } 510 | 511 | 65% { 512 | opacity: 1; 513 | -webkit-transform: translateX(1.334em); 514 | -ms-transform: translateX(1.334em); 515 | transform: translateX(1.334em); 516 | } 517 | 518 | 100% { 519 | -webkit-transform: translateX(0); 520 | -ms-transform: translateX(0); 521 | transform: translateX(0); 522 | } 523 | } 524 | 525 | @-webkit-keyframes slideInRight { 526 | 0% { 527 | opacity: 0; 528 | -webkit-transform: translateX(13.34em) translateZ(0); 529 | -ms-transform: translateX(13.34em) translateZ(0); 530 | transform: translateX(13.34em) translateZ(0); 531 | } 532 | 533 | 65% { 534 | opacity: 1; 535 | -webkit-transform: translateX(-1.334em); 536 | -ms-transform: translateX(-1.334em); 537 | transform: translateX(-1.334em); 538 | } 539 | 540 | 100% { 541 | -webkit-transform: translateX(0); 542 | -ms-transform: translateX(0); 543 | transform: translateX(0); 544 | } 545 | } 546 | 547 | @-moz-keyframes slideInRight { 548 | 0% { 549 | opacity: 0; 550 | -webkit-transform: translateX(13.34em) translateZ(0); 551 | -ms-transform: translateX(13.34em) translateZ(0); 552 | transform: translateX(13.34em) translateZ(0); 553 | } 554 | 555 | 65% { 556 | opacity: 1; 557 | -webkit-transform: translateX(-1.334em); 558 | -ms-transform: translateX(-1.334em); 559 | transform: translateX(-1.334em); 560 | } 561 | 562 | 100% { 563 | -webkit-transform: translateX(0); 564 | -ms-transform: translateX(0); 565 | transform: translateX(0); 566 | } 567 | } 568 | 569 | @-o-keyframes slideInRight { 570 | 0% { 571 | opacity: 0; 572 | -webkit-transform: translateX(13.34em) translateZ(0); 573 | -ms-transform: translateX(13.34em) translateZ(0); 574 | transform: translateX(13.34em) translateZ(0); 575 | } 576 | 577 | 65% { 578 | opacity: 1; 579 | -webkit-transform: translateX(-1.334em); 580 | -ms-transform: translateX(-1.334em); 581 | transform: translateX(-1.334em); 582 | } 583 | 584 | 100% { 585 | -webkit-transform: translateX(0); 586 | -ms-transform: translateX(0); 587 | transform: translateX(0); 588 | } 589 | } 590 | 591 | @keyframes slideInRight { 592 | 0% { 593 | opacity: 0; 594 | -webkit-transform: translateX(13.34em) translateZ(0); 595 | -ms-transform: translateX(13.34em) translateZ(0); 596 | transform: translateX(13.34em) translateZ(0); 597 | } 598 | 599 | 65% { 600 | opacity: 1; 601 | -webkit-transform: translateX(-1.334em); 602 | -ms-transform: translateX(-1.334em); 603 | transform: translateX(-1.334em); 604 | } 605 | 606 | 100% { 607 | -webkit-transform: translateX(0); 608 | -ms-transform: translateX(0); 609 | transform: translateX(0); 610 | } 611 | } 612 | 613 | @-webkit-keyframes dropIn { 614 | 0% { 615 | opacity: 0; 616 | -webkit-transform: translateY(-10em) rotate(0) translateZ(0); 617 | -ms-transform: translateY(-10em) rotate(0) translateZ(0); 618 | transform: translateY(-10em) rotate(0) translateZ(0); 619 | } 620 | 621 | 10% { 622 | -webkit-transform: translateY(-10em) rotate(-40deg); 623 | -ms-transform: translateY(-10em) rotate(-40deg); 624 | transform: translateY(-10em) rotate(-40deg); 625 | } 626 | 627 | 90% { 628 | opacity: 1; 629 | } 630 | 631 | 100% { 632 | -webkit-transform: translateY(0) rotate(0); 633 | -ms-transform: translateY(0) rotate(0); 634 | transform: translateY(0) rotate(0); 635 | } 636 | } 637 | 638 | @-moz-keyframes dropIn { 639 | 0% { 640 | opacity: 0; 641 | -webkit-transform: translateY(-10em) rotate(0) translateZ(0); 642 | -ms-transform: translateY(-10em) rotate(0) translateZ(0); 643 | transform: translateY(-10em) rotate(0) translateZ(0); 644 | } 645 | 646 | 10% { 647 | -webkit-transform: translateY(-10em) rotate(-40deg); 648 | -ms-transform: translateY(-10em) rotate(-40deg); 649 | transform: translateY(-10em) rotate(-40deg); 650 | } 651 | 652 | 90% { 653 | opacity: 1; 654 | } 655 | 656 | 100% { 657 | -webkit-transform: translateY(0) rotate(0); 658 | -ms-transform: translateY(0) rotate(0); 659 | transform: translateY(0) rotate(0); 660 | } 661 | } 662 | 663 | @-o-keyframes dropIn { 664 | 0% { 665 | opacity: 0; 666 | -webkit-transform: translateY(-10em) rotate(0) translateZ(0); 667 | -ms-transform: translateY(-10em) rotate(0) translateZ(0); 668 | transform: translateY(-10em) rotate(0) translateZ(0); 669 | } 670 | 671 | 10% { 672 | -webkit-transform: translateY(-10em) rotate(-40deg); 673 | -ms-transform: translateY(-10em) rotate(-40deg); 674 | transform: translateY(-10em) rotate(-40deg); 675 | } 676 | 677 | 90% { 678 | opacity: 1; 679 | } 680 | 681 | 100% { 682 | -webkit-transform: translateY(0) rotate(0); 683 | -ms-transform: translateY(0) rotate(0); 684 | transform: translateY(0) rotate(0); 685 | } 686 | } 687 | 688 | @keyframes dropIn { 689 | 0% { 690 | opacity: 0; 691 | -webkit-transform: translateY(-10em) rotate(0) translateZ(0); 692 | -ms-transform: translateY(-10em) rotate(0) translateZ(0); 693 | transform: translateY(-10em) rotate(0) translateZ(0); 694 | } 695 | 696 | 10% { 697 | -webkit-transform: translateY(-10em) rotate(-40deg); 698 | -ms-transform: translateY(-10em) rotate(-40deg); 699 | transform: translateY(-10em) rotate(-40deg); 700 | } 701 | 702 | 90% { 703 | opacity: 1; 704 | } 705 | 706 | 100% { 707 | -webkit-transform: translateY(0) rotate(0); 708 | -ms-transform: translateY(0) rotate(0); 709 | transform: translateY(0) rotate(0); 710 | } 711 | } 712 | 713 | @-webkit-keyframes riseIn { 714 | 0% { 715 | opacity: 0; 716 | -webkit-transform: translateY(10em) translateZ(0); 717 | -ms-transform: translateY(10em) translateZ(0); 718 | transform: translateY(10em) translateZ(0); 719 | } 720 | 721 | 50% { 722 | opacity: 1; 723 | } 724 | } 725 | 726 | @-moz-keyframes riseIn { 727 | 0% { 728 | opacity: 0; 729 | -webkit-transform: translateY(10em) translateZ(0); 730 | -ms-transform: translateY(10em) translateZ(0); 731 | transform: translateY(10em) translateZ(0); 732 | } 733 | 734 | 50% { 735 | opacity: 1; 736 | } 737 | } 738 | 739 | @-o-keyframes riseIn { 740 | 0% { 741 | opacity: 0; 742 | -webkit-transform: translateY(10em) translateZ(0); 743 | -ms-transform: translateY(10em) translateZ(0); 744 | transform: translateY(10em) translateZ(0); 745 | } 746 | 747 | 50% { 748 | opacity: 1; 749 | } 750 | } 751 | 752 | @keyframes riseIn { 753 | 0% { 754 | opacity: 0; 755 | -webkit-transform: translateY(10em) translateZ(0); 756 | -ms-transform: translateY(10em) translateZ(0); 757 | transform: translateY(10em) translateZ(0); 758 | } 759 | 760 | 50% { 761 | opacity: 1; 762 | } 763 | } 764 | 765 | @-webkit-keyframes popIn { 766 | 0% { 767 | opacity: 0; 768 | -webkit-transform: scale(.25) translateZ(0); 769 | -ms-transform: scale(.25) translateZ(0); 770 | transform: scale(.25) translateZ(0); 771 | } 772 | 773 | 100% { 774 | opacity: 1; 775 | -webkit-transform: scale(1); 776 | -ms-transform: scale(1); 777 | transform: scale(1); 778 | } 779 | } 780 | 781 | @-moz-keyframes popIn { 782 | 0% { 783 | opacity: 0; 784 | -webkit-transform: scale(.25) translateZ(0); 785 | -ms-transform: scale(.25) translateZ(0); 786 | transform: scale(.25) translateZ(0); 787 | } 788 | 789 | 100% { 790 | opacity: 1; 791 | -webkit-transform: scale(1); 792 | -ms-transform: scale(1); 793 | transform: scale(1); 794 | } 795 | } 796 | 797 | @-o-keyframes popIn { 798 | 0% { 799 | opacity: 0; 800 | -webkit-transform: scale(.25) translateZ(0); 801 | -ms-transform: scale(.25) translateZ(0); 802 | transform: scale(.25) translateZ(0); 803 | } 804 | 805 | 100% { 806 | opacity: 1; 807 | -webkit-transform: scale(1); 808 | -ms-transform: scale(1); 809 | transform: scale(1); 810 | } 811 | } 812 | 813 | @keyframes popIn { 814 | 0% { 815 | opacity: 0; 816 | -webkit-transform: scale(.25) translateZ(0); 817 | -ms-transform: scale(.25) translateZ(0); 818 | transform: scale(.25) translateZ(0); 819 | } 820 | 821 | 100% { 822 | opacity: 1; 823 | -webkit-transform: scale(1); 824 | -ms-transform: scale(1); 825 | transform: scale(1); 826 | } 827 | } 828 | 829 | @-webkit-keyframes turnInDown { 830 | 0% { 831 | opacity: 0; 832 | -webkit-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 833 | -ms-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 834 | transform: perspective(500px) rotateX(-225deg) translateZ(150px); 835 | } 836 | 837 | 100% { 838 | opacity: 1; 839 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 840 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 841 | transform: perspective(800px) rotateX(0deg) translateZ(0); 842 | 843 | -webkit-backface-visibility: hidden; 844 | -moz-backface-visibility: hidden; 845 | backface-visibility: hidden; 846 | } 847 | } 848 | 849 | @-moz-keyframes turnInDown { 850 | 0% { 851 | opacity: 0; 852 | -webkit-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 853 | -ms-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 854 | transform: perspective(500px) rotateX(-225deg) translateZ(150px); 855 | } 856 | 857 | 100% { 858 | opacity: 1; 859 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 860 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 861 | transform: perspective(800px) rotateX(0deg) translateZ(0); 862 | 863 | -webkit-backface-visibility: hidden; 864 | -moz-backface-visibility: hidden; 865 | backface-visibility: hidden; 866 | } 867 | } 868 | 869 | @-o-keyframes turnInDown { 870 | 0% { 871 | opacity: 0; 872 | -webkit-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 873 | -ms-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 874 | transform: perspective(500px) rotateX(-225deg) translateZ(150px); 875 | } 876 | 877 | 100% { 878 | opacity: 1; 879 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 880 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 881 | transform: perspective(800px) rotateX(0deg) translateZ(0); 882 | 883 | -webkit-backface-visibility: hidden; 884 | -moz-backface-visibility: hidden; 885 | backface-visibility: hidden; 886 | } 887 | } 888 | 889 | @keyframes turnInDown { 890 | 0% { 891 | opacity: 0; 892 | -webkit-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 893 | -ms-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 894 | transform: perspective(500px) rotateX(-225deg) translateZ(150px); 895 | } 896 | 897 | 100% { 898 | opacity: 1; 899 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 900 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 901 | transform: perspective(800px) rotateX(0deg) translateZ(0); 902 | 903 | -webkit-backface-visibility: hidden; 904 | -moz-backface-visibility: hidden; 905 | backface-visibility: hidden; 906 | } 907 | } 908 | 909 | @-webkit-keyframes turnInUp { 910 | 0% { 911 | opacity: 0; 912 | -webkit-transform: perspective(500px) rotateX(225deg) translateZ(150px); 913 | -ms-transform: perspective(500px) rotateX(225deg) translateZ(150px); 914 | transform: perspective(500px) rotateX(225deg) translateZ(150px); 915 | } 916 | 917 | 100% { 918 | opacity: 1; 919 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 920 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 921 | transform: perspective(800px) rotateX(0deg) translateZ(0); 922 | 923 | -webkit-backface-visibility: hidden; 924 | -moz-backface-visibility: hidden; 925 | backface-visibility: hidden; 926 | } 927 | } 928 | 929 | @-moz-keyframes turnInUp { 930 | 0% { 931 | opacity: 0; 932 | -webkit-transform: perspective(500px) rotateX(225deg) translateZ(150px); 933 | -ms-transform: perspective(500px) rotateX(225deg) translateZ(150px); 934 | transform: perspective(500px) rotateX(225deg) translateZ(150px); 935 | } 936 | 937 | 100% { 938 | opacity: 1; 939 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 940 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 941 | transform: perspective(800px) rotateX(0deg) translateZ(0); 942 | 943 | -webkit-backface-visibility: hidden; 944 | -moz-backface-visibility: hidden; 945 | backface-visibility: hidden; 946 | } 947 | } 948 | 949 | @-o-keyframes turnInUp { 950 | 0% { 951 | opacity: 0; 952 | -webkit-transform: perspective(500px) rotateX(225deg) translateZ(150px); 953 | -ms-transform: perspective(500px) rotateX(225deg) translateZ(150px); 954 | transform: perspective(500px) rotateX(225deg) translateZ(150px); 955 | } 956 | 957 | 100% { 958 | opacity: 1; 959 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 960 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 961 | transform: perspective(800px) rotateX(0deg) translateZ(0); 962 | 963 | -webkit-backface-visibility: hidden; 964 | -moz-backface-visibility: hidden; 965 | backface-visibility: hidden; 966 | } 967 | } 968 | 969 | @keyframes turnInUp { 970 | 0% { 971 | opacity: 0; 972 | -webkit-transform: perspective(500px) rotateX(225deg) translateZ(150px); 973 | -ms-transform: perspective(500px) rotateX(225deg) translateZ(150px); 974 | transform: perspective(500px) rotateX(225deg) translateZ(150px); 975 | } 976 | 977 | 100% { 978 | opacity: 1; 979 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 980 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 981 | transform: perspective(800px) rotateX(0deg) translateZ(0); 982 | 983 | -webkit-backface-visibility: hidden; 984 | -moz-backface-visibility: hidden; 985 | backface-visibility: hidden; 986 | } 987 | } 988 | 989 | @-webkit-keyframes stretch { 990 | 0% { 991 | -webkit-transform: scaleY(0); 992 | -ms-transform: scaleY(0); 993 | transform: scaleY(0); 994 | } 995 | 996 | 40% { 997 | -webkit-transform: scaleY(1.05); 998 | -ms-transform: scaleY(1.05); 999 | transform: scaleY(1.05); 1000 | } 1001 | 1002 | 60% { 1003 | -webkit-transform: scaleY(.97125); 1004 | -ms-transform: scaleY(.97125); 1005 | transform: scaleY(.97125); 1006 | } 1007 | 1008 | 80% { 1009 | -webkit-transform: scaleY(1.05); 1010 | -ms-transform: scaleY(1.05); 1011 | transform: scaleY(1.05); 1012 | } 1013 | 1014 | 100% { 1015 | -webkit-transform: scaleY(.97125); 1016 | -ms-transform: scaleY(.97125); 1017 | transform: scaleY(.97125); 1018 | } 1019 | 1020 | 80% { 1021 | -webkit-transform: scaleY(1.02375); 1022 | -ms-transform: scaleY(1.02375); 1023 | transform: scaleY(1.02375); 1024 | } 1025 | 1026 | 100% { 1027 | -webkit-transform: scaleY(1); 1028 | -ms-transform: scaleY(1); 1029 | transform: scaleY(1); 1030 | } 1031 | } 1032 | 1033 | @-moz-keyframes stretch { 1034 | 0% { 1035 | -webkit-transform: scaleY(0); 1036 | -ms-transform: scaleY(0); 1037 | transform: scaleY(0); 1038 | } 1039 | 1040 | 40% { 1041 | -webkit-transform: scaleY(1.05); 1042 | -ms-transform: scaleY(1.05); 1043 | transform: scaleY(1.05); 1044 | } 1045 | 1046 | 60% { 1047 | -webkit-transform: scaleY(.97125); 1048 | -ms-transform: scaleY(.97125); 1049 | transform: scaleY(.97125); 1050 | } 1051 | 1052 | 80% { 1053 | -webkit-transform: scaleY(1.05); 1054 | -ms-transform: scaleY(1.05); 1055 | transform: scaleY(1.05); 1056 | } 1057 | 1058 | 100% { 1059 | -webkit-transform: scaleY(.97125); 1060 | -ms-transform: scaleY(.97125); 1061 | transform: scaleY(.97125); 1062 | } 1063 | 1064 | 80% { 1065 | -webkit-transform: scaleY(1.02375); 1066 | -ms-transform: scaleY(1.02375); 1067 | transform: scaleY(1.02375); 1068 | } 1069 | 1070 | 100% { 1071 | -webkit-transform: scaleY(1); 1072 | -ms-transform: scaleY(1); 1073 | transform: scaleY(1); 1074 | } 1075 | } 1076 | 1077 | @-o-keyframes stretch { 1078 | 0% { 1079 | -webkit-transform: scaleY(0); 1080 | -ms-transform: scaleY(0); 1081 | transform: scaleY(0); 1082 | } 1083 | 1084 | 40% { 1085 | -webkit-transform: scaleY(1.05); 1086 | -ms-transform: scaleY(1.05); 1087 | transform: scaleY(1.05); 1088 | } 1089 | 1090 | 60% { 1091 | -webkit-transform: scaleY(.97125); 1092 | -ms-transform: scaleY(.97125); 1093 | transform: scaleY(.97125); 1094 | } 1095 | 1096 | 80% { 1097 | -webkit-transform: scaleY(1.05); 1098 | -ms-transform: scaleY(1.05); 1099 | transform: scaleY(1.05); 1100 | } 1101 | 1102 | 100% { 1103 | -webkit-transform: scaleY(.97125); 1104 | -ms-transform: scaleY(.97125); 1105 | transform: scaleY(.97125); 1106 | } 1107 | 1108 | 80% { 1109 | -webkit-transform: scaleY(1.02375); 1110 | -ms-transform: scaleY(1.02375); 1111 | transform: scaleY(1.02375); 1112 | } 1113 | 1114 | 100% { 1115 | -webkit-transform: scaleY(1); 1116 | -ms-transform: scaleY(1); 1117 | transform: scaleY(1); 1118 | } 1119 | } 1120 | 1121 | @keyframes stretch { 1122 | 0% { 1123 | -webkit-transform: scaleY(0); 1124 | -ms-transform: scaleY(0); 1125 | transform: scaleY(0); 1126 | } 1127 | 1128 | 40% { 1129 | -webkit-transform: scaleY(1.05); 1130 | -ms-transform: scaleY(1.05); 1131 | transform: scaleY(1.05); 1132 | } 1133 | 1134 | 60% { 1135 | -webkit-transform: scaleY(.97125); 1136 | -ms-transform: scaleY(.97125); 1137 | transform: scaleY(.97125); 1138 | } 1139 | 1140 | 80% { 1141 | -webkit-transform: scaleY(1.05); 1142 | -ms-transform: scaleY(1.05); 1143 | transform: scaleY(1.05); 1144 | } 1145 | 1146 | 100% { 1147 | -webkit-transform: scaleY(.97125); 1148 | -ms-transform: scaleY(.97125); 1149 | transform: scaleY(.97125); 1150 | } 1151 | 1152 | 80% { 1153 | -webkit-transform: scaleY(1.02375); 1154 | -ms-transform: scaleY(1.02375); 1155 | transform: scaleY(1.02375); 1156 | } 1157 | 1158 | 100% { 1159 | -webkit-transform: scaleY(1); 1160 | -ms-transform: scaleY(1); 1161 | transform: scaleY(1); 1162 | } 1163 | } 1164 | 1165 | @-webkit-keyframes newspaper { 1166 | 0% { 1167 | opacity: 0; 1168 | -webkit-transform: rotate(720deg) scale(.33) translateZ(0); 1169 | -ms-transform: rotate(720deg) scale(.33) translateZ(0); 1170 | transform: rotate(720deg) scale(.33) translateZ(0); 1171 | } 1172 | 1173 | 100% { 1174 | opacity: 1; 1175 | -webkit-transform: rotate(0deg) scale(1); 1176 | -ms-transform: rotate(0deg) scale(1); 1177 | transform: rotate(0deg) scale(1); 1178 | } 1179 | } 1180 | 1181 | @-moz-keyframes newspaper { 1182 | 0% { 1183 | opacity: 0; 1184 | -webkit-transform: rotate(720deg) scale(.33) translateZ(0); 1185 | -ms-transform: rotate(720deg) scale(.33) translateZ(0); 1186 | transform: rotate(720deg) scale(.33) translateZ(0); 1187 | } 1188 | 1189 | 100% { 1190 | opacity: 1; 1191 | -webkit-transform: rotate(0deg) scale(1); 1192 | -ms-transform: rotate(0deg) scale(1); 1193 | transform: rotate(0deg) scale(1); 1194 | } 1195 | } 1196 | 1197 | @-o-keyframes newspaper { 1198 | 0% { 1199 | opacity: 0; 1200 | -webkit-transform: rotate(720deg) scale(.33) translateZ(0); 1201 | -ms-transform: rotate(720deg) scale(.33) translateZ(0); 1202 | transform: rotate(720deg) scale(.33) translateZ(0); 1203 | } 1204 | 1205 | 100% { 1206 | opacity: 1; 1207 | -webkit-transform: rotate(0deg) scale(1); 1208 | -ms-transform: rotate(0deg) scale(1); 1209 | transform: rotate(0deg) scale(1); 1210 | } 1211 | } 1212 | 1213 | @keyframes newspaper { 1214 | 0% { 1215 | opacity: 0; 1216 | -webkit-transform: rotate(720deg) scale(.33) translateZ(0); 1217 | -ms-transform: rotate(720deg) scale(.33) translateZ(0); 1218 | transform: rotate(720deg) scale(.33) translateZ(0); 1219 | } 1220 | 1221 | 100% { 1222 | opacity: 1; 1223 | -webkit-transform: rotate(0deg) scale(1); 1224 | -ms-transform: rotate(0deg) scale(1); 1225 | transform: rotate(0deg) scale(1); 1226 | } 1227 | } 1228 | 1229 | @-webkit-keyframes fadeOut { 1230 | 0% { 1231 | opacity: 1; 1232 | -webkit-transform: translateZ(0); 1233 | -ms-transform: translateZ(0); 1234 | transform: translateZ(0); 1235 | } 1236 | 1237 | 100% { 1238 | opacity: 0; 1239 | } 1240 | } 1241 | 1242 | @-moz-keyframes fadeOut { 1243 | 0% { 1244 | opacity: 1; 1245 | -webkit-transform: translateZ(0); 1246 | -ms-transform: translateZ(0); 1247 | transform: translateZ(0); 1248 | } 1249 | 1250 | 100% { 1251 | opacity: 0; 1252 | } 1253 | } 1254 | 1255 | @-o-keyframes fadeOut { 1256 | 0% { 1257 | opacity: 1; 1258 | -webkit-transform: translateZ(0); 1259 | -ms-transform: translateZ(0); 1260 | transform: translateZ(0); 1261 | } 1262 | 1263 | 100% { 1264 | opacity: 0; 1265 | } 1266 | } 1267 | 1268 | @keyframes fadeOut { 1269 | 0% { 1270 | opacity: 1; 1271 | -webkit-transform: translateZ(0); 1272 | -ms-transform: translateZ(0); 1273 | transform: translateZ(0); 1274 | } 1275 | 1276 | 100% { 1277 | opacity: 0; 1278 | } 1279 | } 1280 | 1281 | @-webkit-keyframes fadeOutDown { 1282 | 0% { 1283 | opacity: 1; 1284 | -webkit-transform: translateZ(0); 1285 | -ms-transform: translateZ(0); 1286 | transform: translateZ(0); 1287 | } 1288 | 1289 | 100% { 1290 | opacity: 0; 1291 | -webkit-transform: translateY(1.334em); 1292 | -ms-transform: translateY(1.334em); 1293 | transform: translateY(1.334em); 1294 | } 1295 | } 1296 | 1297 | @-moz-keyframes fadeOutDown { 1298 | 0% { 1299 | opacity: 1; 1300 | -webkit-transform: translateZ(0); 1301 | -ms-transform: translateZ(0); 1302 | transform: translateZ(0); 1303 | } 1304 | 1305 | 100% { 1306 | opacity: 0; 1307 | -webkit-transform: translateY(1.334em); 1308 | -ms-transform: translateY(1.334em); 1309 | transform: translateY(1.334em); 1310 | } 1311 | } 1312 | 1313 | @-o-keyframes fadeOutDown { 1314 | 0% { 1315 | opacity: 1; 1316 | -webkit-transform: translateZ(0); 1317 | -ms-transform: translateZ(0); 1318 | transform: translateZ(0); 1319 | } 1320 | 1321 | 100% { 1322 | opacity: 0; 1323 | -webkit-transform: translateY(1.334em); 1324 | -ms-transform: translateY(1.334em); 1325 | transform: translateY(1.334em); 1326 | } 1327 | } 1328 | 1329 | @keyframes fadeOutDown { 1330 | 0% { 1331 | opacity: 1; 1332 | -webkit-transform: translateZ(0); 1333 | -ms-transform: translateZ(0); 1334 | transform: translateZ(0); 1335 | } 1336 | 1337 | 100% { 1338 | opacity: 0; 1339 | -webkit-transform: translateY(1.334em); 1340 | -ms-transform: translateY(1.334em); 1341 | transform: translateY(1.334em); 1342 | } 1343 | } 1344 | 1345 | @-webkit-keyframes fadeOutUp { 1346 | 0% { 1347 | opacity: 1; 1348 | -webkit-transform: translateZ(0); 1349 | -ms-transform: translateZ(0); 1350 | transform: translateZ(0); 1351 | } 1352 | 1353 | 100% { 1354 | opacity: 0; 1355 | -webkit-transform: translateY(-1.334em); 1356 | -ms-transform: translateY(-1.334em); 1357 | transform: translateY(-1.334em); 1358 | } 1359 | } 1360 | 1361 | @-moz-keyframes fadeOutUp { 1362 | 0% { 1363 | opacity: 1; 1364 | -webkit-transform: translateZ(0); 1365 | -ms-transform: translateZ(0); 1366 | transform: translateZ(0); 1367 | } 1368 | 1369 | 100% { 1370 | opacity: 0; 1371 | -webkit-transform: translateY(-1.334em); 1372 | -ms-transform: translateY(-1.334em); 1373 | transform: translateY(-1.334em); 1374 | } 1375 | } 1376 | 1377 | @-o-keyframes fadeOutUp { 1378 | 0% { 1379 | opacity: 1; 1380 | -webkit-transform: translateZ(0); 1381 | -ms-transform: translateZ(0); 1382 | transform: translateZ(0); 1383 | } 1384 | 1385 | 100% { 1386 | opacity: 0; 1387 | -webkit-transform: translateY(-1.334em); 1388 | -ms-transform: translateY(-1.334em); 1389 | transform: translateY(-1.334em); 1390 | } 1391 | } 1392 | 1393 | @keyframes fadeOutUp { 1394 | 0% { 1395 | opacity: 1; 1396 | -webkit-transform: translateZ(0); 1397 | -ms-transform: translateZ(0); 1398 | transform: translateZ(0); 1399 | } 1400 | 1401 | 100% { 1402 | opacity: 0; 1403 | -webkit-transform: translateY(-1.334em); 1404 | -ms-transform: translateY(-1.334em); 1405 | transform: translateY(-1.334em); 1406 | } 1407 | } 1408 | 1409 | @-webkit-keyframes fadeOutLeft { 1410 | 0% { 1411 | opacity: 1; 1412 | } 1413 | 1414 | 100% { 1415 | opacity: 0; 1416 | -webkit-transform: translateX(-1.334em) translateZ(0); 1417 | -ms-transform: translateX(-1.334em) translateZ(0); 1418 | transform: translateX(-1.334em) translateZ(0); 1419 | } 1420 | } 1421 | 1422 | @-moz-keyframes fadeOutLeft { 1423 | 0% { 1424 | opacity: 1; 1425 | } 1426 | 1427 | 100% { 1428 | opacity: 0; 1429 | -webkit-transform: translateX(-1.334em) translateZ(0); 1430 | -ms-transform: translateX(-1.334em) translateZ(0); 1431 | transform: translateX(-1.334em) translateZ(0); 1432 | } 1433 | } 1434 | 1435 | @-o-keyframes fadeOutLeft { 1436 | 0% { 1437 | opacity: 1; 1438 | } 1439 | 1440 | 100% { 1441 | opacity: 0; 1442 | -webkit-transform: translateX(-1.334em) translateZ(0); 1443 | -ms-transform: translateX(-1.334em) translateZ(0); 1444 | transform: translateX(-1.334em) translateZ(0); 1445 | } 1446 | } 1447 | 1448 | @keyframes fadeOutLeft { 1449 | 0% { 1450 | opacity: 1; 1451 | } 1452 | 1453 | 100% { 1454 | opacity: 0; 1455 | -webkit-transform: translateX(-1.334em) translateZ(0); 1456 | -ms-transform: translateX(-1.334em) translateZ(0); 1457 | transform: translateX(-1.334em) translateZ(0); 1458 | } 1459 | } 1460 | 1461 | @-webkit-keyframes fadeOutRight { 1462 | 0% { 1463 | opacity: 1; 1464 | } 1465 | 1466 | 100% { 1467 | opacity: 0; 1468 | -webkit-transform: translateX(1.334em) translateZ(0); 1469 | -ms-transform: translateX(1.334em) translateZ(0); 1470 | transform: translateX(1.334em) translateZ(0); 1471 | } 1472 | } 1473 | 1474 | @-moz-keyframes fadeOutRight { 1475 | 0% { 1476 | opacity: 1; 1477 | } 1478 | 1479 | 100% { 1480 | opacity: 0; 1481 | -webkit-transform: translateX(1.334em) translateZ(0); 1482 | -ms-transform: translateX(1.334em) translateZ(0); 1483 | transform: translateX(1.334em) translateZ(0); 1484 | } 1485 | } 1486 | 1487 | @-o-keyframes fadeOutRight { 1488 | 0% { 1489 | opacity: 1; 1490 | } 1491 | 1492 | 100% { 1493 | opacity: 0; 1494 | -webkit-transform: translateX(1.334em) translateZ(0); 1495 | -ms-transform: translateX(1.334em) translateZ(0); 1496 | transform: translateX(1.334em) translateZ(0); 1497 | } 1498 | } 1499 | 1500 | @keyframes fadeOutRight { 1501 | 0% { 1502 | opacity: 1; 1503 | } 1504 | 1505 | 100% { 1506 | opacity: 0; 1507 | -webkit-transform: translateX(1.334em) translateZ(0); 1508 | -ms-transform: translateX(1.334em) translateZ(0); 1509 | transform: translateX(1.334em) translateZ(0); 1510 | } 1511 | } 1512 | 1513 | @-webkit-keyframes fadeOutZoom { 1514 | 0% { 1515 | opacity: 1; 1516 | -webkit-transform: translateZ(0); 1517 | -ms-transform: translateZ(0); 1518 | transform: translateZ(0); 1519 | } 1520 | 1521 | 100% { 1522 | opacity: 0; 1523 | -webkit-transform: scale(0); 1524 | -ms-transform: scale(0); 1525 | transform: scale(0); 1526 | } 1527 | } 1528 | 1529 | @-moz-keyframes fadeOutZoom { 1530 | 0% { 1531 | opacity: 1; 1532 | -webkit-transform: translateZ(0); 1533 | -ms-transform: translateZ(0); 1534 | transform: translateZ(0); 1535 | } 1536 | 1537 | 100% { 1538 | opacity: 0; 1539 | -webkit-transform: scale(0); 1540 | -ms-transform: scale(0); 1541 | transform: scale(0); 1542 | } 1543 | } 1544 | 1545 | @-o-keyframes fadeOutZoom { 1546 | 0% { 1547 | opacity: 1; 1548 | -webkit-transform: translateZ(0); 1549 | -ms-transform: translateZ(0); 1550 | transform: translateZ(0); 1551 | } 1552 | 1553 | 100% { 1554 | opacity: 0; 1555 | -webkit-transform: scale(0); 1556 | -ms-transform: scale(0); 1557 | transform: scale(0); 1558 | } 1559 | } 1560 | 1561 | @keyframes fadeOutZoom { 1562 | 0% { 1563 | opacity: 1; 1564 | -webkit-transform: translateZ(0); 1565 | -ms-transform: translateZ(0); 1566 | transform: translateZ(0); 1567 | } 1568 | 1569 | 100% { 1570 | opacity: 0; 1571 | -webkit-transform: scale(0); 1572 | -ms-transform: scale(0); 1573 | transform: scale(0); 1574 | } 1575 | } 1576 | 1577 | @-webkit-keyframes fadeOutZoomBig { 1578 | 0% { 1579 | -webkit-transform: scale(1) translateZ(0); 1580 | -ms-transform: scale(1) translateZ(0); 1581 | transform: scale(1) translateZ(0); 1582 | } 1583 | 1584 | 40% { 1585 | -webkit-transform: scale(1.25); 1586 | -ms-transform: scale(1.25); 1587 | transform: scale(1.25); 1588 | } 1589 | 1590 | 60% { 1591 | opacity: 1; 1592 | } 1593 | 1594 | 100% { 1595 | opacity: 0; 1596 | -webkit-transform: scale(0); 1597 | -ms-transform: scale(0); 1598 | transform: scale(0); 1599 | } 1600 | } 1601 | 1602 | @-moz-keyframes fadeOutZoomBig { 1603 | 0% { 1604 | -webkit-transform: scale(1) translateZ(0); 1605 | -ms-transform: scale(1) translateZ(0); 1606 | transform: scale(1) translateZ(0); 1607 | } 1608 | 1609 | 40% { 1610 | -webkit-transform: scale(1.25); 1611 | -ms-transform: scale(1.25); 1612 | transform: scale(1.25); 1613 | } 1614 | 1615 | 60% { 1616 | opacity: 1; 1617 | } 1618 | 1619 | 100% { 1620 | opacity: 0; 1621 | -webkit-transform: scale(0); 1622 | -ms-transform: scale(0); 1623 | transform: scale(0); 1624 | } 1625 | } 1626 | 1627 | @-o-keyframes fadeOutZoomBig { 1628 | 0% { 1629 | -webkit-transform: scale(1) translateZ(0); 1630 | -ms-transform: scale(1) translateZ(0); 1631 | transform: scale(1) translateZ(0); 1632 | } 1633 | 1634 | 40% { 1635 | -webkit-transform: scale(1.25); 1636 | -ms-transform: scale(1.25); 1637 | transform: scale(1.25); 1638 | } 1639 | 1640 | 60% { 1641 | opacity: 1; 1642 | } 1643 | 1644 | 100% { 1645 | opacity: 0; 1646 | -webkit-transform: scale(0); 1647 | -ms-transform: scale(0); 1648 | transform: scale(0); 1649 | } 1650 | } 1651 | 1652 | @keyframes fadeOutZoomBig { 1653 | 0% { 1654 | -webkit-transform: scale(1) translateZ(0); 1655 | -ms-transform: scale(1) translateZ(0); 1656 | transform: scale(1) translateZ(0); 1657 | } 1658 | 1659 | 40% { 1660 | -webkit-transform: scale(1.25); 1661 | -ms-transform: scale(1.25); 1662 | transform: scale(1.25); 1663 | } 1664 | 1665 | 60% { 1666 | opacity: 1; 1667 | } 1668 | 1669 | 100% { 1670 | opacity: 0; 1671 | -webkit-transform: scale(0); 1672 | -ms-transform: scale(0); 1673 | transform: scale(0); 1674 | } 1675 | } 1676 | 1677 | @-webkit-keyframes slideOutLeft { 1678 | 35% { 1679 | opacity: 1; 1680 | -webkit-transform: translateX(1.334em) translateZ(0); 1681 | -ms-transform: translateX(1.334em) translateZ(0); 1682 | transform: translateX(1.334em) translateZ(0); 1683 | } 1684 | 1685 | 100% { 1686 | opacity: 0; 1687 | -webkit-transform: translateX(-13.34em); 1688 | -ms-transform: translateX(-13.34em); 1689 | transform: translateX(-13.34em); 1690 | } 1691 | } 1692 | 1693 | @-moz-keyframes slideOutLeft { 1694 | 35% { 1695 | opacity: 1; 1696 | -webkit-transform: translateX(1.334em) translateZ(0); 1697 | -ms-transform: translateX(1.334em) translateZ(0); 1698 | transform: translateX(1.334em) translateZ(0); 1699 | } 1700 | 1701 | 100% { 1702 | opacity: 0; 1703 | -webkit-transform: translateX(-13.34em); 1704 | -ms-transform: translateX(-13.34em); 1705 | transform: translateX(-13.34em); 1706 | } 1707 | } 1708 | 1709 | @-o-keyframes slideOutLeft { 1710 | 35% { 1711 | opacity: 1; 1712 | -webkit-transform: translateX(1.334em) translateZ(0); 1713 | -ms-transform: translateX(1.334em) translateZ(0); 1714 | transform: translateX(1.334em) translateZ(0); 1715 | } 1716 | 1717 | 100% { 1718 | opacity: 0; 1719 | -webkit-transform: translateX(-13.34em); 1720 | -ms-transform: translateX(-13.34em); 1721 | transform: translateX(-13.34em); 1722 | } 1723 | } 1724 | 1725 | @keyframes slideOutLeft { 1726 | 35% { 1727 | opacity: 1; 1728 | -webkit-transform: translateX(1.334em) translateZ(0); 1729 | -ms-transform: translateX(1.334em) translateZ(0); 1730 | transform: translateX(1.334em) translateZ(0); 1731 | } 1732 | 1733 | 100% { 1734 | opacity: 0; 1735 | -webkit-transform: translateX(-13.34em); 1736 | -ms-transform: translateX(-13.34em); 1737 | transform: translateX(-13.34em); 1738 | } 1739 | } 1740 | 1741 | @-webkit-keyframes slideOutRight { 1742 | 35% { 1743 | opacity: 1; 1744 | -webkit-transform: translateX(-1.334em) translateZ(0); 1745 | -ms-transform: translateX(-1.334em) translateZ(0); 1746 | transform: translateX(-1.334em) translateZ(0); 1747 | } 1748 | 1749 | 100% { 1750 | opacity: 0; 1751 | -webkit-transform: translateX(13.34em); 1752 | -ms-transform: translateX(13.34em); 1753 | transform: translateX(13.34em); 1754 | } 1755 | } 1756 | 1757 | @-moz-keyframes slideOutRight { 1758 | 35% { 1759 | opacity: 1; 1760 | -webkit-transform: translateX(-1.334em) translateZ(0); 1761 | -ms-transform: translateX(-1.334em) translateZ(0); 1762 | transform: translateX(-1.334em) translateZ(0); 1763 | } 1764 | 1765 | 100% { 1766 | opacity: 0; 1767 | -webkit-transform: translateX(13.34em); 1768 | -ms-transform: translateX(13.34em); 1769 | transform: translateX(13.34em); 1770 | } 1771 | } 1772 | 1773 | @-o-keyframes slideOutRight { 1774 | 35% { 1775 | opacity: 1; 1776 | -webkit-transform: translateX(-1.334em) translateZ(0); 1777 | -ms-transform: translateX(-1.334em) translateZ(0); 1778 | transform: translateX(-1.334em) translateZ(0); 1779 | } 1780 | 1781 | 100% { 1782 | opacity: 0; 1783 | -webkit-transform: translateX(13.34em); 1784 | -ms-transform: translateX(13.34em); 1785 | transform: translateX(13.34em); 1786 | } 1787 | } 1788 | 1789 | @keyframes slideOutRight { 1790 | 35% { 1791 | opacity: 1; 1792 | -webkit-transform: translateX(-1.334em) translateZ(0); 1793 | -ms-transform: translateX(-1.334em) translateZ(0); 1794 | transform: translateX(-1.334em) translateZ(0); 1795 | } 1796 | 1797 | 100% { 1798 | opacity: 0; 1799 | -webkit-transform: translateX(13.34em); 1800 | -ms-transform: translateX(13.34em); 1801 | transform: translateX(13.34em); 1802 | } 1803 | } 1804 | 1805 | @-webkit-keyframes explode { 1806 | 0% { 1807 | opacity: 1; 1808 | -webkit-transform: translateZ(0); 1809 | -ms-transform: translateZ(0); 1810 | transform: translateZ(0); 1811 | } 1812 | 1813 | 100% { 1814 | opacity: 0; 1815 | -webkit-transform: scale(5); 1816 | -ms-transform: scale(5); 1817 | transform: scale(5); 1818 | } 1819 | } 1820 | 1821 | @-moz-keyframes explode { 1822 | 0% { 1823 | opacity: 1; 1824 | -webkit-transform: translateZ(0); 1825 | -ms-transform: translateZ(0); 1826 | transform: translateZ(0); 1827 | } 1828 | 1829 | 100% { 1830 | opacity: 0; 1831 | -webkit-transform: scale(5); 1832 | -ms-transform: scale(5); 1833 | transform: scale(5); 1834 | } 1835 | } 1836 | 1837 | @-o-keyframes explode { 1838 | 0% { 1839 | opacity: 1; 1840 | -webkit-transform: translateZ(0); 1841 | -ms-transform: translateZ(0); 1842 | transform: translateZ(0); 1843 | } 1844 | 1845 | 100% { 1846 | opacity: 0; 1847 | -webkit-transform: scale(5); 1848 | -ms-transform: scale(5); 1849 | transform: scale(5); 1850 | } 1851 | } 1852 | 1853 | @keyframes explode { 1854 | 0% { 1855 | opacity: 1; 1856 | -webkit-transform: translateZ(0); 1857 | -ms-transform: translateZ(0); 1858 | transform: translateZ(0); 1859 | } 1860 | 1861 | 100% { 1862 | opacity: 0; 1863 | -webkit-transform: scale(5); 1864 | -ms-transform: scale(5); 1865 | transform: scale(5); 1866 | } 1867 | } 1868 | 1869 | @-webkit-keyframes dropOut { 1870 | 0% { 1871 | opacity: 1; 1872 | -webkit-transform: translateZ(0); 1873 | -ms-transform: translateZ(0); 1874 | transform: translateZ(0); 1875 | } 1876 | 1877 | 100% { 1878 | opacity: 0; 1879 | -webkit-transform: translateY(10em) rotate(-40deg); 1880 | -ms-transform: translateY(10em) rotate(-40deg); 1881 | transform: translateY(10em) rotate(-40deg); 1882 | } 1883 | } 1884 | 1885 | @-moz-keyframes dropOut { 1886 | 0% { 1887 | opacity: 1; 1888 | -webkit-transform: translateZ(0); 1889 | -ms-transform: translateZ(0); 1890 | transform: translateZ(0); 1891 | } 1892 | 1893 | 100% { 1894 | opacity: 0; 1895 | -webkit-transform: translateY(10em) rotate(-40deg); 1896 | -ms-transform: translateY(10em) rotate(-40deg); 1897 | transform: translateY(10em) rotate(-40deg); 1898 | } 1899 | } 1900 | 1901 | @-o-keyframes dropOut { 1902 | 0% { 1903 | opacity: 1; 1904 | -webkit-transform: translateZ(0); 1905 | -ms-transform: translateZ(0); 1906 | transform: translateZ(0); 1907 | } 1908 | 1909 | 100% { 1910 | opacity: 0; 1911 | -webkit-transform: translateY(10em) rotate(-40deg); 1912 | -ms-transform: translateY(10em) rotate(-40deg); 1913 | transform: translateY(10em) rotate(-40deg); 1914 | } 1915 | } 1916 | 1917 | @keyframes dropOut { 1918 | 0% { 1919 | opacity: 1; 1920 | -webkit-transform: translateZ(0); 1921 | -ms-transform: translateZ(0); 1922 | transform: translateZ(0); 1923 | } 1924 | 1925 | 100% { 1926 | opacity: 0; 1927 | -webkit-transform: translateY(10em) rotate(-40deg); 1928 | -ms-transform: translateY(10em) rotate(-40deg); 1929 | transform: translateY(10em) rotate(-40deg); 1930 | } 1931 | } 1932 | 1933 | @-webkit-keyframes riseOut { 1934 | 0% { 1935 | opacity: 1; 1936 | -webkit-transform: translateZ(0); 1937 | -ms-transform: translateZ(0); 1938 | transform: translateZ(0); 1939 | } 1940 | 1941 | 100% { 1942 | opacity: 0; 1943 | -webkit-transform: translateY(-10em); 1944 | -ms-transform: translateY(-10em); 1945 | transform: translateY(-10em); 1946 | } 1947 | } 1948 | 1949 | @-moz-keyframes riseOut { 1950 | 0% { 1951 | opacity: 1; 1952 | -webkit-transform: translateZ(0); 1953 | -ms-transform: translateZ(0); 1954 | transform: translateZ(0); 1955 | } 1956 | 1957 | 100% { 1958 | opacity: 0; 1959 | -webkit-transform: translateY(-10em); 1960 | -ms-transform: translateY(-10em); 1961 | transform: translateY(-10em); 1962 | } 1963 | } 1964 | 1965 | @-o-keyframes riseOut { 1966 | 0% { 1967 | opacity: 1; 1968 | -webkit-transform: translateZ(0); 1969 | -ms-transform: translateZ(0); 1970 | transform: translateZ(0); 1971 | } 1972 | 1973 | 100% { 1974 | opacity: 0; 1975 | -webkit-transform: translateY(-10em); 1976 | -ms-transform: translateY(-10em); 1977 | transform: translateY(-10em); 1978 | } 1979 | } 1980 | 1981 | @keyframes riseOut { 1982 | 0% { 1983 | opacity: 1; 1984 | -webkit-transform: translateZ(0); 1985 | -ms-transform: translateZ(0); 1986 | transform: translateZ(0); 1987 | } 1988 | 1989 | 100% { 1990 | opacity: 0; 1991 | -webkit-transform: translateY(-10em); 1992 | -ms-transform: translateY(-10em); 1993 | transform: translateY(-10em); 1994 | } 1995 | } 1996 | 1997 | @-webkit-keyframes poof { 1998 | 0% { 1999 | opacity: 1; 2000 | -webkit-transform: scale(1); 2001 | -ms-transform: scale(1); 2002 | transform: scale(1); 2003 | 2004 | -webkit-filter: blur(0); 2005 | } 2006 | 2007 | 100% { 2008 | opacity: 0; 2009 | -webkit-transform: scale(2); 2010 | -ms-transform: scale(2); 2011 | transform: scale(2); 2012 | 2013 | -webkit-filter: blur(40px); 2014 | } 2015 | } 2016 | 2017 | @-moz-keyframes poof { 2018 | 0% { 2019 | opacity: 1; 2020 | -webkit-transform: scale(1); 2021 | -ms-transform: scale(1); 2022 | transform: scale(1); 2023 | 2024 | -webkit-filter: blur(0); 2025 | } 2026 | 2027 | 100% { 2028 | opacity: 0; 2029 | -webkit-transform: scale(2); 2030 | -ms-transform: scale(2); 2031 | transform: scale(2); 2032 | 2033 | -webkit-filter: blur(40px); 2034 | } 2035 | } 2036 | 2037 | @-o-keyframes poof { 2038 | 0% { 2039 | opacity: 1; 2040 | -webkit-transform: scale(1); 2041 | -ms-transform: scale(1); 2042 | transform: scale(1); 2043 | 2044 | -webkit-filter: blur(0); 2045 | } 2046 | 2047 | 100% { 2048 | opacity: 0; 2049 | -webkit-transform: scale(2); 2050 | -ms-transform: scale(2); 2051 | transform: scale(2); 2052 | 2053 | -webkit-filter: blur(40px); 2054 | } 2055 | } 2056 | 2057 | @keyframes poof { 2058 | 0% { 2059 | opacity: 1; 2060 | -webkit-transform: scale(1); 2061 | -ms-transform: scale(1); 2062 | transform: scale(1); 2063 | 2064 | -webkit-filter: blur(0); 2065 | } 2066 | 2067 | 100% { 2068 | opacity: 0; 2069 | -webkit-transform: scale(2); 2070 | -ms-transform: scale(2); 2071 | transform: scale(2); 2072 | 2073 | -webkit-filter: blur(40px); 2074 | } 2075 | } 2076 | 2077 | @-webkit-keyframes turnOutDown { 2078 | 0% { 2079 | opacity: 1; 2080 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 2081 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 2082 | transform: perspective(800px) rotateX(0deg) translateZ(0); 2083 | 2084 | -webkit-backface-visibility: hidden; 2085 | backface-visibility: hidden; 2086 | } 2087 | 2088 | 100% { 2089 | opacity: 0; 2090 | -webkit-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2091 | -ms-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2092 | transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2093 | } 2094 | } 2095 | 2096 | @-moz-keyframes turnOutDown { 2097 | 0% { 2098 | opacity: 1; 2099 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 2100 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 2101 | transform: perspective(800px) rotateX(0deg) translateZ(0); 2102 | 2103 | -webkit-backface-visibility: hidden; 2104 | backface-visibility: hidden; 2105 | } 2106 | 2107 | 100% { 2108 | opacity: 0; 2109 | -webkit-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2110 | -ms-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2111 | transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2112 | } 2113 | } 2114 | 2115 | @-o-keyframes turnOutDown { 2116 | 0% { 2117 | opacity: 1; 2118 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 2119 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 2120 | transform: perspective(800px) rotateX(0deg) translateZ(0); 2121 | 2122 | -webkit-backface-visibility: hidden; 2123 | backface-visibility: hidden; 2124 | } 2125 | 2126 | 100% { 2127 | opacity: 0; 2128 | -webkit-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2129 | -ms-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2130 | transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2131 | } 2132 | } 2133 | 2134 | @keyframes turnOutDown { 2135 | 0% { 2136 | opacity: 1; 2137 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 2138 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 2139 | transform: perspective(800px) rotateX(0deg) translateZ(0); 2140 | 2141 | -webkit-backface-visibility: hidden; 2142 | backface-visibility: hidden; 2143 | } 2144 | 2145 | 100% { 2146 | opacity: 0; 2147 | -webkit-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2148 | -ms-transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2149 | transform: perspective(500px) rotateX(-225deg) translateZ(150px); 2150 | } 2151 | } 2152 | 2153 | @-webkit-keyframes turnOutUp { 2154 | 0% { 2155 | opacity: 1; 2156 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 2157 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 2158 | transform: perspective(800px) rotateX(0deg) translateZ(0); 2159 | 2160 | -webkit-backface-visibility: hidden; 2161 | backface-visibility: hidden; 2162 | } 2163 | 2164 | 100% { 2165 | opacity: 0; 2166 | -webkit-transform: perspective(500px) rotateX(225deg) translateZ(150px); 2167 | -ms-transform: perspective(500px) rotateX(225deg) translateZ(150px); 2168 | transform: perspective(500px) rotateX(225deg) translateZ(150px); 2169 | } 2170 | } 2171 | 2172 | @-moz-keyframes turnOutUp { 2173 | 0% { 2174 | opacity: 1; 2175 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 2176 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 2177 | transform: perspective(800px) rotateX(0deg) translateZ(0); 2178 | 2179 | -webkit-backface-visibility: hidden; 2180 | backface-visibility: hidden; 2181 | } 2182 | 2183 | 100% { 2184 | opacity: 0; 2185 | -webkit-transform: perspective(500px) rotateX(225deg) translateZ(150px); 2186 | -ms-transform: perspective(500px) rotateX(225deg) translateZ(150px); 2187 | transform: perspective(500px) rotateX(225deg) translateZ(150px); 2188 | } 2189 | } 2190 | 2191 | @-o-keyframes turnOutUp { 2192 | 0% { 2193 | opacity: 1; 2194 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 2195 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 2196 | transform: perspective(800px) rotateX(0deg) translateZ(0); 2197 | 2198 | -webkit-backface-visibility: hidden; 2199 | backface-visibility: hidden; 2200 | } 2201 | 2202 | 100% { 2203 | opacity: 0; 2204 | -webkit-transform: perspective(500px) rotateX(225deg) translateZ(150px); 2205 | -ms-transform: perspective(500px) rotateX(225deg) translateZ(150px); 2206 | transform: perspective(500px) rotateX(225deg) translateZ(150px); 2207 | } 2208 | } 2209 | 2210 | @keyframes turnOutUp { 2211 | 0% { 2212 | opacity: 1; 2213 | -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0); 2214 | -ms-transform: perspective(800px) rotateX(0deg) translateZ(0); 2215 | transform: perspective(800px) rotateX(0deg) translateZ(0); 2216 | 2217 | -webkit-backface-visibility: hidden; 2218 | backface-visibility: hidden; 2219 | } 2220 | 2221 | 100% { 2222 | opacity: 0; 2223 | -webkit-transform: perspective(500px) rotateX(225deg) translateZ(150px); 2224 | -ms-transform: perspective(500px) rotateX(225deg) translateZ(150px); 2225 | transform: perspective(500px) rotateX(225deg) translateZ(150px); 2226 | } 2227 | } 2228 | 2229 | @-webkit-keyframes compress { 2230 | 0% { 2231 | -webkit-transform: scaleY(1) translateZ(0); 2232 | -ms-transform: scaleY(1) translateZ(0); 2233 | transform: scaleY(1) translateZ(0); 2234 | } 2235 | 2236 | 30% { 2237 | -webkit-transform: scaleY(1.05); 2238 | -ms-transform: scaleY(1.05); 2239 | transform: scaleY(1.05); 2240 | } 2241 | 2242 | 50% { 2243 | -webkit-transform: scaleY(.97125); 2244 | -ms-transform: scaleY(.97125); 2245 | transform: scaleY(.97125); 2246 | } 2247 | 2248 | 100% { 2249 | -webkit-transform: scaleY(0); 2250 | -ms-transform: scaleY(0); 2251 | transform: scaleY(0); 2252 | } 2253 | } 2254 | 2255 | @-moz-keyframes compress { 2256 | 0% { 2257 | -webkit-transform: scaleY(1) translateZ(0); 2258 | -ms-transform: scaleY(1) translateZ(0); 2259 | transform: scaleY(1) translateZ(0); 2260 | } 2261 | 2262 | 30% { 2263 | -webkit-transform: scaleY(1.05); 2264 | -ms-transform: scaleY(1.05); 2265 | transform: scaleY(1.05); 2266 | } 2267 | 2268 | 50% { 2269 | -webkit-transform: scaleY(.97125); 2270 | -ms-transform: scaleY(.97125); 2271 | transform: scaleY(.97125); 2272 | } 2273 | 2274 | 100% { 2275 | -webkit-transform: scaleY(0); 2276 | -ms-transform: scaleY(0); 2277 | transform: scaleY(0); 2278 | } 2279 | } 2280 | 2281 | @-o-keyframes compress { 2282 | 0% { 2283 | -webkit-transform: scaleY(1) translateZ(0); 2284 | -ms-transform: scaleY(1) translateZ(0); 2285 | transform: scaleY(1) translateZ(0); 2286 | } 2287 | 2288 | 30% { 2289 | -webkit-transform: scaleY(1.05); 2290 | -ms-transform: scaleY(1.05); 2291 | transform: scaleY(1.05); 2292 | } 2293 | 2294 | 50% { 2295 | -webkit-transform: scaleY(.97125); 2296 | -ms-transform: scaleY(.97125); 2297 | transform: scaleY(.97125); 2298 | } 2299 | 2300 | 100% { 2301 | -webkit-transform: scaleY(0); 2302 | -ms-transform: scaleY(0); 2303 | transform: scaleY(0); 2304 | } 2305 | } 2306 | 2307 | @keyframes compress { 2308 | 0% { 2309 | -webkit-transform: scaleY(1) translateZ(0); 2310 | -ms-transform: scaleY(1) translateZ(0); 2311 | transform: scaleY(1) translateZ(0); 2312 | } 2313 | 2314 | 30% { 2315 | -webkit-transform: scaleY(1.05); 2316 | -ms-transform: scaleY(1.05); 2317 | transform: scaleY(1.05); 2318 | } 2319 | 2320 | 50% { 2321 | -webkit-transform: scaleY(.97125); 2322 | -ms-transform: scaleY(.97125); 2323 | transform: scaleY(.97125); 2324 | } 2325 | 2326 | 100% { 2327 | -webkit-transform: scaleY(0); 2328 | -ms-transform: scaleY(0); 2329 | transform: scaleY(0); 2330 | } 2331 | } 2332 | 2333 | @-webkit-keyframes float { 2334 | 0%, 50%, 100% { 2335 | -webkit-transform: translateY(-.25em) translateZ(0); 2336 | -ms-transform: translateY(-.25em) translateZ(0); 2337 | transform: translateY(-.25em) translateZ(0); 2338 | } 2339 | 2340 | 25% { 2341 | -webkit-transform: translateY(.25em) rotate(1deg); 2342 | -ms-transform: translateY(.25em) rotate(1deg); 2343 | transform: translateY(.25em) rotate(1deg); 2344 | } 2345 | 2346 | 75% { 2347 | -webkit-transform: translateY(.25em) rotate(-1deg); 2348 | -ms-transform: translateY(.25em) rotate(-1deg); 2349 | transform: translateY(.25em) rotate(-1deg); 2350 | } 2351 | } 2352 | 2353 | @-moz-keyframes float { 2354 | 0%, 50%, 100% { 2355 | -webkit-transform: translateY(-.25em) translateZ(0); 2356 | -ms-transform: translateY(-.25em) translateZ(0); 2357 | transform: translateY(-.25em) translateZ(0); 2358 | } 2359 | 2360 | 25% { 2361 | -webkit-transform: translateY(.25em) rotate(1deg); 2362 | -ms-transform: translateY(.25em) rotate(1deg); 2363 | transform: translateY(.25em) rotate(1deg); 2364 | } 2365 | 2366 | 75% { 2367 | -webkit-transform: translateY(.25em) rotate(-1deg); 2368 | -ms-transform: translateY(.25em) rotate(-1deg); 2369 | transform: translateY(.25em) rotate(-1deg); 2370 | } 2371 | } 2372 | 2373 | @-o-keyframes float { 2374 | 0%, 50%, 100% { 2375 | -webkit-transform: translateY(-.25em) translateZ(0); 2376 | -ms-transform: translateY(-.25em) translateZ(0); 2377 | transform: translateY(-.25em) translateZ(0); 2378 | } 2379 | 2380 | 25% { 2381 | -webkit-transform: translateY(.25em) rotate(1deg); 2382 | -ms-transform: translateY(.25em) rotate(1deg); 2383 | transform: translateY(.25em) rotate(1deg); 2384 | } 2385 | 2386 | 75% { 2387 | -webkit-transform: translateY(.25em) rotate(-1deg); 2388 | -ms-transform: translateY(.25em) rotate(-1deg); 2389 | transform: translateY(.25em) rotate(-1deg); 2390 | } 2391 | } 2392 | 2393 | @keyframes float { 2394 | 0%, 50%, 100% { 2395 | -webkit-transform: translateY(-.25em) translateZ(0); 2396 | -ms-transform: translateY(-.25em) translateZ(0); 2397 | transform: translateY(-.25em) translateZ(0); 2398 | } 2399 | 2400 | 25% { 2401 | -webkit-transform: translateY(.25em) rotate(1deg); 2402 | -ms-transform: translateY(.25em) rotate(1deg); 2403 | transform: translateY(.25em) rotate(1deg); 2404 | } 2405 | 2406 | 75% { 2407 | -webkit-transform: translateY(.25em) rotate(-1deg); 2408 | -ms-transform: translateY(.25em) rotate(-1deg); 2409 | transform: translateY(.25em) rotate(-1deg); 2410 | } 2411 | } 2412 | 2413 | @-webkit-keyframes shake { 2414 | 0%, 100% { 2415 | -webkit-transform: translateX(0) translateZ(0); 2416 | -ms-transform: translateX(0) translateZ(0); 2417 | transform: translateX(0) translateZ(0); 2418 | } 2419 | 2420 | 15% { 2421 | -webkit-transform: translateX(.55em); 2422 | -ms-transform: translateX(.55em); 2423 | transform: translateX(.55em); 2424 | } 2425 | 2426 | 35% { 2427 | -webkit-transform: translateX(-.55em); 2428 | -ms-transform: translateX(-.55em); 2429 | transform: translateX(-.55em); 2430 | } 2431 | 2432 | 50% { 2433 | -webkit-transform: translateX(.275em); 2434 | -ms-transform: translateX(.275em); 2435 | transform: translateX(.275em); 2436 | } 2437 | 2438 | 65% { 2439 | -webkit-transform: translateX(-.275em); 2440 | -ms-transform: translateX(-.275em); 2441 | transform: translateX(-.275em); 2442 | } 2443 | 2444 | 85% { 2445 | -webkit-transform: translateX(.18333em); 2446 | -ms-transform: translateX(.18333em); 2447 | transform: translateX(.18333em); 2448 | } 2449 | } 2450 | 2451 | @-moz-keyframes shake { 2452 | 0%, 100% { 2453 | -webkit-transform: translateX(0) translateZ(0); 2454 | -ms-transform: translateX(0) translateZ(0); 2455 | transform: translateX(0) translateZ(0); 2456 | } 2457 | 2458 | 15% { 2459 | -webkit-transform: translateX(.55em); 2460 | -ms-transform: translateX(.55em); 2461 | transform: translateX(.55em); 2462 | } 2463 | 2464 | 35% { 2465 | -webkit-transform: translateX(-.55em); 2466 | -ms-transform: translateX(-.55em); 2467 | transform: translateX(-.55em); 2468 | } 2469 | 2470 | 50% { 2471 | -webkit-transform: translateX(.275em); 2472 | -ms-transform: translateX(.275em); 2473 | transform: translateX(.275em); 2474 | } 2475 | 2476 | 65% { 2477 | -webkit-transform: translateX(-.275em); 2478 | -ms-transform: translateX(-.275em); 2479 | transform: translateX(-.275em); 2480 | } 2481 | 2482 | 85% { 2483 | -webkit-transform: translateX(.18333em); 2484 | -ms-transform: translateX(.18333em); 2485 | transform: translateX(.18333em); 2486 | } 2487 | } 2488 | 2489 | @-o-keyframes shake { 2490 | 0%, 100% { 2491 | -webkit-transform: translateX(0) translateZ(0); 2492 | -ms-transform: translateX(0) translateZ(0); 2493 | transform: translateX(0) translateZ(0); 2494 | } 2495 | 2496 | 15% { 2497 | -webkit-transform: translateX(.55em); 2498 | -ms-transform: translateX(.55em); 2499 | transform: translateX(.55em); 2500 | } 2501 | 2502 | 35% { 2503 | -webkit-transform: translateX(-.55em); 2504 | -ms-transform: translateX(-.55em); 2505 | transform: translateX(-.55em); 2506 | } 2507 | 2508 | 50% { 2509 | -webkit-transform: translateX(.275em); 2510 | -ms-transform: translateX(.275em); 2511 | transform: translateX(.275em); 2512 | } 2513 | 2514 | 65% { 2515 | -webkit-transform: translateX(-.275em); 2516 | -ms-transform: translateX(-.275em); 2517 | transform: translateX(-.275em); 2518 | } 2519 | 2520 | 85% { 2521 | -webkit-transform: translateX(.18333em); 2522 | -ms-transform: translateX(.18333em); 2523 | transform: translateX(.18333em); 2524 | } 2525 | } 2526 | 2527 | @keyframes shake { 2528 | 0%, 100% { 2529 | -webkit-transform: translateX(0) translateZ(0); 2530 | -ms-transform: translateX(0) translateZ(0); 2531 | transform: translateX(0) translateZ(0); 2532 | } 2533 | 2534 | 15% { 2535 | -webkit-transform: translateX(.55em); 2536 | -ms-transform: translateX(.55em); 2537 | transform: translateX(.55em); 2538 | } 2539 | 2540 | 35% { 2541 | -webkit-transform: translateX(-.55em); 2542 | -ms-transform: translateX(-.55em); 2543 | transform: translateX(-.55em); 2544 | } 2545 | 2546 | 50% { 2547 | -webkit-transform: translateX(.275em); 2548 | -ms-transform: translateX(.275em); 2549 | transform: translateX(.275em); 2550 | } 2551 | 2552 | 65% { 2553 | -webkit-transform: translateX(-.275em); 2554 | -ms-transform: translateX(-.275em); 2555 | transform: translateX(-.275em); 2556 | } 2557 | 2558 | 85% { 2559 | -webkit-transform: translateX(.18333em); 2560 | -ms-transform: translateX(.18333em); 2561 | transform: translateX(.18333em); 2562 | } 2563 | } 2564 | 2565 | @-webkit-keyframes teeter { 2566 | 0%, 100% { 2567 | -webkit-transform: rotate(0deg) translateZ(0); 2568 | -ms-transform: rotate(0deg) translateZ(0); 2569 | transform: rotate(0deg) translateZ(0); 2570 | } 2571 | 2572 | 15% { 2573 | -webkit-transform: rotate(10deg); 2574 | -ms-transform: rotate(10deg); 2575 | transform: rotate(10deg); 2576 | } 2577 | 2578 | 30% { 2579 | -webkit-transform: rotate(-10deg); 2580 | -ms-transform: rotate(-10deg); 2581 | transform: rotate(-10deg); 2582 | } 2583 | 2584 | 45% { 2585 | -webkit-transform: rotate(5deg); 2586 | -ms-transform: rotate(5deg); 2587 | transform: rotate(5deg); 2588 | } 2589 | 2590 | 60% { 2591 | -webkit-transform: rotate(-5deg); 2592 | -ms-transform: rotate(-5deg); 2593 | transform: rotate(-5deg); 2594 | } 2595 | 2596 | 73% { 2597 | -webkit-transform: rotate(3.33333deg); 2598 | -ms-transform: rotate(3.33333deg); 2599 | transform: rotate(3.33333deg); 2600 | } 2601 | 2602 | 86% { 2603 | -webkit-transform: rotate(-3.33333deg); 2604 | -ms-transform: rotate(-3.33333deg); 2605 | transform: rotate(-3.33333deg); 2606 | } 2607 | } 2608 | 2609 | @-moz-keyframes teeter { 2610 | 0%, 100% { 2611 | -webkit-transform: rotate(0deg) translateZ(0); 2612 | -ms-transform: rotate(0deg) translateZ(0); 2613 | transform: rotate(0deg) translateZ(0); 2614 | } 2615 | 2616 | 15% { 2617 | -webkit-transform: rotate(10deg); 2618 | -ms-transform: rotate(10deg); 2619 | transform: rotate(10deg); 2620 | } 2621 | 2622 | 30% { 2623 | -webkit-transform: rotate(-10deg); 2624 | -ms-transform: rotate(-10deg); 2625 | transform: rotate(-10deg); 2626 | } 2627 | 2628 | 45% { 2629 | -webkit-transform: rotate(5deg); 2630 | -ms-transform: rotate(5deg); 2631 | transform: rotate(5deg); 2632 | } 2633 | 2634 | 60% { 2635 | -webkit-transform: rotate(-5deg); 2636 | -ms-transform: rotate(-5deg); 2637 | transform: rotate(-5deg); 2638 | } 2639 | 2640 | 73% { 2641 | -webkit-transform: rotate(3.33333deg); 2642 | -ms-transform: rotate(3.33333deg); 2643 | transform: rotate(3.33333deg); 2644 | } 2645 | 2646 | 86% { 2647 | -webkit-transform: rotate(-3.33333deg); 2648 | -ms-transform: rotate(-3.33333deg); 2649 | transform: rotate(-3.33333deg); 2650 | } 2651 | } 2652 | 2653 | @-o-keyframes teeter { 2654 | 0%, 100% { 2655 | -webkit-transform: rotate(0deg) translateZ(0); 2656 | -ms-transform: rotate(0deg) translateZ(0); 2657 | transform: rotate(0deg) translateZ(0); 2658 | } 2659 | 2660 | 15% { 2661 | -webkit-transform: rotate(10deg); 2662 | -ms-transform: rotate(10deg); 2663 | transform: rotate(10deg); 2664 | } 2665 | 2666 | 30% { 2667 | -webkit-transform: rotate(-10deg); 2668 | -ms-transform: rotate(-10deg); 2669 | transform: rotate(-10deg); 2670 | } 2671 | 2672 | 45% { 2673 | -webkit-transform: rotate(5deg); 2674 | -ms-transform: rotate(5deg); 2675 | transform: rotate(5deg); 2676 | } 2677 | 2678 | 60% { 2679 | -webkit-transform: rotate(-5deg); 2680 | -ms-transform: rotate(-5deg); 2681 | transform: rotate(-5deg); 2682 | } 2683 | 2684 | 73% { 2685 | -webkit-transform: rotate(3.33333deg); 2686 | -ms-transform: rotate(3.33333deg); 2687 | transform: rotate(3.33333deg); 2688 | } 2689 | 2690 | 86% { 2691 | -webkit-transform: rotate(-3.33333deg); 2692 | -ms-transform: rotate(-3.33333deg); 2693 | transform: rotate(-3.33333deg); 2694 | } 2695 | } 2696 | 2697 | @keyframes teeter { 2698 | 0%, 100% { 2699 | -webkit-transform: rotate(0deg) translateZ(0); 2700 | -ms-transform: rotate(0deg) translateZ(0); 2701 | transform: rotate(0deg) translateZ(0); 2702 | } 2703 | 2704 | 15% { 2705 | -webkit-transform: rotate(10deg); 2706 | -ms-transform: rotate(10deg); 2707 | transform: rotate(10deg); 2708 | } 2709 | 2710 | 30% { 2711 | -webkit-transform: rotate(-10deg); 2712 | -ms-transform: rotate(-10deg); 2713 | transform: rotate(-10deg); 2714 | } 2715 | 2716 | 45% { 2717 | -webkit-transform: rotate(5deg); 2718 | -ms-transform: rotate(5deg); 2719 | transform: rotate(5deg); 2720 | } 2721 | 2722 | 60% { 2723 | -webkit-transform: rotate(-5deg); 2724 | -ms-transform: rotate(-5deg); 2725 | transform: rotate(-5deg); 2726 | } 2727 | 2728 | 73% { 2729 | -webkit-transform: rotate(3.33333deg); 2730 | -ms-transform: rotate(3.33333deg); 2731 | transform: rotate(3.33333deg); 2732 | } 2733 | 2734 | 86% { 2735 | -webkit-transform: rotate(-3.33333deg); 2736 | -ms-transform: rotate(-3.33333deg); 2737 | transform: rotate(-3.33333deg); 2738 | } 2739 | } 2740 | 2741 | @-webkit-keyframes quiver { 2742 | 0% { 2743 | -webkit-transform: translate3d(2px, 1px, 0) rotate(0deg); 2744 | -ms-transform: translate3d(2px, 1px, 0) rotate(0deg); 2745 | transform: translate3d(2px, 1px, 0) rotate(0deg); 2746 | } 2747 | 2748 | 10% { 2749 | -webkit-transform: translate3d(-1px, 2px, 0) rotate(2deg); 2750 | -ms-transform: translate3d(-1px, 2px, 0) rotate(2deg); 2751 | transform: translate3d(-1px, 2px, 0) rotate(2deg); 2752 | } 2753 | 2754 | 20% { 2755 | -webkit-transform: translate3d(-3px, 0) rotate(-2deg); 2756 | -ms-transform: translate3d(-3px, 0) rotate(-2deg); 2757 | transform: translate3d(-3px, 0) rotate(-2deg); 2758 | } 2759 | 2760 | 30% { 2761 | -webkit-transform: translate3d(0, 2px, 0) rotate(0deg); 2762 | -ms-transform: translate3d(0, 2px, 0) rotate(0deg); 2763 | transform: translate3d(0, 2px, 0) rotate(0deg); 2764 | } 2765 | 2766 | 40% { 2767 | -webkit-transform: translate3d(1px, -1px, 0) rotate(2deg); 2768 | -ms-transform: translate3d(1px, -1px, 0) rotate(2deg); 2769 | transform: translate3d(1px, -1px, 0) rotate(2deg); 2770 | } 2771 | 2772 | 50% { 2773 | -webkit-transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2774 | -ms-transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2775 | transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2776 | } 2777 | 2778 | 60% { 2779 | -webkit-transform: translate3d(-3px, 1px, 0) rotate(0deg); 2780 | -ms-transform: translate3d(-3px, 1px, 0) rotate(0deg); 2781 | transform: translate3d(-3px, 1px, 0) rotate(0deg); 2782 | } 2783 | 2784 | 70% { 2785 | -webkit-transform: translate3d(2px, 1px, 0) rotate(2deg); 2786 | -ms-transform: translate3d(2px, 1px, 0) rotate(2deg); 2787 | transform: translate3d(2px, 1px, 0) rotate(2deg); 2788 | } 2789 | 2790 | 80% { 2791 | -webkit-transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2792 | -ms-transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2793 | transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2794 | } 2795 | 2796 | 90% { 2797 | -webkit-transform: translate3d(2px, 2px, 0) rotate(0deg); 2798 | -ms-transform: translate3d(2px, 2px, 0) rotate(0deg); 2799 | transform: translate3d(2px, 2px, 0) rotate(0deg); 2800 | } 2801 | 2802 | 100% { 2803 | -webkit-transform: translate3d(1px, -2px, 0) rotate(2deg); 2804 | -ms-transform: translate3d(1px, -2px, 0) rotate(2deg); 2805 | transform: translate3d(1px, -2px, 0) rotate(2deg); 2806 | } 2807 | } 2808 | 2809 | @-moz-keyframes quiver { 2810 | 0% { 2811 | -webkit-transform: translate3d(2px, 1px, 0) rotate(0deg); 2812 | -ms-transform: translate3d(2px, 1px, 0) rotate(0deg); 2813 | transform: translate3d(2px, 1px, 0) rotate(0deg); 2814 | } 2815 | 2816 | 10% { 2817 | -webkit-transform: translate3d(-1px, 2px, 0) rotate(2deg); 2818 | -ms-transform: translate3d(-1px, 2px, 0) rotate(2deg); 2819 | transform: translate3d(-1px, 2px, 0) rotate(2deg); 2820 | } 2821 | 2822 | 20% { 2823 | -webkit-transform: translate3d(-3px, 0) rotate(-2deg); 2824 | -ms-transform: translate3d(-3px, 0) rotate(-2deg); 2825 | transform: translate3d(-3px, 0) rotate(-2deg); 2826 | } 2827 | 2828 | 30% { 2829 | -webkit-transform: translate3d(0, 2px, 0) rotate(0deg); 2830 | -ms-transform: translate3d(0, 2px, 0) rotate(0deg); 2831 | transform: translate3d(0, 2px, 0) rotate(0deg); 2832 | } 2833 | 2834 | 40% { 2835 | -webkit-transform: translate3d(1px, -1px, 0) rotate(2deg); 2836 | -ms-transform: translate3d(1px, -1px, 0) rotate(2deg); 2837 | transform: translate3d(1px, -1px, 0) rotate(2deg); 2838 | } 2839 | 2840 | 50% { 2841 | -webkit-transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2842 | -ms-transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2843 | transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2844 | } 2845 | 2846 | 60% { 2847 | -webkit-transform: translate3d(-3px, 1px, 0) rotate(0deg); 2848 | -ms-transform: translate3d(-3px, 1px, 0) rotate(0deg); 2849 | transform: translate3d(-3px, 1px, 0) rotate(0deg); 2850 | } 2851 | 2852 | 70% { 2853 | -webkit-transform: translate3d(2px, 1px, 0) rotate(2deg); 2854 | -ms-transform: translate3d(2px, 1px, 0) rotate(2deg); 2855 | transform: translate3d(2px, 1px, 0) rotate(2deg); 2856 | } 2857 | 2858 | 80% { 2859 | -webkit-transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2860 | -ms-transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2861 | transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2862 | } 2863 | 2864 | 90% { 2865 | -webkit-transform: translate3d(2px, 2px, 0) rotate(0deg); 2866 | -ms-transform: translate3d(2px, 2px, 0) rotate(0deg); 2867 | transform: translate3d(2px, 2px, 0) rotate(0deg); 2868 | } 2869 | 2870 | 100% { 2871 | -webkit-transform: translate3d(1px, -2px, 0) rotate(2deg); 2872 | -ms-transform: translate3d(1px, -2px, 0) rotate(2deg); 2873 | transform: translate3d(1px, -2px, 0) rotate(2deg); 2874 | } 2875 | } 2876 | 2877 | @-o-keyframes quiver { 2878 | 0% { 2879 | -webkit-transform: translate3d(2px, 1px, 0) rotate(0deg); 2880 | -ms-transform: translate3d(2px, 1px, 0) rotate(0deg); 2881 | transform: translate3d(2px, 1px, 0) rotate(0deg); 2882 | } 2883 | 2884 | 10% { 2885 | -webkit-transform: translate3d(-1px, 2px, 0) rotate(2deg); 2886 | -ms-transform: translate3d(-1px, 2px, 0) rotate(2deg); 2887 | transform: translate3d(-1px, 2px, 0) rotate(2deg); 2888 | } 2889 | 2890 | 20% { 2891 | -webkit-transform: translate3d(-3px, 0) rotate(-2deg); 2892 | -ms-transform: translate3d(-3px, 0) rotate(-2deg); 2893 | transform: translate3d(-3px, 0) rotate(-2deg); 2894 | } 2895 | 2896 | 30% { 2897 | -webkit-transform: translate3d(0, 2px, 0) rotate(0deg); 2898 | -ms-transform: translate3d(0, 2px, 0) rotate(0deg); 2899 | transform: translate3d(0, 2px, 0) rotate(0deg); 2900 | } 2901 | 2902 | 40% { 2903 | -webkit-transform: translate3d(1px, -1px, 0) rotate(2deg); 2904 | -ms-transform: translate3d(1px, -1px, 0) rotate(2deg); 2905 | transform: translate3d(1px, -1px, 0) rotate(2deg); 2906 | } 2907 | 2908 | 50% { 2909 | -webkit-transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2910 | -ms-transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2911 | transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2912 | } 2913 | 2914 | 60% { 2915 | -webkit-transform: translate3d(-3px, 1px, 0) rotate(0deg); 2916 | -ms-transform: translate3d(-3px, 1px, 0) rotate(0deg); 2917 | transform: translate3d(-3px, 1px, 0) rotate(0deg); 2918 | } 2919 | 2920 | 70% { 2921 | -webkit-transform: translate3d(2px, 1px, 0) rotate(2deg); 2922 | -ms-transform: translate3d(2px, 1px, 0) rotate(2deg); 2923 | transform: translate3d(2px, 1px, 0) rotate(2deg); 2924 | } 2925 | 2926 | 80% { 2927 | -webkit-transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2928 | -ms-transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2929 | transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2930 | } 2931 | 2932 | 90% { 2933 | -webkit-transform: translate3d(2px, 2px, 0) rotate(0deg); 2934 | -ms-transform: translate3d(2px, 2px, 0) rotate(0deg); 2935 | transform: translate3d(2px, 2px, 0) rotate(0deg); 2936 | } 2937 | 2938 | 100% { 2939 | -webkit-transform: translate3d(1px, -2px, 0) rotate(2deg); 2940 | -ms-transform: translate3d(1px, -2px, 0) rotate(2deg); 2941 | transform: translate3d(1px, -2px, 0) rotate(2deg); 2942 | } 2943 | } 2944 | 2945 | @keyframes quiver { 2946 | 0% { 2947 | -webkit-transform: translate3d(2px, 1px, 0) rotate(0deg); 2948 | -ms-transform: translate3d(2px, 1px, 0) rotate(0deg); 2949 | transform: translate3d(2px, 1px, 0) rotate(0deg); 2950 | } 2951 | 2952 | 10% { 2953 | -webkit-transform: translate3d(-1px, 2px, 0) rotate(2deg); 2954 | -ms-transform: translate3d(-1px, 2px, 0) rotate(2deg); 2955 | transform: translate3d(-1px, 2px, 0) rotate(2deg); 2956 | } 2957 | 2958 | 20% { 2959 | -webkit-transform: translate3d(-3px, 0) rotate(-2deg); 2960 | -ms-transform: translate3d(-3px, 0) rotate(-2deg); 2961 | transform: translate3d(-3px, 0) rotate(-2deg); 2962 | } 2963 | 2964 | 30% { 2965 | -webkit-transform: translate3d(0, 2px, 0) rotate(0deg); 2966 | -ms-transform: translate3d(0, 2px, 0) rotate(0deg); 2967 | transform: translate3d(0, 2px, 0) rotate(0deg); 2968 | } 2969 | 2970 | 40% { 2971 | -webkit-transform: translate3d(1px, -1px, 0) rotate(2deg); 2972 | -ms-transform: translate3d(1px, -1px, 0) rotate(2deg); 2973 | transform: translate3d(1px, -1px, 0) rotate(2deg); 2974 | } 2975 | 2976 | 50% { 2977 | -webkit-transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2978 | -ms-transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2979 | transform: translate3d(-1px, 2px, 0) rotate(-2deg); 2980 | } 2981 | 2982 | 60% { 2983 | -webkit-transform: translate3d(-3px, 1px, 0) rotate(0deg); 2984 | -ms-transform: translate3d(-3px, 1px, 0) rotate(0deg); 2985 | transform: translate3d(-3px, 1px, 0) rotate(0deg); 2986 | } 2987 | 2988 | 70% { 2989 | -webkit-transform: translate3d(2px, 1px, 0) rotate(2deg); 2990 | -ms-transform: translate3d(2px, 1px, 0) rotate(2deg); 2991 | transform: translate3d(2px, 1px, 0) rotate(2deg); 2992 | } 2993 | 2994 | 80% { 2995 | -webkit-transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2996 | -ms-transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2997 | transform: translate3d(-1px, -1px, 0) rotate(-2deg); 2998 | } 2999 | 3000 | 90% { 3001 | -webkit-transform: translate3d(2px, 2px, 0) rotate(0deg); 3002 | -ms-transform: translate3d(2px, 2px, 0) rotate(0deg); 3003 | transform: translate3d(2px, 2px, 0) rotate(0deg); 3004 | } 3005 | 3006 | 100% { 3007 | -webkit-transform: translate3d(1px, -2px, 0) rotate(2deg); 3008 | -ms-transform: translate3d(1px, -2px, 0) rotate(2deg); 3009 | transform: translate3d(1px, -2px, 0) rotate(2deg); 3010 | } 3011 | } 3012 | 3013 | @-webkit-keyframes sway { 3014 | 0%, 50%, 100% { 3015 | -webkit-transform: rotate(3deg) translateZ(0); 3016 | -ms-transform: rotate(3deg) translateZ(0); 3017 | transform: rotate(3deg) translateZ(0); 3018 | } 3019 | 3020 | 25% { 3021 | -webkit-transform: rotate(-3deg); 3022 | -ms-transform: rotate(-3deg); 3023 | transform: rotate(-3deg); 3024 | } 3025 | 3026 | 75% { 3027 | -webkit-transform: rotate(-3deg); 3028 | -ms-transform: rotate(-3deg); 3029 | transform: rotate(-3deg); 3030 | } 3031 | } 3032 | 3033 | @-moz-keyframes sway { 3034 | 0%, 50%, 100% { 3035 | -webkit-transform: rotate(3deg) translateZ(0); 3036 | -ms-transform: rotate(3deg) translateZ(0); 3037 | transform: rotate(3deg) translateZ(0); 3038 | } 3039 | 3040 | 25% { 3041 | -webkit-transform: rotate(-3deg); 3042 | -ms-transform: rotate(-3deg); 3043 | transform: rotate(-3deg); 3044 | } 3045 | 3046 | 75% { 3047 | -webkit-transform: rotate(-3deg); 3048 | -ms-transform: rotate(-3deg); 3049 | transform: rotate(-3deg); 3050 | } 3051 | } 3052 | 3053 | @-o-keyframes sway { 3054 | 0%, 50%, 100% { 3055 | -webkit-transform: rotate(3deg) translateZ(0); 3056 | -ms-transform: rotate(3deg) translateZ(0); 3057 | transform: rotate(3deg) translateZ(0); 3058 | } 3059 | 3060 | 25% { 3061 | -webkit-transform: rotate(-3deg); 3062 | -ms-transform: rotate(-3deg); 3063 | transform: rotate(-3deg); 3064 | } 3065 | 3066 | 75% { 3067 | -webkit-transform: rotate(-3deg); 3068 | -ms-transform: rotate(-3deg); 3069 | transform: rotate(-3deg); 3070 | } 3071 | } 3072 | 3073 | @keyframes sway { 3074 | 0%, 50%, 100% { 3075 | -webkit-transform: rotate(3deg) translateZ(0); 3076 | -ms-transform: rotate(3deg) translateZ(0); 3077 | transform: rotate(3deg) translateZ(0); 3078 | } 3079 | 3080 | 25% { 3081 | -webkit-transform: rotate(-3deg); 3082 | -ms-transform: rotate(-3deg); 3083 | transform: rotate(-3deg); 3084 | } 3085 | 3086 | 75% { 3087 | -webkit-transform: rotate(-3deg); 3088 | -ms-transform: rotate(-3deg); 3089 | transform: rotate(-3deg); 3090 | } 3091 | } 3092 | 3093 | @-webkit-keyframes spin { 3094 | 0% { 3095 | -webkit-transform: rotate(0deg) translateZ(0); 3096 | -ms-transform: rotate(0deg) translateZ(0); 3097 | transform: rotate(0deg) translateZ(0); 3098 | } 3099 | 3100 | 100% { 3101 | -webkit-transform: rotate(360deg); 3102 | -ms-transform: rotate(360deg); 3103 | transform: rotate(360deg); 3104 | } 3105 | } 3106 | 3107 | @-moz-keyframes spin { 3108 | 0% { 3109 | -webkit-transform: rotate(0deg) translateZ(0); 3110 | -ms-transform: rotate(0deg) translateZ(0); 3111 | transform: rotate(0deg) translateZ(0); 3112 | } 3113 | 3114 | 100% { 3115 | -webkit-transform: rotate(360deg); 3116 | -ms-transform: rotate(360deg); 3117 | transform: rotate(360deg); 3118 | } 3119 | } 3120 | 3121 | @-o-keyframes spin { 3122 | 0% { 3123 | -webkit-transform: rotate(0deg) translateZ(0); 3124 | -ms-transform: rotate(0deg) translateZ(0); 3125 | transform: rotate(0deg) translateZ(0); 3126 | } 3127 | 3128 | 100% { 3129 | -webkit-transform: rotate(360deg); 3130 | -ms-transform: rotate(360deg); 3131 | transform: rotate(360deg); 3132 | } 3133 | } 3134 | 3135 | @keyframes spin { 3136 | 0% { 3137 | -webkit-transform: rotate(0deg) translateZ(0); 3138 | -ms-transform: rotate(0deg) translateZ(0); 3139 | transform: rotate(0deg) translateZ(0); 3140 | } 3141 | 3142 | 100% { 3143 | -webkit-transform: rotate(360deg); 3144 | -ms-transform: rotate(360deg); 3145 | transform: rotate(360deg); 3146 | } 3147 | } 3148 | 3149 | @-webkit-keyframes bounce { 3150 | 0%, 85%, 100% { 3151 | -webkit-transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3152 | -ms-transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3153 | transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3154 | } 3155 | 3156 | 25% { 3157 | -webkit-transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3158 | -ms-transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3159 | transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3160 | } 3161 | 3162 | 35% { 3163 | -webkit-transform: translateY(0) scaleY(.98) scaleX(1.02); 3164 | -ms-transform: translateY(0) scaleY(.98) scaleX(1.02); 3165 | transform: translateY(0) scaleY(.98) scaleX(1.02); 3166 | } 3167 | 3168 | 50% { 3169 | -webkit-transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3170 | -ms-transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3171 | transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3172 | } 3173 | 3174 | 60% { 3175 | -webkit-transform: translateY(0) scaleY(.99) scaleX(1.01); 3176 | -ms-transform: translateY(0) scaleY(.99) scaleX(1.01); 3177 | transform: translateY(0) scaleY(.99) scaleX(1.01); 3178 | } 3179 | 3180 | 75% { 3181 | -webkit-transform: translateY(-.05rem); 3182 | -ms-transform: translateY(-.05rem); 3183 | transform: translateY(-.05rem); 3184 | } 3185 | } 3186 | 3187 | @-moz-keyframes bounce { 3188 | 0%, 85%, 100% { 3189 | -webkit-transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3190 | -ms-transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3191 | transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3192 | } 3193 | 3194 | 25% { 3195 | -webkit-transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3196 | -ms-transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3197 | transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3198 | } 3199 | 3200 | 35% { 3201 | -webkit-transform: translateY(0) scaleY(.98) scaleX(1.02); 3202 | -ms-transform: translateY(0) scaleY(.98) scaleX(1.02); 3203 | transform: translateY(0) scaleY(.98) scaleX(1.02); 3204 | } 3205 | 3206 | 50% { 3207 | -webkit-transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3208 | -ms-transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3209 | transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3210 | } 3211 | 3212 | 60% { 3213 | -webkit-transform: translateY(0) scaleY(.99) scaleX(1.01); 3214 | -ms-transform: translateY(0) scaleY(.99) scaleX(1.01); 3215 | transform: translateY(0) scaleY(.99) scaleX(1.01); 3216 | } 3217 | 3218 | 75% { 3219 | -webkit-transform: translateY(-.05rem); 3220 | -ms-transform: translateY(-.05rem); 3221 | transform: translateY(-.05rem); 3222 | } 3223 | } 3224 | 3225 | @-o-keyframes bounce { 3226 | 0%, 85%, 100% { 3227 | -webkit-transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3228 | -ms-transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3229 | transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3230 | } 3231 | 3232 | 25% { 3233 | -webkit-transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3234 | -ms-transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3235 | transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3236 | } 3237 | 3238 | 35% { 3239 | -webkit-transform: translateY(0) scaleY(.98) scaleX(1.02); 3240 | -ms-transform: translateY(0) scaleY(.98) scaleX(1.02); 3241 | transform: translateY(0) scaleY(.98) scaleX(1.02); 3242 | } 3243 | 3244 | 50% { 3245 | -webkit-transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3246 | -ms-transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3247 | transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3248 | } 3249 | 3250 | 60% { 3251 | -webkit-transform: translateY(0) scaleY(.99) scaleX(1.01); 3252 | -ms-transform: translateY(0) scaleY(.99) scaleX(1.01); 3253 | transform: translateY(0) scaleY(.99) scaleX(1.01); 3254 | } 3255 | 3256 | 75% { 3257 | -webkit-transform: translateY(-.05rem); 3258 | -ms-transform: translateY(-.05rem); 3259 | transform: translateY(-.05rem); 3260 | } 3261 | } 3262 | 3263 | @keyframes bounce { 3264 | 0%, 85%, 100% { 3265 | -webkit-transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3266 | -ms-transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3267 | transform: translateY(0) scaleY(1) scaleX(1) translateZ(0); 3268 | } 3269 | 3270 | 25% { 3271 | -webkit-transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3272 | -ms-transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3273 | transform: translateY(-1.35rem) scaleY(1.02) scaleX(.98); 3274 | } 3275 | 3276 | 35% { 3277 | -webkit-transform: translateY(0) scaleY(.98) scaleX(1.02); 3278 | -ms-transform: translateY(0) scaleY(.98) scaleX(1.02); 3279 | transform: translateY(0) scaleY(.98) scaleX(1.02); 3280 | } 3281 | 3282 | 50% { 3283 | -webkit-transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3284 | -ms-transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3285 | transform: translateY(-1rem) scaleY(1.01) scaleX(.99); 3286 | } 3287 | 3288 | 60% { 3289 | -webkit-transform: translateY(0) scaleY(.99) scaleX(1.01); 3290 | -ms-transform: translateY(0) scaleY(.99) scaleX(1.01); 3291 | transform: translateY(0) scaleY(.99) scaleX(1.01); 3292 | } 3293 | 3294 | 75% { 3295 | -webkit-transform: translateY(-.05rem); 3296 | -ms-transform: translateY(-.05rem); 3297 | transform: translateY(-.05rem); 3298 | } 3299 | } 3300 | 3301 | @-webkit-keyframes pulsate { 3302 | 0%, 100% { 3303 | opacity: 1; 3304 | -webkit-transform: scale(1) translateZ(0); 3305 | -ms-transform: scale(1) translateZ(0); 3306 | transform: scale(1) translateZ(0); 3307 | } 3308 | 3309 | 50% { 3310 | opacity: .85; 3311 | -webkit-transform: scale(1.1); 3312 | -ms-transform: scale(1.1); 3313 | transform: scale(1.1); 3314 | } 3315 | } 3316 | 3317 | @-moz-keyframes pulsate { 3318 | 0%, 100% { 3319 | opacity: 1; 3320 | -webkit-transform: scale(1) translateZ(0); 3321 | -ms-transform: scale(1) translateZ(0); 3322 | transform: scale(1) translateZ(0); 3323 | } 3324 | 3325 | 50% { 3326 | opacity: .85; 3327 | -webkit-transform: scale(1.1); 3328 | -ms-transform: scale(1.1); 3329 | transform: scale(1.1); 3330 | } 3331 | } 3332 | 3333 | @-o-keyframes pulsate { 3334 | 0%, 100% { 3335 | opacity: 1; 3336 | -webkit-transform: scale(1) translateZ(0); 3337 | -ms-transform: scale(1) translateZ(0); 3338 | transform: scale(1) translateZ(0); 3339 | } 3340 | 3341 | 50% { 3342 | opacity: .85; 3343 | -webkit-transform: scale(1.1); 3344 | -ms-transform: scale(1.1); 3345 | transform: scale(1.1); 3346 | } 3347 | } 3348 | 3349 | @keyframes pulsate { 3350 | 0%, 100% { 3351 | opacity: 1; 3352 | -webkit-transform: scale(1) translateZ(0); 3353 | -ms-transform: scale(1) translateZ(0); 3354 | transform: scale(1) translateZ(0); 3355 | } 3356 | 3357 | 50% { 3358 | opacity: .85; 3359 | -webkit-transform: scale(1.1); 3360 | -ms-transform: scale(1.1); 3361 | transform: scale(1.1); 3362 | } 3363 | } 3364 | 3365 | @-webkit-keyframes aroundTheWorld { 3366 | 0% { 3367 | -webkit-transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3368 | -ms-transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3369 | transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3370 | } 3371 | 3372 | 100% { 3373 | -webkit-transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3374 | -ms-transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3375 | transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3376 | } 3377 | } 3378 | 3379 | @-moz-keyframes aroundTheWorld { 3380 | 0% { 3381 | -webkit-transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3382 | -ms-transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3383 | transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3384 | } 3385 | 3386 | 100% { 3387 | -webkit-transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3388 | -ms-transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3389 | transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3390 | } 3391 | } 3392 | 3393 | @-o-keyframes aroundTheWorld { 3394 | 0% { 3395 | -webkit-transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3396 | -ms-transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3397 | transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3398 | } 3399 | 3400 | 100% { 3401 | -webkit-transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3402 | -ms-transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3403 | transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3404 | } 3405 | } 3406 | 3407 | @keyframes aroundTheWorld { 3408 | 0% { 3409 | -webkit-transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3410 | -ms-transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3411 | transform: rotate(0deg) translate3d(-5em, -5em, 0) rotate(0deg); 3412 | } 3413 | 3414 | 100% { 3415 | -webkit-transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3416 | -ms-transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3417 | transform: rotate(360deg) translate3d(-5em, -5em, 0) rotate(-360deg); 3418 | } 3419 | } 3420 | 3421 | @-webkit-keyframes ping { 3422 | 0% { 3423 | -webkit-transform: scale(0); 3424 | -ms-transform: scale(0); 3425 | transform: scale(0); 3426 | } 3427 | 3428 | 100% { 3429 | opacity: 0; 3430 | -webkit-transform: scale(1); 3431 | -ms-transform: scale(1); 3432 | transform: scale(1); 3433 | } 3434 | } 3435 | 3436 | @-moz-keyframes ping { 3437 | 0% { 3438 | -webkit-transform: scale(0); 3439 | -ms-transform: scale(0); 3440 | transform: scale(0); 3441 | } 3442 | 3443 | 100% { 3444 | opacity: 0; 3445 | -webkit-transform: scale(1); 3446 | -ms-transform: scale(1); 3447 | transform: scale(1); 3448 | } 3449 | } 3450 | 3451 | @-o-keyframes ping { 3452 | 0% { 3453 | -webkit-transform: scale(0); 3454 | -ms-transform: scale(0); 3455 | transform: scale(0); 3456 | } 3457 | 3458 | 100% { 3459 | opacity: 0; 3460 | -webkit-transform: scale(1); 3461 | -ms-transform: scale(1); 3462 | transform: scale(1); 3463 | } 3464 | } 3465 | 3466 | @keyframes ping { 3467 | 0% { 3468 | -webkit-transform: scale(0); 3469 | -ms-transform: scale(0); 3470 | transform: scale(0); 3471 | } 3472 | 3473 | 100% { 3474 | opacity: 0; 3475 | -webkit-transform: scale(1); 3476 | -ms-transform: scale(1); 3477 | transform: scale(1); 3478 | } 3479 | } 3480 | 3481 | @-webkit-keyframes squareDance { 3482 | 0%, 100% { 3483 | -webkit-transform: translate3d(100%, 0, 0); 3484 | -ms-transform: translate3d(100%, 0, 0); 3485 | transform: translate3d(100%, 0, 0); 3486 | } 3487 | 3488 | 25% { 3489 | -webkit-transform: translate3d(100%, 100%, 0); 3490 | -ms-transform: translate3d(100%, 100%, 0); 3491 | transform: translate3d(100%, 100%, 0); 3492 | } 3493 | 3494 | 50% { 3495 | -webkit-transform: translate3d(0, 100%, 0); 3496 | -ms-transform: translate3d(0, 100%, 0); 3497 | transform: translate3d(0, 100%, 0); 3498 | } 3499 | 3500 | 75% { 3501 | -webkit-transform: translate3d(0, 0, 0); 3502 | -ms-transform: translate3d(0, 0, 0); 3503 | transform: translate3d(0, 0, 0); 3504 | } 3505 | } 3506 | 3507 | @-moz-keyframes squareDance { 3508 | 0%, 100% { 3509 | -webkit-transform: translate3d(100%, 0, 0); 3510 | -ms-transform: translate3d(100%, 0, 0); 3511 | transform: translate3d(100%, 0, 0); 3512 | } 3513 | 3514 | 25% { 3515 | -webkit-transform: translate3d(100%, 100%, 0); 3516 | -ms-transform: translate3d(100%, 100%, 0); 3517 | transform: translate3d(100%, 100%, 0); 3518 | } 3519 | 3520 | 50% { 3521 | -webkit-transform: translate3d(0, 100%, 0); 3522 | -ms-transform: translate3d(0, 100%, 0); 3523 | transform: translate3d(0, 100%, 0); 3524 | } 3525 | 3526 | 75% { 3527 | -webkit-transform: translate3d(0, 0, 0); 3528 | -ms-transform: translate3d(0, 0, 0); 3529 | transform: translate3d(0, 0, 0); 3530 | } 3531 | } 3532 | 3533 | @-o-keyframes squareDance { 3534 | 0%, 100% { 3535 | -webkit-transform: translate3d(100%, 0, 0); 3536 | -ms-transform: translate3d(100%, 0, 0); 3537 | transform: translate3d(100%, 0, 0); 3538 | } 3539 | 3540 | 25% { 3541 | -webkit-transform: translate3d(100%, 100%, 0); 3542 | -ms-transform: translate3d(100%, 100%, 0); 3543 | transform: translate3d(100%, 100%, 0); 3544 | } 3545 | 3546 | 50% { 3547 | -webkit-transform: translate3d(0, 100%, 0); 3548 | -ms-transform: translate3d(0, 100%, 0); 3549 | transform: translate3d(0, 100%, 0); 3550 | } 3551 | 3552 | 75% { 3553 | -webkit-transform: translate3d(0, 0, 0); 3554 | -ms-transform: translate3d(0, 0, 0); 3555 | transform: translate3d(0, 0, 0); 3556 | } 3557 | } 3558 | 3559 | @keyframes squareDance { 3560 | 0%, 100% { 3561 | -webkit-transform: translate3d(100%, 0, 0); 3562 | -ms-transform: translate3d(100%, 0, 0); 3563 | transform: translate3d(100%, 0, 0); 3564 | } 3565 | 3566 | 25% { 3567 | -webkit-transform: translate3d(100%, 100%, 0); 3568 | -ms-transform: translate3d(100%, 100%, 0); 3569 | transform: translate3d(100%, 100%, 0); 3570 | } 3571 | 3572 | 50% { 3573 | -webkit-transform: translate3d(0, 100%, 0); 3574 | -ms-transform: translate3d(0, 100%, 0); 3575 | transform: translate3d(0, 100%, 0); 3576 | } 3577 | 3578 | 75% { 3579 | -webkit-transform: translate3d(0, 0, 0); 3580 | -ms-transform: translate3d(0, 0, 0); 3581 | transform: translate3d(0, 0, 0); 3582 | } 3583 | } 3584 | 3585 | @-webkit-keyframes sunrise { 3586 | 0% { 3587 | -webkit-transform: rotate(0deg) translate(-15em) rotate(0deg); 3588 | -ms-transform: rotate(0deg) translate(-15em) rotate(0deg); 3589 | transform: rotate(0deg) translate(-15em) rotate(0deg); 3590 | } 3591 | 3592 | 100% { 3593 | -webkit-transform: rotate(180deg) translate(-15em) rotate(-180deg); 3594 | -ms-transform: rotate(180deg) translate(-15em) rotate(-180deg); 3595 | transform: rotate(180deg) translate(-15em) rotate(-180deg); 3596 | } 3597 | } 3598 | 3599 | @-moz-keyframes sunrise { 3600 | 0% { 3601 | -webkit-transform: rotate(0deg) translate(-15em) rotate(0deg); 3602 | -ms-transform: rotate(0deg) translate(-15em) rotate(0deg); 3603 | transform: rotate(0deg) translate(-15em) rotate(0deg); 3604 | } 3605 | 3606 | 100% { 3607 | -webkit-transform: rotate(180deg) translate(-15em) rotate(-180deg); 3608 | -ms-transform: rotate(180deg) translate(-15em) rotate(-180deg); 3609 | transform: rotate(180deg) translate(-15em) rotate(-180deg); 3610 | } 3611 | } 3612 | 3613 | @-o-keyframes sunrise { 3614 | 0% { 3615 | -webkit-transform: rotate(0deg) translate(-15em) rotate(0deg); 3616 | -ms-transform: rotate(0deg) translate(-15em) rotate(0deg); 3617 | transform: rotate(0deg) translate(-15em) rotate(0deg); 3618 | } 3619 | 3620 | 100% { 3621 | -webkit-transform: rotate(180deg) translate(-15em) rotate(-180deg); 3622 | -ms-transform: rotate(180deg) translate(-15em) rotate(-180deg); 3623 | transform: rotate(180deg) translate(-15em) rotate(-180deg); 3624 | } 3625 | } 3626 | 3627 | @keyframes sunrise { 3628 | 0% { 3629 | -webkit-transform: rotate(0deg) translate(-15em) rotate(0deg); 3630 | -ms-transform: rotate(0deg) translate(-15em) rotate(0deg); 3631 | transform: rotate(0deg) translate(-15em) rotate(0deg); 3632 | } 3633 | 3634 | 100% { 3635 | -webkit-transform: rotate(180deg) translate(-15em) rotate(-180deg); 3636 | -ms-transform: rotate(180deg) translate(-15em) rotate(-180deg); 3637 | transform: rotate(180deg) translate(-15em) rotate(-180deg); 3638 | } 3639 | } 3640 | --------------------------------------------------------------------------------