├── .gitignore ├── Gemfile ├── Gemfile.lock ├── README.md ├── bin └── middleman ├── config.rb ├── data └── products.yml ├── lib └── build_cleaner.rb └── source ├── _navbar.html.erb ├── images ├── background.png ├── lewagon.png └── middleman.png ├── index.html.erb ├── javascripts └── all.js ├── layouts └── layout.erb └── stylesheets ├── all.css.scss ├── components ├── _avatar.scss └── _badge.scss ├── config ├── _bootstrap_variables.css.scss └── _variables.css.scss ├── layout ├── _navbar.css.scss └── _utilities.css.scss ├── pages └── _home.scss └── vendor └── _animation_cheat_sheet.css.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile ~/.gitignore_global 6 | 7 | # Ignore bundler config 8 | /.bundle 9 | 10 | # Ignore the build directory 11 | /build 12 | 13 | # Ignore cache 14 | /.sass-cache 15 | /.cache 16 | 17 | # Ignore .DS_store file 18 | .DS_Store 19 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'middleman', '~> 3.4' 4 | 5 | # Deploy to GitHub Pages 6 | gem 'middleman-deploy', '~> 1.0' 7 | 8 | # Assets 9 | gem 'jquery-middleman' 10 | gem 'bootstrap-sass', '3.4.1' 11 | gem 'font-awesome-sass', '~> 4.7.0' 12 | gem 'middleman-autoprefixer' 13 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (4.2.5.1) 5 | i18n (~> 0.7) 6 | json (~> 1.7, >= 1.7.7) 7 | minitest (~> 5.1) 8 | thread_safe (~> 0.3, >= 0.3.4) 9 | tzinfo (~> 1.1) 10 | autoprefixer-rails (6.7.7.2) 11 | execjs 12 | bootstrap-sass (3.4.1) 13 | autoprefixer-rails (>= 5.2.1) 14 | sassc (>= 2.0.0) 15 | capybara (2.4.4) 16 | mime-types (>= 1.16) 17 | nokogiri (>= 1.3.3) 18 | rack (>= 1.0.0) 19 | rack-test (>= 0.5.4) 20 | xpath (~> 2.0) 21 | chunky_png (1.3.5) 22 | coffee-script (2.4.1) 23 | coffee-script-source 24 | execjs 25 | coffee-script-source (1.10.0) 26 | compass (1.0.3) 27 | chunky_png (~> 1.2) 28 | compass-core (~> 1.0.2) 29 | compass-import-once (~> 1.0.5) 30 | rb-fsevent (>= 0.9.3) 31 | rb-inotify (>= 0.9) 32 | sass (>= 3.3.13, < 3.5) 33 | compass-core (1.0.3) 34 | multi_json (~> 1.0) 35 | sass (>= 3.3.0, < 3.5) 36 | compass-import-once (1.0.5) 37 | sass (>= 3.2, < 3.5) 38 | erubis (2.7.0) 39 | execjs (2.7.0) 40 | ffi (1.9.25) 41 | font-awesome-sass (4.7.0) 42 | sass (>= 3.2) 43 | haml (4.0.7) 44 | tilt 45 | hike (1.2.3) 46 | hooks (0.4.1) 47 | uber (~> 0.0.14) 48 | i18n (0.7.0) 49 | jquery-middleman (3.1.2) 50 | thor (>= 0.14, < 2.0) 51 | json (1.8.6) 52 | kramdown (1.9.0) 53 | listen (3.0.5) 54 | rb-fsevent (>= 0.9.3) 55 | rb-inotify (>= 0.9) 56 | middleman (3.4.1) 57 | coffee-script (~> 2.2) 58 | compass (>= 1.0.0, < 2.0.0) 59 | compass-import-once (= 1.0.5) 60 | execjs (~> 2.0) 61 | haml (>= 4.0.5) 62 | kramdown (~> 1.2) 63 | middleman-core (= 3.4.1) 64 | middleman-sprockets (>= 3.1.2) 65 | sass (>= 3.4.0, < 4.0) 66 | uglifier (~> 2.5) 67 | middleman-autoprefixer (2.7.0) 68 | autoprefixer-rails (>= 6.3.1, < 7.0.0) 69 | middleman-core (>= 3.3.3) 70 | middleman-core (3.4.1) 71 | activesupport (~> 4.1) 72 | bundler (~> 1.1) 73 | capybara (~> 2.4.4) 74 | erubis 75 | hooks (~> 0.3) 76 | i18n (~> 0.7.0) 77 | listen (~> 3.0.3) 78 | padrino-helpers (~> 0.12.3) 79 | rack (>= 1.4.5, < 2.0) 80 | thor (>= 0.15.2, < 2.0) 81 | tilt (~> 1.4.1, < 2.0) 82 | middleman-deploy (1.0.0) 83 | middleman-core (>= 3.2) 84 | net-sftp 85 | ptools 86 | middleman-sprockets (3.4.2) 87 | middleman-core (>= 3.3) 88 | sprockets (~> 2.12.1) 89 | sprockets-helpers (~> 1.1.0) 90 | sprockets-sass (~> 1.3.0) 91 | mime-types (3.0) 92 | mime-types-data (~> 3.2015) 93 | mime-types-data (3.2015.1120) 94 | mini_portile2 (2.4.0) 95 | minitest (5.8.4) 96 | multi_json (1.13.1) 97 | net-sftp (2.1.2) 98 | net-ssh (>= 2.6.5) 99 | net-ssh (3.0.2) 100 | nokogiri (1.10.4) 101 | mini_portile2 (~> 2.4.0) 102 | padrino-helpers (0.12.5) 103 | i18n (~> 0.6, >= 0.6.7) 104 | padrino-support (= 0.12.5) 105 | tilt (~> 1.4.1) 106 | padrino-support (0.12.5) 107 | activesupport (>= 3.1) 108 | ptools (1.3.3) 109 | rack (1.6.11) 110 | rack-test (0.6.3) 111 | rack (>= 1.0) 112 | rb-fsevent (0.9.7) 113 | rb-inotify (0.9.5) 114 | ffi (>= 0.5.0) 115 | sass (3.4.25) 116 | sassc (2.2.1) 117 | ffi (~> 1.9) 118 | sprockets (2.12.5) 119 | hike (~> 1.2) 120 | multi_json (~> 1.0) 121 | rack (~> 1.0) 122 | tilt (~> 1.1, != 1.3.0) 123 | sprockets-helpers (1.1.0) 124 | sprockets (~> 2.0) 125 | sprockets-sass (1.3.1) 126 | sprockets (~> 2.0) 127 | tilt (~> 1.1) 128 | thor (0.19.1) 129 | thread_safe (0.3.5) 130 | tilt (1.4.1) 131 | tzinfo (1.2.2) 132 | thread_safe (~> 0.1) 133 | uber (0.0.15) 134 | uglifier (2.7.2) 135 | execjs (>= 0.3.0) 136 | json (>= 1.8.0) 137 | xpath (2.0.0) 138 | nokogiri (~> 1.3) 139 | 140 | PLATFORMS 141 | ruby 142 | 143 | DEPENDENCIES 144 | bootstrap-sass (= 3.4.1) 145 | font-awesome-sass (~> 4.7.0) 146 | jquery-middleman 147 | middleman (~> 3.4) 148 | middleman-autoprefixer 149 | middleman-deploy (~> 1.0) 150 | 151 | BUNDLED WITH 152 | 1.16.3 153 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Start a new project. 2 | 3 | 1. Fork this repo 4 | 1. Rename-it then clone it on your computer 5 | -------------------------------------------------------------------------------- /bin/middleman: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | # 3 | # This file was generated by Bundler. 4 | # 5 | # The application 'middleman' is installed as part of a gem, and 6 | # this file is here to facilitate running it. 7 | # 8 | 9 | require 'pathname' 10 | ENV['BUNDLE_GEMFILE'] ||= File.expand_path("../../Gemfile", 11 | Pathname.new(__FILE__).realpath) 12 | 13 | require 'rubygems' 14 | require 'bundler/setup' 15 | 16 | load Gem.bin_path('middleman-core', 'middleman') 17 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | ### 2 | # Compass 3 | ### 4 | 5 | # Change Compass configuration 6 | # compass_config do |config| 7 | # config.output_style = :compact 8 | # end 9 | 10 | # Auto-prefixing of CSS code with vendor prefix 11 | activate :autoprefixer 12 | 13 | ### 14 | # Page options, layouts, aliases and proxies 15 | ### 16 | 17 | # Per-page layout changes: 18 | # 19 | # With no layout 20 | # page "/path/to/file.html", :layout => false 21 | # 22 | # With alternative layout 23 | # page "/path/to/file.html", :layout => :otherlayout 24 | # 25 | # A path which all have the same layout 26 | # with_layout :admin do 27 | # page "/admin/*" 28 | # end 29 | 30 | # Proxy pages (http://middlemanapp.com/basics/dynamic-pages/) 31 | # proxy "/this-page-has-no-template.html", "/template-file.html", :locals => { 32 | # :which_fake_page => "Rendering a fake page with a local variable" } 33 | 34 | ### 35 | # Helpers 36 | ### 37 | 38 | # Automatic image dimensions on image_tag helper 39 | # activate :automatic_image_sizes 40 | 41 | # Reload the browser automatically whenever files change 42 | # configure :development do 43 | # activate :livereload 44 | # end 45 | 46 | # Methods defined in the helpers block are available in templates 47 | # helpers do 48 | # def some_helper 49 | # "Helping" 50 | # end 51 | # end 52 | 53 | set :css_dir, 'stylesheets' 54 | 55 | set :js_dir, 'javascripts' 56 | 57 | set :images_dir, 'images' 58 | 59 | # Build-specific configuration 60 | configure :build do 61 | # For example, change the Compass output style for deployment 62 | # activate :minify_css 63 | 64 | # Minify Javascript on build 65 | # activate :minify_javascript 66 | 67 | # Enable cache buster 68 | # activate :asset_hash 69 | 70 | # Use relative URLs 71 | activate :relative_assets 72 | set :relative_links, true 73 | 74 | # Or use a different image path 75 | # set :http_prefix, "/Content/images/" 76 | # 77 | require_relative "./lib/build_cleaner" 78 | activate :build_cleaner 79 | end 80 | 81 | # Deployment 82 | activate :deploy do |deploy| 83 | deploy.method = :git 84 | deploy.build_before = true 85 | 86 | # Optional Settings 87 | # deploy.remote = 'custom-remote' # remote name or git url, default: origin 88 | # deploy.branch = 'custom-branch' # default: gh-pages 89 | # deploy.strategy = :submodule # commit strategy: can be :force_push or :submodule, default: :force_push 90 | # deploy.commit_message = 'custom-message' # commit message (can be empty), default: Automated commit at `timestamp` by middleman-deploy `version` 91 | end 92 | -------------------------------------------------------------------------------- /data/products.yml: -------------------------------------------------------------------------------- 1 | - name: Some product 2 | image: some_product.png 3 | - name: Other product 4 | image: other_product.png -------------------------------------------------------------------------------- /lib/build_cleaner.rb: -------------------------------------------------------------------------------- 1 | class BuildCleaner < Middleman::Extension 2 | 3 | def initialize(app, options_hash={}, &block) 4 | super 5 | FileUtils.rm_rf app.config[:build_dir] 6 | end 7 | 8 | end 9 | 10 | ::Middleman::Extensions.register(:build_cleaner, BuildCleaner) 11 | -------------------------------------------------------------------------------- /source/_navbar.html.erb: -------------------------------------------------------------------------------- 1 |
2 | 3 | <% link_to "/", class: "navbar-wagon-brand" do %> 4 | <%= image_tag "lewagon.png" %> 5 | <% end %> 6 | 7 | 8 | 47 | 48 | 49 | 59 |
60 | -------------------------------------------------------------------------------- /source/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lewagon/frontend-advanced-boilerplate/8c501c4ccdc5a4545002d4009b5e03eef4b9adab/source/images/background.png -------------------------------------------------------------------------------- /source/images/lewagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lewagon/frontend-advanced-boilerplate/8c501c4ccdc5a4545002d4009b5e03eef4b9adab/source/images/lewagon.png -------------------------------------------------------------------------------- /source/images/middleman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lewagon/frontend-advanced-boilerplate/8c501c4ccdc5a4545002d4009b5e03eef4b9adab/source/images/middleman.png -------------------------------------------------------------------------------- /source/index.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Le Wagon Middleman boilerplate 3 | --- 4 | 5 |
6 |

Welcome to Middleman

7 |

8 | <%= link_to "Read Online Documentation", "http://middlemanapp.com/" %> 9 |

10 |
11 | -------------------------------------------------------------------------------- /source/javascripts/all.js: -------------------------------------------------------------------------------- 1 | //= require jquery 2 | //= require bootstrap-sprockets 3 | //= require_tree . -------------------------------------------------------------------------------- /source/layouts/layout.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | <%= current_page.data.title || "The Middleman" %> 15 | 16 | <%= stylesheet_link_tag "all" %> 17 | <%= javascript_include_tag "all" %> 18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 | <%= partial "navbar" %> 30 | <%= yield %> 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /source/stylesheets/all.css.scss: -------------------------------------------------------------------------------- 1 | // General Style Variables 2 | @import "config/variables"; 3 | @import "config/bootstrap_variables"; 4 | 5 | // External Frameworks 6 | @import "bootstrap-sprockets"; 7 | @import "bootstrap"; 8 | @import "font-awesome-sprockets"; 9 | @import "font-awesome"; 10 | 11 | // Our CSS 12 | @import "layout/*"; 13 | @import "components/*"; 14 | @import "pages/*"; 15 | @import "vendor/*"; 16 | -------------------------------------------------------------------------------- /source/stylesheets/components/_avatar.scss: -------------------------------------------------------------------------------- 1 | .avatar { 2 | width: 30px; 3 | border-radius: 50%; 4 | } 5 | .avatar-large { 6 | width: 50px; 7 | border-radius: 50%; 8 | } 9 | .avatar-bordered { 10 | width: 30px; 11 | border-radius: 50%; 12 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 13 | border: white 1px solid; 14 | } 15 | .avatar-square { 16 | width: 30px; 17 | border-radius: 0px; 18 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 19 | border: white 1px solid; 20 | } 21 | -------------------------------------------------------------------------------- /source/stylesheets/components/_badge.scss: -------------------------------------------------------------------------------- 1 | .badge-container { 2 | position: relative; 3 | font-size: 25px; 4 | line-height: 30px; 5 | width: 30px; 6 | color: grey; 7 | } 8 | .badge { 9 | position: absolute; 10 | top: -5px; 11 | right: -5px; 12 | font-size: 10px; 13 | color: white; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | height: 18px; 18 | width: 18px; 19 | text-align: center; 20 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1); 21 | border-radius: 50%; 22 | } 23 | .badge-red { 24 | background: #EE5F5B; 25 | } 26 | .badge-green { 27 | background: #32B796; 28 | } 29 | .badge-blue { 30 | background: #469AE0; 31 | } 32 | .badge-black { 33 | background: black; 34 | } 35 | .badge-bordered { 36 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 37 | border: white 1px solid; 38 | } 39 | -------------------------------------------------------------------------------- /source/stylesheets/config/_bootstrap_variables.css.scss: -------------------------------------------------------------------------------- 1 | /* ------------------------------------- 2 | * Bootstrap sass variable 3 | * (see http://getbootstrap.com/customize/#less-variables) 4 | * ------------------------------------- */ 5 | 6 | // General style 7 | $font-family-sans-serif: $base-font; 8 | $body-bg: white; 9 | $font-size-base: $base-size; 10 | $line-height-base: $base-height; 11 | $headings-font-family: $header-font; 12 | 13 | // Semantic color scheme 14 | $brand-primary: $blue; 15 | $brand-success: $green; 16 | $brand-info: $yellow; 17 | $brand-danger: $red; 18 | $brand-warning: $orange; 19 | 20 | // Buttons / inputs radius 21 | $border-radius-base: 2px; 22 | $border-radius-large: 2px; 23 | $border-radius-small: 2px; -------------------------------------------------------------------------------- /source/stylesheets/config/_variables.css.scss: -------------------------------------------------------------------------------- 1 | /* ------------------------------------- 2 | * Fonts 3 | * ------------------------------------- */ 4 | // Google fonts 5 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,100,300,700,500"); 6 | $base-font: "Open Sans", "Helvetica", "sans-serif"; 7 | $header-font: "Raleway", "Helvetica", "sans-serif"; 8 | 9 | // Local fonts (uncomment following lines) 10 | // @font-face { 11 | // font-family: "Font Name"; 12 | // src: font-url('FontFile.eot'); 13 | // src: font-url('FontFile.eot?#iefix') format('embedded-opentype'), 14 | // font-url('FontFile.woff') format('woff'), 15 | // font-url('FontFile.ttf') format('truetype') 16 | // } 17 | // $my-font: "Font Name"; 18 | 19 | // Font-size and line-height 20 | $base-size: 16px; 21 | $base-height: 1.4; 22 | 23 | /* ------------------------------------- 24 | * Colors 25 | * ------------------------------------- */ 26 | // Scheme 27 | $brand-color: #D23333; 28 | 29 | $red: #EE5F5B; 30 | $blue: #469AE0; 31 | $yellow: #FDB631; 32 | $orange: #E67E22; 33 | $green: #32B796; 34 | 35 | // Gray scale 36 | $gray-darker: lighten(#000, 13.5%); // #222 37 | $gray-dark: lighten(#000, 20%); // #333 38 | $gray: lighten(#000, 33.5%); // #555 39 | $gray-light: lighten(#000, 46.7%); // #777 40 | $gray-lighter: lighten(#000, 93.5%); // #eee 41 | -------------------------------------------------------------------------------- /source/stylesheets/layout/_navbar.css.scss: -------------------------------------------------------------------------------- 1 | /* Main class */ 2 | .navbar-wagon { 3 | box-shadow: 0 1px 5px 0 rgba(0,0,0,0.07),0 1px 0 0 rgba(0,0,0,0.03); 4 | background: white; 5 | transition: all 0.3s ease; 6 | display: flex; 7 | height: 70px; 8 | padding: 0px 30px; 9 | align-items: center; 10 | justify-content: space-between; 11 | } 12 | 13 | /* Optional class to fix the navbar on top */ 14 | .navbar-wagon-fixed { 15 | position: fixed; 16 | left: 0px; 17 | top: 0px; 18 | z-index: 1; 19 | width: 100%; 20 | } 21 | 22 | /* Navbar logo */ 23 | .navbar-wagon-brand img { 24 | width: 50px; 25 | } 26 | 27 | /* Navbar right section (with form, links, button) */ 28 | .navbar-wagon-right { 29 | display: flex; 30 | align-items: center; 31 | justify-content: space-between; 32 | } 33 | 34 | /* Navbar item */ 35 | .navbar-wagon-item { 36 | flex: 0 1 auto; 37 | cursor: pointer; 38 | padding: 0 20px; 39 | } 40 | 41 | /* Navbar standard link */ 42 | .navbar-wagon-link { 43 | color: #616668; 44 | font-size: 14px; 45 | } 46 | .navbar-wagon-link:hover { 47 | color: #da552f; 48 | text-decoration: none; 49 | } 50 | 51 | /* Navbar right button */ 52 | .navbar-wagon-button { 53 | margin-left: 10px; 54 | padding: 0 20px; 55 | border-radius: 20em; 56 | line-height: 40px; 57 | background-color: #D23333; 58 | color: white; 59 | font-size: 14px; 60 | border: 2px solid #D23333; 61 | } 62 | .navbar-wagon-button:hover { 63 | color: white; 64 | background: #D23333; 65 | border-color: #ac2626; 66 | } 67 | 68 | /* Navbar search form */ 69 | .navbar-wagon-search { 70 | flex: 0 1 300px; 71 | display: flex; 72 | justify-content: flex-end; 73 | padding: 0 10px; 74 | position: relative; 75 | } 76 | .navbar-wagon-search-btn { 77 | line-height: 40px; 78 | color: #E6E6E6; 79 | border: none; 80 | background: transparent; 81 | position: absolute; 82 | right: 14px; 83 | top: -2px; 84 | z-index: 1; 85 | } 86 | .navbar-wagon-search-input { 87 | flex: 0 1 300px; 88 | transition: all 0.15s ease; 89 | line-height: 40px; 90 | font-weight: lighter; 91 | color: #666666; 92 | border: 1px solid #E6E6E6; 93 | border-radius: 5px; 94 | padding: 0 10px; 95 | font-size: 14px; 96 | outline: none; 97 | } 98 | .navbar-wagon-search-input:focus { 99 | border: 1px solid #CCCCCC; 100 | } 101 | 102 | /* Navbar dropdown menu */ 103 | .navbar-wagon-dropdown-menu { 104 | margin-top: 15px; 105 | box-shadow: 1px 1px 4px #E6E6E6; 106 | border-color: #E6E6E6; 107 | } 108 | .navbar-wagon-dropdown-menu li > a { 109 | transition: color 0.3s ease; 110 | font-weight: lighter !important; 111 | color: #999999 !important; 112 | font-size: 15px !important; 113 | line-height: 22px !important; 114 | padding: 10px 20px; 115 | } 116 | .navbar-wagon-dropdown-menu li > a:hover { 117 | background: transparent !important; 118 | color: black !important; 119 | } 120 | .navbar-wagon-dropdown-menu:before { 121 | content: ' '; 122 | height: 10px; 123 | width: 10px; 124 | position: absolute; 125 | right: 10px; 126 | top: -6px; 127 | background-color: white; 128 | transform: rotate(45deg); 129 | border-left: 1px solid #E6E6E6; 130 | border-top: 1px solid #E6E6E6; 131 | } 132 | -------------------------------------------------------------------------------- /source/stylesheets/layout/_utilities.css.scss: -------------------------------------------------------------------------------- 1 | /* ------------------------------------- 2 | * Utilities classes 3 | * These are examples of utilities classes 4 | * Feel free to change them and create your own 5 | * ------------------------------------- */ 6 | 7 | // Paddings 8 | .padded { 9 | padding-top: 5em; 10 | padding-bottom: 5em; 11 | } 12 | 13 | // Backgrounds 14 | .bg-text { 15 | background: #4a4a4a; 16 | } 17 | .bg-email { 18 | background: #aeaeae; 19 | } 20 | .bg-twitter { 21 | background: #00a3e1; 22 | } 23 | .bg-facebook { 24 | background: #3b5998; 25 | } -------------------------------------------------------------------------------- /source/stylesheets/pages/_home.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lewagon/frontend-advanced-boilerplate/8c501c4ccdc5a4545002d4009b5e03eef4b9adab/source/stylesheets/pages/_home.scss -------------------------------------------------------------------------------- /source/stylesheets/vendor/_animation_cheat_sheet.css.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ============================================== 3 | CSS3 ANIMATION CHEAT SHEET 4 | ============================================== 5 | 6 | Made by Justin Aguilar 7 | 8 | www.justinaguilar.com/animations/ 9 | 10 | Questions, comments, concerns, love letters: 11 | justin@justinaguilar.com 12 | ============================================== 13 | */ 14 | 15 | /* 16 | ============================================== 17 | slideDown 18 | ============================================== 19 | */ 20 | 21 | 22 | .slideDown{ 23 | animation-name: slideDown; 24 | -webkit-animation-name: slideDown; 25 | 26 | animation-duration: 1s; 27 | -webkit-animation-duration: 1s; 28 | 29 | animation-timing-function: ease; 30 | -webkit-animation-timing-function: ease; 31 | 32 | visibility: visible !important; 33 | } 34 | 35 | @keyframes slideDown { 36 | 0% { 37 | transform: translateY(-100%); 38 | } 39 | 50%{ 40 | transform: translateY(8%); 41 | } 42 | 65%{ 43 | transform: translateY(-4%); 44 | } 45 | 80%{ 46 | transform: translateY(4%); 47 | } 48 | 95%{ 49 | transform: translateY(-2%); 50 | } 51 | 100% { 52 | transform: translateY(0%); 53 | } 54 | } 55 | 56 | @-webkit-keyframes slideDown { 57 | 0% { 58 | -webkit-transform: translateY(-100%); 59 | } 60 | 50%{ 61 | -webkit-transform: translateY(8%); 62 | } 63 | 65%{ 64 | -webkit-transform: translateY(-4%); 65 | } 66 | 80%{ 67 | -webkit-transform: translateY(4%); 68 | } 69 | 95%{ 70 | -webkit-transform: translateY(-2%); 71 | } 72 | 100% { 73 | -webkit-transform: translateY(0%); 74 | } 75 | } 76 | 77 | /* 78 | ============================================== 79 | slideUp 80 | ============================================== 81 | */ 82 | 83 | 84 | .slideUp{ 85 | animation-name: slideUp; 86 | -webkit-animation-name: slideUp; 87 | 88 | animation-duration: 1s; 89 | -webkit-animation-duration: 1s; 90 | 91 | animation-timing-function: ease; 92 | -webkit-animation-timing-function: ease; 93 | 94 | visibility: visible !important; 95 | } 96 | 97 | @keyframes slideUp { 98 | 0% { 99 | transform: translateY(100%); 100 | } 101 | 50%{ 102 | transform: translateY(-8%); 103 | } 104 | 65%{ 105 | transform: translateY(4%); 106 | } 107 | 80%{ 108 | transform: translateY(-4%); 109 | } 110 | 95%{ 111 | transform: translateY(2%); 112 | } 113 | 100% { 114 | transform: translateY(0%); 115 | } 116 | } 117 | 118 | @-webkit-keyframes slideUp { 119 | 0% { 120 | -webkit-transform: translateY(100%); 121 | } 122 | 50%{ 123 | -webkit-transform: translateY(-8%); 124 | } 125 | 65%{ 126 | -webkit-transform: translateY(4%); 127 | } 128 | 80%{ 129 | -webkit-transform: translateY(-4%); 130 | } 131 | 95%{ 132 | -webkit-transform: translateY(2%); 133 | } 134 | 100% { 135 | -webkit-transform: translateY(0%); 136 | } 137 | } 138 | 139 | /* 140 | ============================================== 141 | slideLeft 142 | ============================================== 143 | */ 144 | 145 | 146 | .slideLeft{ 147 | animation-name: slideLeft; 148 | -webkit-animation-name: slideLeft; 149 | 150 | animation-duration: 1s; 151 | -webkit-animation-duration: 1s; 152 | 153 | animation-timing-function: ease-in-out; 154 | -webkit-animation-timing-function: ease-in-out; 155 | 156 | visibility: visible !important; 157 | } 158 | 159 | @keyframes slideLeft { 160 | 0% { 161 | transform: translateX(150%); 162 | } 163 | 50%{ 164 | transform: translateX(-8%); 165 | } 166 | 65%{ 167 | transform: translateX(4%); 168 | } 169 | 80%{ 170 | transform: translateX(-4%); 171 | } 172 | 95%{ 173 | transform: translateX(2%); 174 | } 175 | 100% { 176 | transform: translateX(0%); 177 | } 178 | } 179 | 180 | @-webkit-keyframes slideLeft { 181 | 0% { 182 | -webkit-transform: translateX(150%); 183 | } 184 | 50%{ 185 | -webkit-transform: translateX(-8%); 186 | } 187 | 65%{ 188 | -webkit-transform: translateX(4%); 189 | } 190 | 80%{ 191 | -webkit-transform: translateX(-4%); 192 | } 193 | 95%{ 194 | -webkit-transform: translateX(2%); 195 | } 196 | 100% { 197 | -webkit-transform: translateX(0%); 198 | } 199 | } 200 | 201 | /* 202 | ============================================== 203 | slideRight 204 | ============================================== 205 | */ 206 | 207 | 208 | .slideRight{ 209 | animation-name: slideRight; 210 | -webkit-animation-name: slideRight; 211 | 212 | animation-duration: 1s; 213 | -webkit-animation-duration: 1s; 214 | 215 | animation-timing-function: ease-in-out; 216 | -webkit-animation-timing-function: ease-in-out; 217 | 218 | visibility: visible !important; 219 | } 220 | 221 | @keyframes slideRight { 222 | 0% { 223 | transform: translateX(-150%); 224 | } 225 | 50%{ 226 | transform: translateX(8%); 227 | } 228 | 65%{ 229 | transform: translateX(-4%); 230 | } 231 | 80%{ 232 | transform: translateX(4%); 233 | } 234 | 95%{ 235 | transform: translateX(-2%); 236 | } 237 | 100% { 238 | transform: translateX(0%); 239 | } 240 | } 241 | 242 | @-webkit-keyframes slideRight { 243 | 0% { 244 | -webkit-transform: translateX(-150%); 245 | } 246 | 50%{ 247 | -webkit-transform: translateX(8%); 248 | } 249 | 65%{ 250 | -webkit-transform: translateX(-4%); 251 | } 252 | 80%{ 253 | -webkit-transform: translateX(4%); 254 | } 255 | 95%{ 256 | -webkit-transform: translateX(-2%); 257 | } 258 | 100% { 259 | -webkit-transform: translateX(0%); 260 | } 261 | } 262 | 263 | /* 264 | ============================================== 265 | slideExpandUp 266 | ============================================== 267 | */ 268 | 269 | 270 | .slideExpandUp{ 271 | animation-name: slideExpandUp; 272 | -webkit-animation-name: slideExpandUp; 273 | 274 | animation-duration: 1.6s; 275 | -webkit-animation-duration: 1.6s; 276 | 277 | animation-timing-function: ease-out; 278 | -webkit-animation-timing-function: ease -out; 279 | 280 | visibility: visible !important; 281 | } 282 | 283 | @keyframes slideExpandUp { 284 | 0% { 285 | transform: translateY(100%) scaleX(0.5); 286 | } 287 | 30%{ 288 | transform: translateY(-8%) scaleX(0.5); 289 | } 290 | 40%{ 291 | transform: translateY(2%) scaleX(0.5); 292 | } 293 | 50%{ 294 | transform: translateY(0%) scaleX(1.1); 295 | } 296 | 60%{ 297 | transform: translateY(0%) scaleX(0.9); 298 | } 299 | 70% { 300 | transform: translateY(0%) scaleX(1.05); 301 | } 302 | 80%{ 303 | transform: translateY(0%) scaleX(0.95); 304 | } 305 | 90% { 306 | transform: translateY(0%) scaleX(1.02); 307 | } 308 | 100%{ 309 | transform: translateY(0%) scaleX(1); 310 | } 311 | } 312 | 313 | @-webkit-keyframes slideExpandUp { 314 | 0% { 315 | -webkit-transform: translateY(100%) scaleX(0.5); 316 | } 317 | 30%{ 318 | -webkit-transform: translateY(-8%) scaleX(0.5); 319 | } 320 | 40%{ 321 | -webkit-transform: translateY(2%) scaleX(0.5); 322 | } 323 | 50%{ 324 | -webkit-transform: translateY(0%) scaleX(1.1); 325 | } 326 | 60%{ 327 | -webkit-transform: translateY(0%) scaleX(0.9); 328 | } 329 | 70% { 330 | -webkit-transform: translateY(0%) scaleX(1.05); 331 | } 332 | 80%{ 333 | -webkit-transform: translateY(0%) scaleX(0.95); 334 | } 335 | 90% { 336 | -webkit-transform: translateY(0%) scaleX(1.02); 337 | } 338 | 100%{ 339 | -webkit-transform: translateY(0%) scaleX(1); 340 | } 341 | } 342 | 343 | /* 344 | ============================================== 345 | expandUp 346 | ============================================== 347 | */ 348 | 349 | 350 | .expandUp{ 351 | animation-name: expandUp; 352 | -webkit-animation-name: expandUp; 353 | 354 | animation-duration: 0.7s; 355 | -webkit-animation-duration: 0.7s; 356 | 357 | animation-timing-function: ease; 358 | -webkit-animation-timing-function: ease; 359 | 360 | visibility: visible !important; 361 | } 362 | 363 | @keyframes expandUp { 364 | 0% { 365 | transform: translateY(100%) scale(0.6) scaleY(0.5); 366 | } 367 | 60%{ 368 | transform: translateY(-7%) scaleY(1.12); 369 | } 370 | 75%{ 371 | transform: translateY(3%); 372 | } 373 | 100% { 374 | transform: translateY(0%) scale(1) scaleY(1); 375 | } 376 | } 377 | 378 | @-webkit-keyframes expandUp { 379 | 0% { 380 | -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); 381 | } 382 | 60%{ 383 | -webkit-transform: translateY(-7%) scaleY(1.12); 384 | } 385 | 75%{ 386 | -webkit-transform: translateY(3%); 387 | } 388 | 100% { 389 | -webkit-transform: translateY(0%) scale(1) scaleY(1); 390 | } 391 | } 392 | 393 | /* 394 | ============================================== 395 | fadeIn 396 | ============================================== 397 | */ 398 | 399 | .fadeIn{ 400 | animation-name: fadeIn; 401 | -webkit-animation-name: fadeIn; 402 | 403 | animation-duration: 1.5s; 404 | -webkit-animation-duration: 1.5s; 405 | 406 | animation-timing-function: ease-in-out; 407 | -webkit-animation-timing-function: ease-in-out; 408 | 409 | visibility: visible !important; 410 | } 411 | 412 | @keyframes fadeIn { 413 | 0% { 414 | transform: scale(0); 415 | opacity: 0.0; 416 | } 417 | 60% { 418 | transform: scale(1.1); 419 | } 420 | 80% { 421 | transform: scale(0.9); 422 | opacity: 1; 423 | } 424 | 100% { 425 | transform: scale(1); 426 | opacity: 1; 427 | } 428 | } 429 | 430 | @-webkit-keyframes fadeIn { 431 | 0% { 432 | -webkit-transform: scale(0); 433 | opacity: 0.0; 434 | } 435 | 60% { 436 | -webkit-transform: scale(1.1); 437 | } 438 | 80% { 439 | -webkit-transform: scale(0.9); 440 | opacity: 1; 441 | } 442 | 100% { 443 | -webkit-transform: scale(1); 444 | opacity: 1; 445 | } 446 | } 447 | 448 | /* 449 | ============================================== 450 | expandOpen 451 | ============================================== 452 | */ 453 | 454 | 455 | .expandOpen{ 456 | animation-name: expandOpen; 457 | -webkit-animation-name: expandOpen; 458 | 459 | animation-duration: 1.2s; 460 | -webkit-animation-duration: 1.2s; 461 | 462 | animation-timing-function: ease-out; 463 | -webkit-animation-timing-function: ease-out; 464 | 465 | visibility: visible !important; 466 | } 467 | 468 | @keyframes expandOpen { 469 | 0% { 470 | transform: scale(1.8); 471 | } 472 | 50% { 473 | transform: scale(0.95); 474 | } 475 | 80% { 476 | transform: scale(1.05); 477 | } 478 | 90% { 479 | transform: scale(0.98); 480 | } 481 | 100% { 482 | transform: scale(1); 483 | } 484 | } 485 | 486 | @-webkit-keyframes expandOpen { 487 | 0% { 488 | -webkit-transform: scale(1.8); 489 | } 490 | 50% { 491 | -webkit-transform: scale(0.95); 492 | } 493 | 80% { 494 | -webkit-transform: scale(1.05); 495 | } 496 | 90% { 497 | -webkit-transform: scale(0.98); 498 | } 499 | 100% { 500 | -webkit-transform: scale(1); 501 | } 502 | } 503 | 504 | /* 505 | ============================================== 506 | bigEntrance 507 | ============================================== 508 | */ 509 | 510 | 511 | .bigEntrance{ 512 | animation-name: bigEntrance; 513 | -webkit-animation-name: bigEntrance; 514 | 515 | animation-duration: 1.6s; 516 | -webkit-animation-duration: 1.6s; 517 | 518 | animation-timing-function: ease-out; 519 | -webkit-animation-timing-function: ease-out; 520 | 521 | visibility: visible !important; 522 | } 523 | 524 | @keyframes bigEntrance { 525 | 0% { 526 | transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); 527 | opacity: 0.2; 528 | } 529 | 30% { 530 | transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); 531 | opacity: 1; 532 | } 533 | 45% { 534 | transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); 535 | opacity: 1; 536 | } 537 | 60% { 538 | transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); 539 | opacity: 1; 540 | } 541 | 75% { 542 | transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); 543 | opacity: 1; 544 | } 545 | 90% { 546 | transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); 547 | opacity: 1; 548 | } 549 | 100% { 550 | transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); 551 | opacity: 1; 552 | } 553 | } 554 | 555 | @-webkit-keyframes bigEntrance { 556 | 0% { 557 | -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); 558 | opacity: 0.2; 559 | } 560 | 30% { 561 | -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); 562 | opacity: 1; 563 | } 564 | 45% { 565 | -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); 566 | opacity: 1; 567 | } 568 | 60% { 569 | -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); 570 | opacity: 1; 571 | } 572 | 75% { 573 | -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); 574 | opacity: 1; 575 | } 576 | 90% { 577 | -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); 578 | opacity: 1; 579 | } 580 | 100% { 581 | -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); 582 | opacity: 1; 583 | } 584 | } 585 | 586 | /* 587 | ============================================== 588 | hatch 589 | ============================================== 590 | */ 591 | 592 | .hatch{ 593 | animation-name: hatch; 594 | -webkit-animation-name: hatch; 595 | 596 | animation-duration: 2s; 597 | -webkit-animation-duration: 2s; 598 | 599 | animation-timing-function: ease-in-out; 600 | -webkit-animation-timing-function: ease-in-out; 601 | 602 | transform-origin: 50% 100%; 603 | -ms-transform-origin: 50% 100%; 604 | -webkit-transform-origin: 50% 100%; 605 | 606 | visibility: visible !important; 607 | } 608 | 609 | @keyframes hatch { 610 | 0% { 611 | transform: rotate(0deg) scaleY(0.6); 612 | } 613 | 20% { 614 | transform: rotate(-2deg) scaleY(1.05); 615 | } 616 | 35% { 617 | transform: rotate(2deg) scaleY(1); 618 | } 619 | 50% { 620 | transform: rotate(-2deg); 621 | } 622 | 65% { 623 | transform: rotate(1deg); 624 | } 625 | 80% { 626 | transform: rotate(-1deg); 627 | } 628 | 100% { 629 | transform: rotate(0deg); 630 | } 631 | } 632 | 633 | @-webkit-keyframes hatch { 634 | 0% { 635 | -webkit-transform: rotate(0deg) scaleY(0.6); 636 | } 637 | 20% { 638 | -webkit-transform: rotate(-2deg) scaleY(1.05); 639 | } 640 | 35% { 641 | -webkit-transform: rotate(2deg) scaleY(1); 642 | } 643 | 50% { 644 | -webkit-transform: rotate(-2deg); 645 | } 646 | 65% { 647 | -webkit-transform: rotate(1deg); 648 | } 649 | 80% { 650 | -webkit-transform: rotate(-1deg); 651 | } 652 | 100% { 653 | -webkit-transform: rotate(0deg); 654 | } 655 | } 656 | 657 | 658 | /* 659 | ============================================== 660 | bounce 661 | ============================================== 662 | */ 663 | 664 | 665 | .bounce{ 666 | animation-name: bounce; 667 | -webkit-animation-name: bounce; 668 | 669 | animation-duration: 1.6s; 670 | -webkit-animation-duration: 1.6s; 671 | 672 | animation-timing-function: ease; 673 | -webkit-animation-timing-function: ease; 674 | 675 | transform-origin: 50% 100%; 676 | -ms-transform-origin: 50% 100%; 677 | -webkit-transform-origin: 50% 100%; 678 | } 679 | 680 | @keyframes bounce { 681 | 0% { 682 | transform: translateY(0%) scaleY(0.6); 683 | } 684 | 60%{ 685 | transform: translateY(-100%) scaleY(1.1); 686 | } 687 | 70%{ 688 | transform: translateY(0%) scaleY(0.95) scaleX(1.05); 689 | } 690 | 80%{ 691 | transform: translateY(0%) scaleY(1.05) scaleX(1); 692 | } 693 | 90%{ 694 | transform: translateY(0%) scaleY(0.95) scaleX(1); 695 | } 696 | 100%{ 697 | transform: translateY(0%) scaleY(1) scaleX(1); 698 | } 699 | } 700 | 701 | @-webkit-keyframes bounce { 702 | 0% { 703 | -webkit-transform: translateY(0%) scaleY(0.6); 704 | } 705 | 60%{ 706 | -webkit-transform: translateY(-100%) scaleY(1.1); 707 | } 708 | 70%{ 709 | -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); 710 | } 711 | 80%{ 712 | -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); 713 | } 714 | 90%{ 715 | -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); 716 | } 717 | 100%{ 718 | -webkit-transform: translateY(0%) scaleY(1) scaleX(1); 719 | } 720 | } 721 | 722 | 723 | /* 724 | ============================================== 725 | pulse 726 | ============================================== 727 | */ 728 | 729 | .pulse{ 730 | animation-name: pulse; 731 | -webkit-animation-name: pulse; 732 | 733 | animation-duration: 1.5s; 734 | -webkit-animation-duration: 1.5s; 735 | 736 | animation-iteration-count: infinite; 737 | -webkit-animation-iteration-count: infinite; 738 | } 739 | 740 | @keyframes pulse { 741 | 0% { 742 | transform: scale(0.9); 743 | opacity: 0.4; 744 | } 745 | 50% { 746 | transform: scale(1.1); 747 | opacity: 1; 748 | } 749 | 100% { 750 | transform: scale(0.9); 751 | opacity: 0.4; 752 | } 753 | } 754 | 755 | @-webkit-keyframes pulse { 756 | 0% { 757 | -webkit-transform: scale(0.95); 758 | opacity: 0.4; 759 | } 760 | 50% { 761 | -webkit-transform: scale(1.1); 762 | opacity: 1; 763 | } 764 | 100% { 765 | -webkit-transform: scale(0.95); 766 | opacity: 0.4; 767 | } 768 | } 769 | 770 | /* 771 | ============================================== 772 | floating 773 | ============================================== 774 | */ 775 | 776 | .floating{ 777 | animation-name: floating; 778 | -webkit-animation-name: floating; 779 | 780 | animation-duration: 1s; 781 | -webkit-animation-duration: 1s; 782 | 783 | animation-iteration-count: infinite; 784 | -webkit-animation-iteration-count: infinite; 785 | } 786 | 787 | @keyframes floating { 788 | 0% { 789 | transform: translateY(0%); 790 | } 791 | 50% { 792 | transform: translateY(8%); 793 | } 794 | 100% { 795 | transform: translateY(0%); 796 | } 797 | } 798 | 799 | @-webkit-keyframes floating { 800 | 0% { 801 | -webkit-transform: translateY(0%); 802 | } 803 | 50% { 804 | -webkit-transform: translateY(8%); 805 | } 806 | 100% { 807 | -webkit-transform: translateY(0%); 808 | } 809 | } 810 | 811 | /* 812 | ============================================== 813 | tossing 814 | ============================================== 815 | */ 816 | 817 | .tossing{ 818 | animation-name: tossing; 819 | -webkit-animation-name: tossing; 820 | 821 | animation-duration: 2.5s; 822 | -webkit-animation-duration: 2.5s; 823 | 824 | animation-iteration-count: infinite; 825 | -webkit-animation-iteration-count: infinite; 826 | } 827 | 828 | @keyframes tossing { 829 | 0% { 830 | transform: rotate(-4deg); 831 | } 832 | 50% { 833 | transform: rotate(4deg); 834 | } 835 | 100% { 836 | transform: rotate(-4deg); 837 | } 838 | } 839 | 840 | @-webkit-keyframes tossing { 841 | 0% { 842 | -webkit-transform: rotate(-4deg); 843 | } 844 | 50% { 845 | -webkit-transform: rotate(4deg); 846 | } 847 | 100% { 848 | -webkit-transform: rotate(-4deg); 849 | } 850 | } 851 | 852 | /* 853 | ============================================== 854 | pullUp 855 | ============================================== 856 | */ 857 | 858 | .pullUp{ 859 | animation-name: pullUp; 860 | -webkit-animation-name: pullUp; 861 | 862 | animation-duration: 1.1s; 863 | -webkit-animation-duration: 1.1s; 864 | 865 | animation-timing-function: ease-out; 866 | -webkit-animation-timing-function: ease-out; 867 | 868 | transform-origin: 50% 100%; 869 | -ms-transform-origin: 50% 100%; 870 | -webkit-transform-origin: 50% 100%; 871 | } 872 | 873 | @keyframes pullUp { 874 | 0% { 875 | transform: scaleY(0.1); 876 | } 877 | 40% { 878 | transform: scaleY(1.02); 879 | } 880 | 60% { 881 | transform: scaleY(0.98); 882 | } 883 | 80% { 884 | transform: scaleY(1.01); 885 | } 886 | 100% { 887 | transform: scaleY(0.98); 888 | } 889 | 80% { 890 | transform: scaleY(1.01); 891 | } 892 | 100% { 893 | transform: scaleY(1); 894 | } 895 | } 896 | 897 | @-webkit-keyframes pullUp { 898 | 0% { 899 | -webkit-transform: scaleY(0.1); 900 | } 901 | 40% { 902 | -webkit-transform: scaleY(1.02); 903 | } 904 | 60% { 905 | -webkit-transform: scaleY(0.98); 906 | } 907 | 80% { 908 | -webkit-transform: scaleY(1.01); 909 | } 910 | 100% { 911 | -webkit-transform: scaleY(0.98); 912 | } 913 | 80% { 914 | -webkit-transform: scaleY(1.01); 915 | } 916 | 100% { 917 | -webkit-transform: scaleY(1); 918 | } 919 | } 920 | 921 | /* 922 | ============================================== 923 | pullDown 924 | ============================================== 925 | */ 926 | 927 | .pullDown{ 928 | animation-name: pullDown; 929 | -webkit-animation-name: pullDown; 930 | 931 | animation-duration: 1.1s; 932 | -webkit-animation-duration: 1.1s; 933 | 934 | animation-timing-function: ease-out; 935 | -webkit-animation-timing-function: ease-out; 936 | 937 | transform-origin: 50% 0%; 938 | -ms-transform-origin: 50% 0%; 939 | -webkit-transform-origin: 50% 0%; 940 | } 941 | 942 | @keyframes pullDown { 943 | 0% { 944 | transform: scaleY(0.1); 945 | } 946 | 40% { 947 | transform: scaleY(1.02); 948 | } 949 | 60% { 950 | transform: scaleY(0.98); 951 | } 952 | 80% { 953 | transform: scaleY(1.01); 954 | } 955 | 100% { 956 | transform: scaleY(0.98); 957 | } 958 | 80% { 959 | transform: scaleY(1.01); 960 | } 961 | 100% { 962 | transform: scaleY(1); 963 | } 964 | } 965 | 966 | @-webkit-keyframes pullDown { 967 | 0% { 968 | -webkit-transform: scaleY(0.1); 969 | } 970 | 40% { 971 | -webkit-transform: scaleY(1.02); 972 | } 973 | 60% { 974 | -webkit-transform: scaleY(0.98); 975 | } 976 | 80% { 977 | -webkit-transform: scaleY(1.01); 978 | } 979 | 100% { 980 | -webkit-transform: scaleY(0.98); 981 | } 982 | 80% { 983 | -webkit-transform: scaleY(1.01); 984 | } 985 | 100% { 986 | -webkit-transform: scaleY(1); 987 | } 988 | } 989 | 990 | /* 991 | ============================================== 992 | stretchLeft 993 | ============================================== 994 | */ 995 | 996 | .stretchLeft{ 997 | animation-name: stretchLeft; 998 | -webkit-animation-name: stretchLeft; 999 | 1000 | animation-duration: 1.5s; 1001 | -webkit-animation-duration: 1.5s; 1002 | 1003 | animation-timing-function: ease-out; 1004 | -webkit-animation-timing-function: ease-out; 1005 | 1006 | transform-origin: 100% 0%; 1007 | -ms-transform-origin: 100% 0%; 1008 | -webkit-transform-origin: 100% 0%; 1009 | } 1010 | 1011 | @keyframes stretchLeft { 1012 | 0% { 1013 | transform: scaleX(0.3); 1014 | } 1015 | 40% { 1016 | transform: scaleX(1.02); 1017 | } 1018 | 60% { 1019 | transform: scaleX(0.98); 1020 | } 1021 | 80% { 1022 | transform: scaleX(1.01); 1023 | } 1024 | 100% { 1025 | transform: scaleX(0.98); 1026 | } 1027 | 80% { 1028 | transform: scaleX(1.01); 1029 | } 1030 | 100% { 1031 | transform: scaleX(1); 1032 | } 1033 | } 1034 | 1035 | @-webkit-keyframes stretchLeft { 1036 | 0% { 1037 | -webkit-transform: scaleX(0.3); 1038 | } 1039 | 40% { 1040 | -webkit-transform: scaleX(1.02); 1041 | } 1042 | 60% { 1043 | -webkit-transform: scaleX(0.98); 1044 | } 1045 | 80% { 1046 | -webkit-transform: scaleX(1.01); 1047 | } 1048 | 100% { 1049 | -webkit-transform: scaleX(0.98); 1050 | } 1051 | 80% { 1052 | -webkit-transform: scaleX(1.01); 1053 | } 1054 | 100% { 1055 | -webkit-transform: scaleX(1); 1056 | } 1057 | } 1058 | 1059 | /* 1060 | ============================================== 1061 | stretchRight 1062 | ============================================== 1063 | */ 1064 | 1065 | .stretchRight{ 1066 | animation-name: stretchRight; 1067 | -webkit-animation-name: stretchRight; 1068 | 1069 | animation-duration: 1.5s; 1070 | -webkit-animation-duration: 1.5s; 1071 | 1072 | animation-timing-function: ease-out; 1073 | -webkit-animation-timing-function: ease-out; 1074 | 1075 | transform-origin: 0% 0%; 1076 | -ms-transform-origin: 0% 0%; 1077 | -webkit-transform-origin: 0% 0%; 1078 | } 1079 | 1080 | @keyframes stretchRight { 1081 | 0% { 1082 | transform: scaleX(0.3); 1083 | } 1084 | 40% { 1085 | transform: scaleX(1.02); 1086 | } 1087 | 60% { 1088 | transform: scaleX(0.98); 1089 | } 1090 | 80% { 1091 | transform: scaleX(1.01); 1092 | } 1093 | 100% { 1094 | transform: scaleX(0.98); 1095 | } 1096 | 80% { 1097 | transform: scaleX(1.01); 1098 | } 1099 | 100% { 1100 | transform: scaleX(1); 1101 | } 1102 | } 1103 | 1104 | @-webkit-keyframes stretchRight { 1105 | 0% { 1106 | -webkit-transform: scaleX(0.3); 1107 | } 1108 | 40% { 1109 | -webkit-transform: scaleX(1.02); 1110 | } 1111 | 60% { 1112 | -webkit-transform: scaleX(0.98); 1113 | } 1114 | 80% { 1115 | -webkit-transform: scaleX(1.01); 1116 | } 1117 | 100% { 1118 | -webkit-transform: scaleX(0.98); 1119 | } 1120 | 80% { 1121 | -webkit-transform: scaleX(1.01); 1122 | } 1123 | 100% { 1124 | -webkit-transform: scaleX(1); 1125 | } 1126 | } 1127 | --------------------------------------------------------------------------------