├── example.gif ├── css ├── animation.css ├── animate.min.css └── animate.css ├── js └── animation.js ├── readme.md └── cmb2-field-animation.php /example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rubengc/cmb2-field-animation/HEAD/example.gif -------------------------------------------------------------------------------- /css/animation.css: -------------------------------------------------------------------------------- 1 | .cmb-animation-preview-button, .cmb-animation-preview-text { 2 | margin-left: 6px !important; 3 | margin-top: 2px !important; 4 | 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .cmb-animation-preview-button { 12 | padding: 2px 6px 2px 8px !important; 13 | } 14 | 15 | .cmb-animation-preview-text { 16 | display: inline-block; 17 | padding: 4px 0; 18 | } -------------------------------------------------------------------------------- /js/animation.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | // Animate on change 3 | $('body').on('change.cmbAnimation', '.cmb-type-animation select', function (e) { 4 | var $this = $(this); 5 | var text = $this.next('.cmb-animation-preview-text'); 6 | 7 | if( text.length > 0 ) { 8 | text.attr('class', 'cmb-animation-preview-text animated'); 9 | text.addClass($(this).val()); 10 | } 11 | }); 12 | 13 | // Animate on click 14 | $('body').on('click.cmbAnimationPreview', '.cmb-type-animation .cmb-animation-preview-button', function (e) { 15 | var $this = $(this); 16 | var text = $this.next('.cmb-animation-preview-text'); 17 | var animation = text.attr('class').replace( 'cmb-animation-preview-text', '' ); 18 | var select_val = $this.prev('select').val(); 19 | 20 | // If no animation, then return 21 | if( animation === '' && select_val === '' ) { 22 | return false; 23 | } 24 | 25 | // If select has animation 26 | if( select_val !== '' ) { 27 | animation = select_val + ' animated'; 28 | } 29 | 30 | text.attr('class', 'cmb-animation-preview-text'); 31 | 32 | setTimeout(function() { 33 | text.addClass(animation); 34 | }, 100); 35 | }); 36 | })(jQuery); -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # CMB2 custom field "animation" 2 | 3 | Custom field for [CMB2](https://github.com/WebDevStudios/CMB2) to store [Animate.css](https://github.com/daneden/animate.css) animations. 4 | 5 | ![example](example.gif) 6 | 7 | ```php 8 | add_action( 'cmb2_admin_init', 'cmb2_animation_metabox' ); 9 | function cmb2_animation_metabox() { 10 | 11 | $prefix = 'your_prefix_demo_'; 12 | 13 | $cmb_demo = new_cmb2_box( array( 14 | 'id' => $prefix . 'metabox', 15 | 'title' => __( 'Test Metabox', 'cmb2' ), 16 | 'object_types' => array( 'page', 'post' ), // Post type 17 | ) ); 18 | 19 | $cmb_demo->add_field( array( 20 | 'name' => __( 'Test Animation', 'cmb2' ), 21 | 'desc' => __( 'Field description (optional)', 'cmb2' ), 22 | 'id' => $prefix . '_animation', 23 | 'type' => 'animation', 24 | // 'groups' => array( 'entrances', 'exits' ), // By default all groups are enabled 25 | 'preview' => true // "Preview" text where animations are applied on click the play button 26 | 'custom_groups' => array( 27 | // Format: '{group}' => '{group_label}' 28 | 'custom_group' => __( 'Custom Group', 'cmb2' ), 29 | ), 30 | 'custom_animations' => array( 31 | // Format: '{group}' => array( '{animation}' => '{animation_label}' ) 32 | 'entrances' => array( 33 | 'custom_entrance' => __( 'Custom Entrance', 'cmb2' ), 34 | ), 35 | 'custom_group' => array( 36 | 'custom_animation' => __( 'Custom Animation on a custom group', 'cmb2' ), 37 | ) 38 | ), 39 | ) ); 40 | 41 | } 42 | ``` 43 | 44 | ## Available groups 45 | 46 | * seekers 47 | 48 | 49 | * entrances // Shortcut to enable all entrances (includes flippers, lightspeed and specials entrances) 50 | * bouncing_entrances 51 | * fading_entrances 52 | * rotating_entrances 53 | * sliding_entrances 54 | * zoom_entrances 55 | 56 | 57 | * exits // Shortcut to enable all exits (includes flippers, lightspeed and specials exists) 58 | * bouncing_exits 59 | * fading_exits 60 | * rotating_exits 61 | * sliding_exits 62 | * zoom_exits 63 | 64 | 65 | * flippers 66 | * lightspeed 67 | * specials 68 | 69 | Examples: 70 | ```php 71 | 'groups' => array( 'seekers' ) // Enable seekers 72 | 'groups' => array( 'entrances' ) // Enable all entrances 73 | 'groups' => array( 'fading_exits', 'specials' ) // Enable fading exits and specials 74 | ``` 75 | 76 | ## Changelog 77 | 78 | ### 1.0.2 79 | * New animation: jackInTheBox 80 | * Updated animate.css lib to 3.7.0 81 | * Make use of a minified version of animate.css 82 | * Added the ability to pass custom animations 83 | * Improved entrances and exists groups 84 | * Improved animation adding an play button and a preview element 85 | 86 | ### 1.0.1 87 | * Switched preview to button to allow animate again 88 | 89 | ### 1.0.0 90 | * Initial commit -------------------------------------------------------------------------------- /cmb2-field-animation.php: -------------------------------------------------------------------------------- 1 | 5 | * @copyright Copyright (c) Ruben Garcia 6 | * 7 | * Plugin Name: CMB2 Field Type: Animation 8 | * Plugin URI: https://github.com/rubengc/cmb2-field-animation 9 | * GitHub Plugin URI: https://github.com/rubengc/cmb2-field-animation 10 | * Description: CMB2 field type to allow pick an order of predefined options. 11 | * Version: 1.0.2 12 | * Author: Ruben Garcia 13 | * Author URI: https://tsunoa.com 14 | * License: GPLv2+ 15 | */ 16 | 17 | 18 | // Exit if accessed directly 19 | if( !defined( 'ABSPATH' ) ) exit; 20 | 21 | if( !class_exists( 'CMB2_Field_Animation' ) ) { 22 | /** 23 | * Class CMB2_Field_Animation 24 | */ 25 | class CMB2_Field_Animation { 26 | 27 | /** 28 | * Current version number 29 | */ 30 | const VERSION = '1.0.2'; 31 | 32 | /** 33 | * Initialize the plugin by hooking into CMB2 34 | */ 35 | public function __construct() { 36 | add_action( 'admin_enqueue_scripts', array( $this, 'setup_admin_scripts' ) ); 37 | 38 | add_action( 'cmb2_render_animation', array( $this, 'render' ), 10, 5 ); 39 | } 40 | 41 | /** 42 | * Render field 43 | */ 44 | public function render( $field, $value, $object_id, $object_type, $field_type ) { 45 | 46 | // Setup selected groups, by default, all 47 | $selected_groups = array( 48 | 'seekers', 49 | 50 | 'entrances', // All entrances 51 | 'bouncing_entrances', 52 | 'fading_entrances', 53 | 'rotating_entrances', 54 | 'sliding_entrances', 55 | 'zoom_entrances', 56 | 57 | 'exits', // All exits 58 | 'bouncing_exits', 59 | 'fading_exits', 60 | 'rotating_exits', 61 | 'sliding_exits', 62 | 'zoom_exits', 63 | 64 | 'flippers', 65 | 'lightspeed', 66 | 'specials', 67 | ); 68 | 69 | if( is_array( $field->args( 'groups' ) ) ) { 70 | $selected_groups = $field->args( 'groups' ); 71 | } 72 | 73 | // Setup custom animations 74 | $custom_animations = array(); 75 | 76 | if( is_array( $field->args( 'custom_animations' ) ) ) { 77 | $custom_animations = $field->args( 'custom_animations' ); 78 | } 79 | 80 | // Setup custom groups 81 | $custom_groups = array(); 82 | 83 | if( is_array( $field->args( 'custom_groups' ) ) ) { 84 | $custom_groups = $field->args( 'custom_groups' ); 85 | } 86 | 87 | $options = array(); 88 | 89 | if( in_array( 'seekers', $selected_groups ) ) { 90 | $options['Attention Seekers'] = array( 91 | 'bounce' => 'Bounce', 92 | 'flash' => 'Flash', 93 | 'pulse' => 'Pulse', 94 | 'rubberBand' => 'Rubber Band', 95 | 'shake' => 'Shake', 96 | 'swing' => 'Swing', 97 | 'tada' => 'Tada', 98 | 'wobble' => 'Wobble', 99 | 'jello' => 'Jello', 100 | ); 101 | 102 | // Append custom animations 103 | if( isset( $custom_animations['seekers'] ) ) { 104 | $options['Attention Seekers'] += $custom_animations['seekers']; 105 | } 106 | } 107 | 108 | if( in_array( 'entrances', $selected_groups ) || in_array( 'bouncing_entrances', $selected_groups ) ) { 109 | $options['Bouncing Entrances'] = array( 110 | 'bounceIn' => 'Bounce In', 111 | 'bounceInDown' => 'Bounce In Down', 112 | 'bounceInLeft' => 'Bounce In Left', 113 | 'bounceInRight' => 'Bounce In Right', 114 | 'bounceInUp' => 'Bounce In Up', 115 | ); 116 | 117 | // Append custom animations 118 | if( isset( $custom_animations['bouncing_entrances'] ) ) { 119 | $options['Bouncing Entrances'] += $custom_animations['bouncing_entrances']; 120 | } 121 | } 122 | 123 | if( in_array( 'exits', $selected_groups ) || in_array( 'bouncing_exits', $selected_groups ) ) { 124 | $options['Bouncing Exits'] = array( 125 | 'bounceOut' => 'Bounce Out', 126 | 'bounceOutDown' => 'Bounce Out Down', 127 | 'bounceOutLeft' => 'Bounce Out Left', 128 | 'bounceOutRight' => 'Bounce Out Right', 129 | 'bounceOutUp' => 'Bounce Out Up', 130 | ); 131 | 132 | // Append custom animations 133 | if( isset( $custom_animations['bouncing_exits'] ) ) { 134 | $options['Bouncing Exits'] += $custom_animations['bouncing_exits']; 135 | } 136 | } 137 | 138 | if( in_array( 'entrances', $selected_groups ) || in_array( 'fading_entrances', $selected_groups ) ) { 139 | $options['Fading Entrances'] = array( 140 | 'fadeIn' => 'Fade In', 141 | 'fadeInDown' => 'Fade In Down', 142 | 'fadeInDownBig' => 'Fade In Down Big', 143 | 'fadeInLeft' => 'Fade In Left', 144 | 'fadeInLeftBig' => 'Fade In Left Big', 145 | 'fadeInRight' => 'Fade In Right', 146 | 'fadeInRightBig' => 'Fade In Right Big', 147 | 'fadeInUp' => 'Fade In Up', 148 | 'fadeInUpBig' => 'Fade In Up Big', 149 | ); 150 | 151 | // Append custom animations 152 | if( isset( $custom_animations['fading_entrances'] ) ) { 153 | $options['Fading Entrances'] += $custom_animations['fading_entrances']; 154 | } 155 | } 156 | 157 | if( in_array( 'exits', $selected_groups ) || in_array( 'fading_exits', $selected_groups ) ) { 158 | $options['Fading Exits'] = array( 159 | 'fadeOut' => 'Fade Out', 160 | 'fadeOutDown' => 'Fade Out Down', 161 | 'fadeOutDownBig' => 'Fade Out Down Big', 162 | 'fadeOutLeft' => 'Fade Out Left', 163 | 'fadeOutLeftBig' => 'Fade Out Left Big', 164 | 'fadeOutRight' => 'Fade Out Right', 165 | 'fadeOutRightBig' => 'Fade Out Right Big', 166 | 'fadeOutUp' => 'Fade Out Up', 167 | 'fadeOutUpBig' => 'Fade Out Up Big', 168 | ); 169 | 170 | // Append custom animations 171 | if( isset( $custom_animations['fading_exits'] ) ) { 172 | $options['Fading Exists'] += $custom_animations['fading_exits']; 173 | } 174 | } 175 | 176 | if( in_array( 'entrances', $selected_groups ) || in_array( 'exits', $selected_groups ) || in_array( 'flippers', $selected_groups ) ) { 177 | $options['Flippers'] = array( 178 | 'flip' => 'Flip', 179 | 'flipInX' => 'Flip In X', 180 | 'flipInY' => 'Flip In Y', 181 | 'flipOutX' => 'Flip Out X', 182 | 'flipOutY' => 'Flip Out Y', 183 | ); 184 | 185 | if( ! in_array( 'flippers', $selected_groups ) ) { 186 | 187 | unset( $options['Flippers']['flip'] ); 188 | 189 | if( ! in_array( 'entrances', $selected_groups ) ) { 190 | // Remove flip entrances 191 | unset( $options['Flippers']['flipInX'] ); 192 | unset( $options['Flippers']['flipInY'] ); 193 | } else if( ! in_array( 'exits', $selected_groups ) ) { 194 | // Remove flip exists 195 | unset( $options['Flippers']['flipOutX'] ); 196 | unset( $options['Flippers']['flipOutY'] ); 197 | } 198 | } 199 | 200 | // Append custom animations 201 | if( isset( $custom_animations['flippers'] ) ) { 202 | $options['Flippers'] += $custom_animations['flippers']; 203 | } 204 | } 205 | 206 | if( in_array( 'entrances', $selected_groups ) || in_array( 'exits', $selected_groups ) || in_array( 'lightspeed', $selected_groups ) ) { 207 | $options['Light Speed'] = array( 208 | 'lightSpeedIn' => 'Light Speed In', 209 | 'lightSpeedOut' => 'Light Speed Out', 210 | ); 211 | 212 | if( ! in_array( 'lightspeed', $selected_groups ) ) { 213 | if( ! in_array( 'entrances', $selected_groups ) ) { 214 | // Remove light speed entrances 215 | unset( $options['Light Speed']['lightSpeedIn'] ); 216 | } else if( ! in_array( 'exits', $selected_groups ) ) { 217 | // Remove light speed exists 218 | unset( $options['Light Speed']['lightSpeedOut'] ); 219 | } 220 | } 221 | 222 | // Append custom animations 223 | if( isset( $custom_animations['lightspeed'] ) ) { 224 | $options['Light Speed'] += $custom_animations['lightspeed']; 225 | } 226 | } 227 | 228 | if( in_array( 'entrances', $selected_groups ) || in_array( 'rotating_entrances', $selected_groups ) ) { 229 | $options['Rotating Entrances'] = array( 230 | 'rotateIn' => 'Rotate In', 231 | 'rotateInDownLeft' => 'Rotate In Down Left', 232 | 'rotateInDownRight' => 'Rotate In Down Right', 233 | 'rotateInUpLeft' => 'Rotate In Up Left', 234 | 'rotateInUpRight' => 'Rotate In Up Right', 235 | ); 236 | 237 | // Append custom animations 238 | if( isset( $custom_animations['rotating_entrances'] ) ) { 239 | $options['Rotating Entrances'] += $custom_animations['rotating_entrances']; 240 | } 241 | } 242 | 243 | if( in_array( 'exits', $selected_groups ) || in_array( 'rotating_exits', $selected_groups ) ) { 244 | $options['Rotating Exits'] = array( 245 | 'rotateOut' => 'Rotate Out', 246 | 'rotateOutDownLeft' => 'Rotate Out Down Left', 247 | 'rotateOutDownRight' => 'Rotate Out Down Right', 248 | 'rotateOutUpLeft' => 'Rotate Out Up Left', 249 | 'rotateOutUpRight' => 'Rotate Out Up Right', 250 | ); 251 | 252 | // Append custom animations 253 | if( isset( $custom_animations['rotating_exits'] ) ) { 254 | $options['Rotating Exits'] += $custom_animations['rotating_exits']; 255 | } 256 | } 257 | 258 | if( in_array( 'entrances', $selected_groups ) || in_array( 'sliding_entrances', $selected_groups ) ) { 259 | $options['Sliding Entrances'] = array( 260 | 'slideInUp' => 'Slide In Up', 261 | 'slideInDown' => 'Slide In Down', 262 | 'slideInLeft' => 'Slide In Left', 263 | 'slideInRight' => 'Slide In Right', 264 | 265 | ); 266 | 267 | // Append custom animations 268 | if( isset( $custom_animations['sliding_entrances'] ) ) { 269 | $options['Sliding Entrances'] += $custom_animations['sliding_entrances']; 270 | } 271 | } 272 | 273 | if( in_array( 'exits', $selected_groups ) || in_array( 'sliding_exits', $selected_groups ) ) { 274 | $options['Sliding Exits'] = array( 275 | 'slideOutUp' => 'Slide Out Up', 276 | 'slideOutDown' => 'Slide Out Down', 277 | 'slideOutLeft' => 'Slide Out Left', 278 | 'slideOutRight' => 'Slide Out Right', 279 | ); 280 | 281 | // Append custom animations 282 | if( isset( $custom_animations['sliding_exits'] ) ) { 283 | $options['Sliding Exits'] += $custom_animations['sliding_exits']; 284 | } 285 | } 286 | 287 | if( in_array( 'entrances', $selected_groups ) || in_array( 'zoom_entrances', $selected_groups ) ) { 288 | $options['Zoom Entrances'] = array( 289 | 'zoomIn' => 'Zoom In', 290 | 'zoomInDown' => 'Zoom In Down', 291 | 'zoomInLeft' => 'Zoom In Left', 292 | 'zoomInRight' => 'Zoom In Right', 293 | 'zoomInUp' => 'Zoom In Up', 294 | ); 295 | 296 | // Append custom animations 297 | if( isset( $custom_animations['zoom_entrances'] ) ) { 298 | $options['Zoom Entrances'] += $custom_animations['zoom_entrances']; 299 | } 300 | } 301 | 302 | if( in_array( 'exits', $selected_groups ) || in_array( 'zoom_exits', $selected_groups ) ) { 303 | $options['Zoom Exits'] = array( 304 | 'zoomOut' => 'Zoom Out', 305 | 'zoomOutDown' => 'Zoom Out Down', 306 | 'zoomOutLeft' => 'Zoom Out Left', 307 | 'zoomOutRight' => 'Zoom Out Right', 308 | 'zoomOutUp' => 'Zoom Out Up', 309 | ); 310 | 311 | // Append custom animations 312 | if( isset( $custom_animations['zoom_exits'] ) ) { 313 | $options['Zoom Exits'] += $custom_animations['zoom_exits']; 314 | } 315 | } 316 | 317 | if( in_array( 'entrances', $selected_groups ) || in_array( 'exits', $selected_groups ) || in_array( 'specials', $selected_groups ) ) { 318 | $options['Specials'] = array( 319 | 'hinge' => 'Hinge', 320 | 'jackInTheBox' => 'Jack In The Box', 321 | 'rollIn' => 'Roll In', 322 | 'rollOut' => 'Roll Out', 323 | ); 324 | 325 | if( ! in_array( 'specials', $selected_groups ) ) { 326 | if( ! in_array( 'entrances', $selected_groups ) ) { 327 | // Remove special entrances 328 | unset( $options['Specials']['jackInTheBox'] ); 329 | unset( $options['Specials']['rollIn'] ); 330 | } else if( ! in_array( 'exits', $selected_groups ) ) { 331 | // Remove special exists 332 | unset( $options['Specials']['hinge'] ); 333 | unset( $options['Specials']['rollOut'] ); 334 | } 335 | } 336 | 337 | // Append custom animations 338 | if( isset( $custom_animations['specials'] ) ) { 339 | $options['Specials'] += $custom_animations['specials']; 340 | } 341 | } 342 | 343 | // Add custom groups (just if there are custom animations on custom groups) 344 | foreach( $custom_groups as $custom_group => $custom_group_label ) { 345 | if( in_array( $custom_group, $selected_groups ) && isset( $custom_animations[$custom_group] ) ) { 346 | $options[$custom_group_label] = $custom_animations[$custom_group]; 347 | } 348 | } 349 | 350 | $options_string = ''; 351 | 352 | $options_string .= $field_type->select_option( array( 353 | 'label' => __( 'Select an animation', 'cmb2' ), 354 | 'value' => '', 355 | 'checked' => ! $value 356 | ) ); 357 | 358 | foreach ( $options as $group_label => $group ) { 359 | 360 | $options_string .= ''; 361 | 362 | foreach ( $group as $key => $label ) { 363 | $options_string .= $field_type->select_option( array( 364 | 'label' => $label, 365 | 'value' => $key, 366 | 'checked' => $value == $key 367 | ) ); 368 | } 369 | 370 | $options_string .= ''; 371 | 372 | } 373 | 374 | echo $field_type->select( array( 375 | 'name' => $field_type->_name(), 376 | 'desc' => '', 377 | 'id' => $field_type->_id(), 378 | 'options' => $options_string, 379 | ) ); 380 | 381 | if( $field->args( 'preview' ) ) { 382 | echo ''; 383 | echo '' . __( 'Preview', 'cmb2' ) . ''; 384 | } 385 | 386 | $field_type->_desc( true, true ); 387 | } 388 | 389 | /** 390 | * Enqueue scripts and styles 391 | */ 392 | public function setup_admin_scripts() { 393 | 394 | wp_register_script( 'cmb-animation', plugins_url( 'js/animation.js', __FILE__ ), array( 'jquery' ), self::VERSION, true ); 395 | wp_enqueue_script( 'cmb-animation' ); 396 | 397 | wp_enqueue_style( 'animate-css', plugins_url( 'css/animate.min.css', __FILE__ ), array(), self::VERSION ); 398 | wp_enqueue_style( 'animate-css' ); 399 | 400 | wp_enqueue_style( 'cmb-field-animation', plugins_url( 'css/animation.css', __FILE__ ), array(), self::VERSION ); 401 | wp_enqueue_style( 'cmb-animation' ); 402 | 403 | } 404 | 405 | } 406 | 407 | $cmb2_field_animation = new CMB2_Field_Animation(); 408 | } 409 | -------------------------------------------------------------------------------- /css/animate.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.7.0 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2018 Daniel Eden 9 | */ 10 | 11 | @-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;-webkit-transform-origin:center bottom;animation-name:bounce;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-name:headShake;-webkit-animation-timing-function:ease-in-out;animation-name:headShake;animation-timing-function:ease-in-out}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-animation-name:swing;-webkit-transform-origin:top center;animation-name:swing;transform-origin:top center}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;-webkit-transform-origin:center;animation-name:jello;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.heartBeat{-webkit-animation-duration:1.3s;-webkit-animation-name:heartBeat;-webkit-animation-timing-function:ease-in-out;animation-duration:1.3s;animation-name:heartBeat;animation-timing-function:ease-in-out}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{-webkit-transform:scale3d(1.03,1.03,1.03);opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{-webkit-transform:scaleX(1);opacity:1;transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{-webkit-transform:scale3d(1.03,1.03,1.03);opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{-webkit-transform:scaleX(1);opacity:1;transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;-webkit-animation-name:bounceIn;animation-duration:.75s;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-3000px,0);opacity:0;transform:translate3d(0,-3000px,0)}60%{-webkit-transform:translate3d(0,25px,0);opacity:1;transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-3000px,0);opacity:0;transform:translate3d(0,-3000px,0)}60%{-webkit-transform:translate3d(0,25px,0);opacity:1;transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-3000px,0,0);opacity:0;transform:translate3d(-3000px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);opacity:1;transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-3000px,0,0);opacity:0;transform:translate3d(-3000px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);opacity:1;transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,3000px,0);opacity:0;transform:translate3d(0,3000px,0)}60%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,3000px,0);opacity:0;transform:translate3d(0,3000px,0)}60%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{-webkit-transform:scale3d(1.1,1.1,1.1);opacity:1;transform:scale3d(1.1,1.1,1.1)}to{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{-webkit-transform:scale3d(1.1,1.1,1.1);opacity:1;transform:scale3d(1.1,1.1,1.1)}to{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;-webkit-animation-name:bounceOut;animation-duration:.75s;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{-webkit-transform:translate3d(20px,0,0);opacity:1;transform:translate3d(20px,0,0)}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{-webkit-transform:translate3d(20px,0,0);opacity:1;transform:translate3d(20px,0,0)}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{-webkit-transform:translate3d(0,20px,0);opacity:1;transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{-webkit-transform:translate3d(0,20px,0);opacity:1;transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInDownBig{0%{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInUp{0%{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInUpBig{0%{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}@keyframes flip{0%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}.animated.flip{-webkit-animation-name:flip;-webkit-backface-visibility:visible;animation-name:flip;backface-visibility:visible}@-webkit-keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-animation-name:flipInX;-webkit-backface-visibility:visible!important;animation-name:flipInX;backface-visibility:visible!important}@-webkit-keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);opacity:1;transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);opacity:1;transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-animation-name:flipInY;-webkit-backface-visibility:visible!important;animation-name:flipInY;backface-visibility:visible!important}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);opacity:1;transform:perspective(400px) rotateX(-20deg)}to{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;transform:perspective(400px) rotateX(90deg)}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);opacity:1;transform:perspective(400px) rotateX(-20deg)}to{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;transform:perspective(400px) rotateX(90deg)}}.flipOutX{-webkit-animation-duration:.75s;-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible!important;animation-duration:.75s;animation-name:flipOutX;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);opacity:1;transform:perspective(400px) rotateY(-15deg)}to{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;transform:perspective(400px) rotateY(90deg)}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);opacity:1;transform:perspective(400px) rotateY(-15deg)}to{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;transform:perspective(400px) rotateY(90deg)}}.flipOutY{-webkit-animation-duration:.75s;-webkit-animation-name:flipOutY;-webkit-backface-visibility:visible!important;animation-duration:.75s;animation-name:flipOutY;backface-visibility:visible!important}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{-webkit-transform:skewX(20deg);opacity:1;transform:skewX(20deg)}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{-webkit-transform:skewX(20deg);opacity:1;transform:skewX(20deg)}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-name:lightSpeedIn;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-name:lightSpeedOut;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(-200deg);transform-origin:center}to{-webkit-transform:translateZ(0);-webkit-transform-origin:center;opacity:1;transform:translateZ(0);transform-origin:center}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(-200deg);transform-origin:center}to{-webkit-transform:translateZ(0);-webkit-transform-origin:center;opacity:1;transform:translateZ(0);transform-origin:center}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(45deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(45deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-90deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-90deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;opacity:1;transform-origin:center}to{-webkit-transform:rotate(200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(200deg);transform-origin:center}}@keyframes rotateOut{0%{-webkit-transform-origin:center;opacity:1;transform-origin:center}to{-webkit-transform:rotate(200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(200deg);transform-origin:center}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-45deg);transform-origin:right bottom}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-45deg);transform-origin:right bottom}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(90deg);transform-origin:right bottom}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(90deg);transform-origin:right bottom}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform-origin:top left}20%,60%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{-webkit-transform:translate3d(0,700px,0);opacity:0;transform:translate3d(0,700px,0)}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform-origin:top left}20%,60%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{-webkit-transform:translate3d(0,700px,0);opacity:0;transform:translate3d(0,700px,0)}}.hinge{-webkit-animation-duration:2s;-webkit-animation-name:hinge;animation-duration:2s;animation-name:hinge}@-webkit-keyframes jackInTheBox{0%{-webkit-transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{-webkit-transform:scale(1);opacity:1;transform:scale(1)}}@keyframes jackInTheBox{0%{-webkit-transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{-webkit-transform:scale(1);opacity:1;transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes rollIn{0%{-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) rotate(120deg);opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) rotate(120deg);opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}@keyframes zoomInDown{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}@keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}@keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}@keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom}}@keyframes zoomOutDown{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{-webkit-transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}@keyframes zoomOutLeft{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{-webkit-transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{-webkit-transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}@keyframes zoomOutRight{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{-webkit-transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom}}@keyframes zoomOutUp{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.animated{-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;animation-duration:1s;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion),(print){.animated{-webkit-animation:unset!important;-webkit-transition:none!important;animation:unset!important;transition:none!important}} -------------------------------------------------------------------------------- /css/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.7.0 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2018 Daniel Eden 9 | */ 10 | 11 | @-webkit-keyframes bounce { 12 | from, 13 | 20%, 14 | 53%, 15 | 80%, 16 | to { 17 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 18 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 19 | -webkit-transform: translate3d(0, 0, 0); 20 | transform: translate3d(0, 0, 0); 21 | } 22 | 23 | 40%, 24 | 43% { 25 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 26 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 27 | -webkit-transform: translate3d(0, -30px, 0); 28 | transform: translate3d(0, -30px, 0); 29 | } 30 | 31 | 70% { 32 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 33 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 34 | -webkit-transform: translate3d(0, -15px, 0); 35 | transform: translate3d(0, -15px, 0); 36 | } 37 | 38 | 90% { 39 | -webkit-transform: translate3d(0, -4px, 0); 40 | transform: translate3d(0, -4px, 0); 41 | } 42 | } 43 | 44 | @keyframes bounce { 45 | from, 46 | 20%, 47 | 53%, 48 | 80%, 49 | to { 50 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 51 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 52 | -webkit-transform: translate3d(0, 0, 0); 53 | transform: translate3d(0, 0, 0); 54 | } 55 | 56 | 40%, 57 | 43% { 58 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 59 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 60 | -webkit-transform: translate3d(0, -30px, 0); 61 | transform: translate3d(0, -30px, 0); 62 | } 63 | 64 | 70% { 65 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 66 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 67 | -webkit-transform: translate3d(0, -15px, 0); 68 | transform: translate3d(0, -15px, 0); 69 | } 70 | 71 | 90% { 72 | -webkit-transform: translate3d(0, -4px, 0); 73 | transform: translate3d(0, -4px, 0); 74 | } 75 | } 76 | 77 | .bounce { 78 | -webkit-animation-name: bounce; 79 | animation-name: bounce; 80 | -webkit-transform-origin: center bottom; 81 | transform-origin: center bottom; 82 | } 83 | 84 | @-webkit-keyframes flash { 85 | from, 86 | 50%, 87 | to { 88 | opacity: 1; 89 | } 90 | 91 | 25%, 92 | 75% { 93 | opacity: 0; 94 | } 95 | } 96 | 97 | @keyframes flash { 98 | from, 99 | 50%, 100 | to { 101 | opacity: 1; 102 | } 103 | 104 | 25%, 105 | 75% { 106 | opacity: 0; 107 | } 108 | } 109 | 110 | .flash { 111 | -webkit-animation-name: flash; 112 | animation-name: flash; 113 | } 114 | 115 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 116 | 117 | @-webkit-keyframes pulse { 118 | from { 119 | -webkit-transform: scale3d(1, 1, 1); 120 | transform: scale3d(1, 1, 1); 121 | } 122 | 123 | 50% { 124 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 125 | transform: scale3d(1.05, 1.05, 1.05); 126 | } 127 | 128 | to { 129 | -webkit-transform: scale3d(1, 1, 1); 130 | transform: scale3d(1, 1, 1); 131 | } 132 | } 133 | 134 | @keyframes pulse { 135 | from { 136 | -webkit-transform: scale3d(1, 1, 1); 137 | transform: scale3d(1, 1, 1); 138 | } 139 | 140 | 50% { 141 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 142 | transform: scale3d(1.05, 1.05, 1.05); 143 | } 144 | 145 | to { 146 | -webkit-transform: scale3d(1, 1, 1); 147 | transform: scale3d(1, 1, 1); 148 | } 149 | } 150 | 151 | .pulse { 152 | -webkit-animation-name: pulse; 153 | animation-name: pulse; 154 | } 155 | 156 | @-webkit-keyframes rubberBand { 157 | from { 158 | -webkit-transform: scale3d(1, 1, 1); 159 | transform: scale3d(1, 1, 1); 160 | } 161 | 162 | 30% { 163 | -webkit-transform: scale3d(1.25, 0.75, 1); 164 | transform: scale3d(1.25, 0.75, 1); 165 | } 166 | 167 | 40% { 168 | -webkit-transform: scale3d(0.75, 1.25, 1); 169 | transform: scale3d(0.75, 1.25, 1); 170 | } 171 | 172 | 50% { 173 | -webkit-transform: scale3d(1.15, 0.85, 1); 174 | transform: scale3d(1.15, 0.85, 1); 175 | } 176 | 177 | 65% { 178 | -webkit-transform: scale3d(0.95, 1.05, 1); 179 | transform: scale3d(0.95, 1.05, 1); 180 | } 181 | 182 | 75% { 183 | -webkit-transform: scale3d(1.05, 0.95, 1); 184 | transform: scale3d(1.05, 0.95, 1); 185 | } 186 | 187 | to { 188 | -webkit-transform: scale3d(1, 1, 1); 189 | transform: scale3d(1, 1, 1); 190 | } 191 | } 192 | 193 | @keyframes rubberBand { 194 | from { 195 | -webkit-transform: scale3d(1, 1, 1); 196 | transform: scale3d(1, 1, 1); 197 | } 198 | 199 | 30% { 200 | -webkit-transform: scale3d(1.25, 0.75, 1); 201 | transform: scale3d(1.25, 0.75, 1); 202 | } 203 | 204 | 40% { 205 | -webkit-transform: scale3d(0.75, 1.25, 1); 206 | transform: scale3d(0.75, 1.25, 1); 207 | } 208 | 209 | 50% { 210 | -webkit-transform: scale3d(1.15, 0.85, 1); 211 | transform: scale3d(1.15, 0.85, 1); 212 | } 213 | 214 | 65% { 215 | -webkit-transform: scale3d(0.95, 1.05, 1); 216 | transform: scale3d(0.95, 1.05, 1); 217 | } 218 | 219 | 75% { 220 | -webkit-transform: scale3d(1.05, 0.95, 1); 221 | transform: scale3d(1.05, 0.95, 1); 222 | } 223 | 224 | to { 225 | -webkit-transform: scale3d(1, 1, 1); 226 | transform: scale3d(1, 1, 1); 227 | } 228 | } 229 | 230 | .rubberBand { 231 | -webkit-animation-name: rubberBand; 232 | animation-name: rubberBand; 233 | } 234 | 235 | @-webkit-keyframes shake { 236 | from, 237 | to { 238 | -webkit-transform: translate3d(0, 0, 0); 239 | transform: translate3d(0, 0, 0); 240 | } 241 | 242 | 10%, 243 | 30%, 244 | 50%, 245 | 70%, 246 | 90% { 247 | -webkit-transform: translate3d(-10px, 0, 0); 248 | transform: translate3d(-10px, 0, 0); 249 | } 250 | 251 | 20%, 252 | 40%, 253 | 60%, 254 | 80% { 255 | -webkit-transform: translate3d(10px, 0, 0); 256 | transform: translate3d(10px, 0, 0); 257 | } 258 | } 259 | 260 | @keyframes shake { 261 | from, 262 | to { 263 | -webkit-transform: translate3d(0, 0, 0); 264 | transform: translate3d(0, 0, 0); 265 | } 266 | 267 | 10%, 268 | 30%, 269 | 50%, 270 | 70%, 271 | 90% { 272 | -webkit-transform: translate3d(-10px, 0, 0); 273 | transform: translate3d(-10px, 0, 0); 274 | } 275 | 276 | 20%, 277 | 40%, 278 | 60%, 279 | 80% { 280 | -webkit-transform: translate3d(10px, 0, 0); 281 | transform: translate3d(10px, 0, 0); 282 | } 283 | } 284 | 285 | .shake { 286 | -webkit-animation-name: shake; 287 | animation-name: shake; 288 | } 289 | 290 | @-webkit-keyframes headShake { 291 | 0% { 292 | -webkit-transform: translateX(0); 293 | transform: translateX(0); 294 | } 295 | 296 | 6.5% { 297 | -webkit-transform: translateX(-6px) rotateY(-9deg); 298 | transform: translateX(-6px) rotateY(-9deg); 299 | } 300 | 301 | 18.5% { 302 | -webkit-transform: translateX(5px) rotateY(7deg); 303 | transform: translateX(5px) rotateY(7deg); 304 | } 305 | 306 | 31.5% { 307 | -webkit-transform: translateX(-3px) rotateY(-5deg); 308 | transform: translateX(-3px) rotateY(-5deg); 309 | } 310 | 311 | 43.5% { 312 | -webkit-transform: translateX(2px) rotateY(3deg); 313 | transform: translateX(2px) rotateY(3deg); 314 | } 315 | 316 | 50% { 317 | -webkit-transform: translateX(0); 318 | transform: translateX(0); 319 | } 320 | } 321 | 322 | @keyframes headShake { 323 | 0% { 324 | -webkit-transform: translateX(0); 325 | transform: translateX(0); 326 | } 327 | 328 | 6.5% { 329 | -webkit-transform: translateX(-6px) rotateY(-9deg); 330 | transform: translateX(-6px) rotateY(-9deg); 331 | } 332 | 333 | 18.5% { 334 | -webkit-transform: translateX(5px) rotateY(7deg); 335 | transform: translateX(5px) rotateY(7deg); 336 | } 337 | 338 | 31.5% { 339 | -webkit-transform: translateX(-3px) rotateY(-5deg); 340 | transform: translateX(-3px) rotateY(-5deg); 341 | } 342 | 343 | 43.5% { 344 | -webkit-transform: translateX(2px) rotateY(3deg); 345 | transform: translateX(2px) rotateY(3deg); 346 | } 347 | 348 | 50% { 349 | -webkit-transform: translateX(0); 350 | transform: translateX(0); 351 | } 352 | } 353 | 354 | .headShake { 355 | -webkit-animation-timing-function: ease-in-out; 356 | animation-timing-function: ease-in-out; 357 | -webkit-animation-name: headShake; 358 | animation-name: headShake; 359 | } 360 | 361 | @-webkit-keyframes swing { 362 | 20% { 363 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 364 | transform: rotate3d(0, 0, 1, 15deg); 365 | } 366 | 367 | 40% { 368 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 369 | transform: rotate3d(0, 0, 1, -10deg); 370 | } 371 | 372 | 60% { 373 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 374 | transform: rotate3d(0, 0, 1, 5deg); 375 | } 376 | 377 | 80% { 378 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 379 | transform: rotate3d(0, 0, 1, -5deg); 380 | } 381 | 382 | to { 383 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 384 | transform: rotate3d(0, 0, 1, 0deg); 385 | } 386 | } 387 | 388 | @keyframes swing { 389 | 20% { 390 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 391 | transform: rotate3d(0, 0, 1, 15deg); 392 | } 393 | 394 | 40% { 395 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 396 | transform: rotate3d(0, 0, 1, -10deg); 397 | } 398 | 399 | 60% { 400 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 401 | transform: rotate3d(0, 0, 1, 5deg); 402 | } 403 | 404 | 80% { 405 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 406 | transform: rotate3d(0, 0, 1, -5deg); 407 | } 408 | 409 | to { 410 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 411 | transform: rotate3d(0, 0, 1, 0deg); 412 | } 413 | } 414 | 415 | .swing { 416 | -webkit-transform-origin: top center; 417 | transform-origin: top center; 418 | -webkit-animation-name: swing; 419 | animation-name: swing; 420 | } 421 | 422 | @-webkit-keyframes tada { 423 | from { 424 | -webkit-transform: scale3d(1, 1, 1); 425 | transform: scale3d(1, 1, 1); 426 | } 427 | 428 | 10%, 429 | 20% { 430 | -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); 431 | transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); 432 | } 433 | 434 | 30%, 435 | 50%, 436 | 70%, 437 | 90% { 438 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 439 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 440 | } 441 | 442 | 40%, 443 | 60%, 444 | 80% { 445 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 446 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 447 | } 448 | 449 | to { 450 | -webkit-transform: scale3d(1, 1, 1); 451 | transform: scale3d(1, 1, 1); 452 | } 453 | } 454 | 455 | @keyframes tada { 456 | from { 457 | -webkit-transform: scale3d(1, 1, 1); 458 | transform: scale3d(1, 1, 1); 459 | } 460 | 461 | 10%, 462 | 20% { 463 | -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); 464 | transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); 465 | } 466 | 467 | 30%, 468 | 50%, 469 | 70%, 470 | 90% { 471 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 472 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 473 | } 474 | 475 | 40%, 476 | 60%, 477 | 80% { 478 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 479 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 480 | } 481 | 482 | to { 483 | -webkit-transform: scale3d(1, 1, 1); 484 | transform: scale3d(1, 1, 1); 485 | } 486 | } 487 | 488 | .tada { 489 | -webkit-animation-name: tada; 490 | animation-name: tada; 491 | } 492 | 493 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 494 | 495 | @-webkit-keyframes wobble { 496 | from { 497 | -webkit-transform: translate3d(0, 0, 0); 498 | transform: translate3d(0, 0, 0); 499 | } 500 | 501 | 15% { 502 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 503 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 504 | } 505 | 506 | 30% { 507 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 508 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 509 | } 510 | 511 | 45% { 512 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 513 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 514 | } 515 | 516 | 60% { 517 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 518 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 519 | } 520 | 521 | 75% { 522 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 523 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 524 | } 525 | 526 | to { 527 | -webkit-transform: translate3d(0, 0, 0); 528 | transform: translate3d(0, 0, 0); 529 | } 530 | } 531 | 532 | @keyframes wobble { 533 | from { 534 | -webkit-transform: translate3d(0, 0, 0); 535 | transform: translate3d(0, 0, 0); 536 | } 537 | 538 | 15% { 539 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 540 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 541 | } 542 | 543 | 30% { 544 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 545 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 546 | } 547 | 548 | 45% { 549 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 550 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 551 | } 552 | 553 | 60% { 554 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 555 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 556 | } 557 | 558 | 75% { 559 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 560 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 561 | } 562 | 563 | to { 564 | -webkit-transform: translate3d(0, 0, 0); 565 | transform: translate3d(0, 0, 0); 566 | } 567 | } 568 | 569 | .wobble { 570 | -webkit-animation-name: wobble; 571 | animation-name: wobble; 572 | } 573 | 574 | @-webkit-keyframes jello { 575 | from, 576 | 11.1%, 577 | to { 578 | -webkit-transform: translate3d(0, 0, 0); 579 | transform: translate3d(0, 0, 0); 580 | } 581 | 582 | 22.2% { 583 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 584 | transform: skewX(-12.5deg) skewY(-12.5deg); 585 | } 586 | 587 | 33.3% { 588 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 589 | transform: skewX(6.25deg) skewY(6.25deg); 590 | } 591 | 592 | 44.4% { 593 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 594 | transform: skewX(-3.125deg) skewY(-3.125deg); 595 | } 596 | 597 | 55.5% { 598 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 599 | transform: skewX(1.5625deg) skewY(1.5625deg); 600 | } 601 | 602 | 66.6% { 603 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 604 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 605 | } 606 | 607 | 77.7% { 608 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 609 | transform: skewX(0.390625deg) skewY(0.390625deg); 610 | } 611 | 612 | 88.8% { 613 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 614 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 615 | } 616 | } 617 | 618 | @keyframes jello { 619 | from, 620 | 11.1%, 621 | to { 622 | -webkit-transform: translate3d(0, 0, 0); 623 | transform: translate3d(0, 0, 0); 624 | } 625 | 626 | 22.2% { 627 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 628 | transform: skewX(-12.5deg) skewY(-12.5deg); 629 | } 630 | 631 | 33.3% { 632 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 633 | transform: skewX(6.25deg) skewY(6.25deg); 634 | } 635 | 636 | 44.4% { 637 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 638 | transform: skewX(-3.125deg) skewY(-3.125deg); 639 | } 640 | 641 | 55.5% { 642 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 643 | transform: skewX(1.5625deg) skewY(1.5625deg); 644 | } 645 | 646 | 66.6% { 647 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 648 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 649 | } 650 | 651 | 77.7% { 652 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 653 | transform: skewX(0.390625deg) skewY(0.390625deg); 654 | } 655 | 656 | 88.8% { 657 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 658 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 659 | } 660 | } 661 | 662 | .jello { 663 | -webkit-animation-name: jello; 664 | animation-name: jello; 665 | -webkit-transform-origin: center; 666 | transform-origin: center; 667 | } 668 | 669 | @-webkit-keyframes heartBeat { 670 | 0% { 671 | -webkit-transform: scale(1); 672 | transform: scale(1); 673 | } 674 | 675 | 14% { 676 | -webkit-transform: scale(1.3); 677 | transform: scale(1.3); 678 | } 679 | 680 | 28% { 681 | -webkit-transform: scale(1); 682 | transform: scale(1); 683 | } 684 | 685 | 42% { 686 | -webkit-transform: scale(1.3); 687 | transform: scale(1.3); 688 | } 689 | 690 | 70% { 691 | -webkit-transform: scale(1); 692 | transform: scale(1); 693 | } 694 | } 695 | 696 | @keyframes heartBeat { 697 | 0% { 698 | -webkit-transform: scale(1); 699 | transform: scale(1); 700 | } 701 | 702 | 14% { 703 | -webkit-transform: scale(1.3); 704 | transform: scale(1.3); 705 | } 706 | 707 | 28% { 708 | -webkit-transform: scale(1); 709 | transform: scale(1); 710 | } 711 | 712 | 42% { 713 | -webkit-transform: scale(1.3); 714 | transform: scale(1.3); 715 | } 716 | 717 | 70% { 718 | -webkit-transform: scale(1); 719 | transform: scale(1); 720 | } 721 | } 722 | 723 | .heartBeat { 724 | -webkit-animation-name: heartBeat; 725 | animation-name: heartBeat; 726 | -webkit-animation-duration: 1.3s; 727 | animation-duration: 1.3s; 728 | -webkit-animation-timing-function: ease-in-out; 729 | animation-timing-function: ease-in-out; 730 | } 731 | 732 | @-webkit-keyframes bounceIn { 733 | from, 734 | 20%, 735 | 40%, 736 | 60%, 737 | 80%, 738 | to { 739 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 740 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 741 | } 742 | 743 | 0% { 744 | opacity: 0; 745 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 746 | transform: scale3d(0.3, 0.3, 0.3); 747 | } 748 | 749 | 20% { 750 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 751 | transform: scale3d(1.1, 1.1, 1.1); 752 | } 753 | 754 | 40% { 755 | -webkit-transform: scale3d(0.9, 0.9, 0.9); 756 | transform: scale3d(0.9, 0.9, 0.9); 757 | } 758 | 759 | 60% { 760 | opacity: 1; 761 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 762 | transform: scale3d(1.03, 1.03, 1.03); 763 | } 764 | 765 | 80% { 766 | -webkit-transform: scale3d(0.97, 0.97, 0.97); 767 | transform: scale3d(0.97, 0.97, 0.97); 768 | } 769 | 770 | to { 771 | opacity: 1; 772 | -webkit-transform: scale3d(1, 1, 1); 773 | transform: scale3d(1, 1, 1); 774 | } 775 | } 776 | 777 | @keyframes bounceIn { 778 | from, 779 | 20%, 780 | 40%, 781 | 60%, 782 | 80%, 783 | to { 784 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 785 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 786 | } 787 | 788 | 0% { 789 | opacity: 0; 790 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 791 | transform: scale3d(0.3, 0.3, 0.3); 792 | } 793 | 794 | 20% { 795 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 796 | transform: scale3d(1.1, 1.1, 1.1); 797 | } 798 | 799 | 40% { 800 | -webkit-transform: scale3d(0.9, 0.9, 0.9); 801 | transform: scale3d(0.9, 0.9, 0.9); 802 | } 803 | 804 | 60% { 805 | opacity: 1; 806 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 807 | transform: scale3d(1.03, 1.03, 1.03); 808 | } 809 | 810 | 80% { 811 | -webkit-transform: scale3d(0.97, 0.97, 0.97); 812 | transform: scale3d(0.97, 0.97, 0.97); 813 | } 814 | 815 | to { 816 | opacity: 1; 817 | -webkit-transform: scale3d(1, 1, 1); 818 | transform: scale3d(1, 1, 1); 819 | } 820 | } 821 | 822 | .bounceIn { 823 | -webkit-animation-duration: 0.75s; 824 | animation-duration: 0.75s; 825 | -webkit-animation-name: bounceIn; 826 | animation-name: bounceIn; 827 | } 828 | 829 | @-webkit-keyframes bounceInDown { 830 | from, 831 | 60%, 832 | 75%, 833 | 90%, 834 | to { 835 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 836 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 837 | } 838 | 839 | 0% { 840 | opacity: 0; 841 | -webkit-transform: translate3d(0, -3000px, 0); 842 | transform: translate3d(0, -3000px, 0); 843 | } 844 | 845 | 60% { 846 | opacity: 1; 847 | -webkit-transform: translate3d(0, 25px, 0); 848 | transform: translate3d(0, 25px, 0); 849 | } 850 | 851 | 75% { 852 | -webkit-transform: translate3d(0, -10px, 0); 853 | transform: translate3d(0, -10px, 0); 854 | } 855 | 856 | 90% { 857 | -webkit-transform: translate3d(0, 5px, 0); 858 | transform: translate3d(0, 5px, 0); 859 | } 860 | 861 | to { 862 | -webkit-transform: translate3d(0, 0, 0); 863 | transform: translate3d(0, 0, 0); 864 | } 865 | } 866 | 867 | @keyframes bounceInDown { 868 | from, 869 | 60%, 870 | 75%, 871 | 90%, 872 | to { 873 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 874 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 875 | } 876 | 877 | 0% { 878 | opacity: 0; 879 | -webkit-transform: translate3d(0, -3000px, 0); 880 | transform: translate3d(0, -3000px, 0); 881 | } 882 | 883 | 60% { 884 | opacity: 1; 885 | -webkit-transform: translate3d(0, 25px, 0); 886 | transform: translate3d(0, 25px, 0); 887 | } 888 | 889 | 75% { 890 | -webkit-transform: translate3d(0, -10px, 0); 891 | transform: translate3d(0, -10px, 0); 892 | } 893 | 894 | 90% { 895 | -webkit-transform: translate3d(0, 5px, 0); 896 | transform: translate3d(0, 5px, 0); 897 | } 898 | 899 | to { 900 | -webkit-transform: translate3d(0, 0, 0); 901 | transform: translate3d(0, 0, 0); 902 | } 903 | } 904 | 905 | .bounceInDown { 906 | -webkit-animation-name: bounceInDown; 907 | animation-name: bounceInDown; 908 | } 909 | 910 | @-webkit-keyframes bounceInLeft { 911 | from, 912 | 60%, 913 | 75%, 914 | 90%, 915 | to { 916 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 917 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 918 | } 919 | 920 | 0% { 921 | opacity: 0; 922 | -webkit-transform: translate3d(-3000px, 0, 0); 923 | transform: translate3d(-3000px, 0, 0); 924 | } 925 | 926 | 60% { 927 | opacity: 1; 928 | -webkit-transform: translate3d(25px, 0, 0); 929 | transform: translate3d(25px, 0, 0); 930 | } 931 | 932 | 75% { 933 | -webkit-transform: translate3d(-10px, 0, 0); 934 | transform: translate3d(-10px, 0, 0); 935 | } 936 | 937 | 90% { 938 | -webkit-transform: translate3d(5px, 0, 0); 939 | transform: translate3d(5px, 0, 0); 940 | } 941 | 942 | to { 943 | -webkit-transform: translate3d(0, 0, 0); 944 | transform: translate3d(0, 0, 0); 945 | } 946 | } 947 | 948 | @keyframes bounceInLeft { 949 | from, 950 | 60%, 951 | 75%, 952 | 90%, 953 | to { 954 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 955 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 956 | } 957 | 958 | 0% { 959 | opacity: 0; 960 | -webkit-transform: translate3d(-3000px, 0, 0); 961 | transform: translate3d(-3000px, 0, 0); 962 | } 963 | 964 | 60% { 965 | opacity: 1; 966 | -webkit-transform: translate3d(25px, 0, 0); 967 | transform: translate3d(25px, 0, 0); 968 | } 969 | 970 | 75% { 971 | -webkit-transform: translate3d(-10px, 0, 0); 972 | transform: translate3d(-10px, 0, 0); 973 | } 974 | 975 | 90% { 976 | -webkit-transform: translate3d(5px, 0, 0); 977 | transform: translate3d(5px, 0, 0); 978 | } 979 | 980 | to { 981 | -webkit-transform: translate3d(0, 0, 0); 982 | transform: translate3d(0, 0, 0); 983 | } 984 | } 985 | 986 | .bounceInLeft { 987 | -webkit-animation-name: bounceInLeft; 988 | animation-name: bounceInLeft; 989 | } 990 | 991 | @-webkit-keyframes bounceInRight { 992 | from, 993 | 60%, 994 | 75%, 995 | 90%, 996 | to { 997 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 998 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 999 | } 1000 | 1001 | from { 1002 | opacity: 0; 1003 | -webkit-transform: translate3d(3000px, 0, 0); 1004 | transform: translate3d(3000px, 0, 0); 1005 | } 1006 | 1007 | 60% { 1008 | opacity: 1; 1009 | -webkit-transform: translate3d(-25px, 0, 0); 1010 | transform: translate3d(-25px, 0, 0); 1011 | } 1012 | 1013 | 75% { 1014 | -webkit-transform: translate3d(10px, 0, 0); 1015 | transform: translate3d(10px, 0, 0); 1016 | } 1017 | 1018 | 90% { 1019 | -webkit-transform: translate3d(-5px, 0, 0); 1020 | transform: translate3d(-5px, 0, 0); 1021 | } 1022 | 1023 | to { 1024 | -webkit-transform: translate3d(0, 0, 0); 1025 | transform: translate3d(0, 0, 0); 1026 | } 1027 | } 1028 | 1029 | @keyframes bounceInRight { 1030 | from, 1031 | 60%, 1032 | 75%, 1033 | 90%, 1034 | to { 1035 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1036 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1037 | } 1038 | 1039 | from { 1040 | opacity: 0; 1041 | -webkit-transform: translate3d(3000px, 0, 0); 1042 | transform: translate3d(3000px, 0, 0); 1043 | } 1044 | 1045 | 60% { 1046 | opacity: 1; 1047 | -webkit-transform: translate3d(-25px, 0, 0); 1048 | transform: translate3d(-25px, 0, 0); 1049 | } 1050 | 1051 | 75% { 1052 | -webkit-transform: translate3d(10px, 0, 0); 1053 | transform: translate3d(10px, 0, 0); 1054 | } 1055 | 1056 | 90% { 1057 | -webkit-transform: translate3d(-5px, 0, 0); 1058 | transform: translate3d(-5px, 0, 0); 1059 | } 1060 | 1061 | to { 1062 | -webkit-transform: translate3d(0, 0, 0); 1063 | transform: translate3d(0, 0, 0); 1064 | } 1065 | } 1066 | 1067 | .bounceInRight { 1068 | -webkit-animation-name: bounceInRight; 1069 | animation-name: bounceInRight; 1070 | } 1071 | 1072 | @-webkit-keyframes bounceInUp { 1073 | from, 1074 | 60%, 1075 | 75%, 1076 | 90%, 1077 | to { 1078 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1079 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1080 | } 1081 | 1082 | from { 1083 | opacity: 0; 1084 | -webkit-transform: translate3d(0, 3000px, 0); 1085 | transform: translate3d(0, 3000px, 0); 1086 | } 1087 | 1088 | 60% { 1089 | opacity: 1; 1090 | -webkit-transform: translate3d(0, -20px, 0); 1091 | transform: translate3d(0, -20px, 0); 1092 | } 1093 | 1094 | 75% { 1095 | -webkit-transform: translate3d(0, 10px, 0); 1096 | transform: translate3d(0, 10px, 0); 1097 | } 1098 | 1099 | 90% { 1100 | -webkit-transform: translate3d(0, -5px, 0); 1101 | transform: translate3d(0, -5px, 0); 1102 | } 1103 | 1104 | to { 1105 | -webkit-transform: translate3d(0, 0, 0); 1106 | transform: translate3d(0, 0, 0); 1107 | } 1108 | } 1109 | 1110 | @keyframes bounceInUp { 1111 | from, 1112 | 60%, 1113 | 75%, 1114 | 90%, 1115 | to { 1116 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1117 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1118 | } 1119 | 1120 | from { 1121 | opacity: 0; 1122 | -webkit-transform: translate3d(0, 3000px, 0); 1123 | transform: translate3d(0, 3000px, 0); 1124 | } 1125 | 1126 | 60% { 1127 | opacity: 1; 1128 | -webkit-transform: translate3d(0, -20px, 0); 1129 | transform: translate3d(0, -20px, 0); 1130 | } 1131 | 1132 | 75% { 1133 | -webkit-transform: translate3d(0, 10px, 0); 1134 | transform: translate3d(0, 10px, 0); 1135 | } 1136 | 1137 | 90% { 1138 | -webkit-transform: translate3d(0, -5px, 0); 1139 | transform: translate3d(0, -5px, 0); 1140 | } 1141 | 1142 | to { 1143 | -webkit-transform: translate3d(0, 0, 0); 1144 | transform: translate3d(0, 0, 0); 1145 | } 1146 | } 1147 | 1148 | .bounceInUp { 1149 | -webkit-animation-name: bounceInUp; 1150 | animation-name: bounceInUp; 1151 | } 1152 | 1153 | @-webkit-keyframes bounceOut { 1154 | 20% { 1155 | -webkit-transform: scale3d(0.9, 0.9, 0.9); 1156 | transform: scale3d(0.9, 0.9, 0.9); 1157 | } 1158 | 1159 | 50%, 1160 | 55% { 1161 | opacity: 1; 1162 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 1163 | transform: scale3d(1.1, 1.1, 1.1); 1164 | } 1165 | 1166 | to { 1167 | opacity: 0; 1168 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 1169 | transform: scale3d(0.3, 0.3, 0.3); 1170 | } 1171 | } 1172 | 1173 | @keyframes bounceOut { 1174 | 20% { 1175 | -webkit-transform: scale3d(0.9, 0.9, 0.9); 1176 | transform: scale3d(0.9, 0.9, 0.9); 1177 | } 1178 | 1179 | 50%, 1180 | 55% { 1181 | opacity: 1; 1182 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 1183 | transform: scale3d(1.1, 1.1, 1.1); 1184 | } 1185 | 1186 | to { 1187 | opacity: 0; 1188 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 1189 | transform: scale3d(0.3, 0.3, 0.3); 1190 | } 1191 | } 1192 | 1193 | .bounceOut { 1194 | -webkit-animation-duration: 0.75s; 1195 | animation-duration: 0.75s; 1196 | -webkit-animation-name: bounceOut; 1197 | animation-name: bounceOut; 1198 | } 1199 | 1200 | @-webkit-keyframes bounceOutDown { 1201 | 20% { 1202 | -webkit-transform: translate3d(0, 10px, 0); 1203 | transform: translate3d(0, 10px, 0); 1204 | } 1205 | 1206 | 40%, 1207 | 45% { 1208 | opacity: 1; 1209 | -webkit-transform: translate3d(0, -20px, 0); 1210 | transform: translate3d(0, -20px, 0); 1211 | } 1212 | 1213 | to { 1214 | opacity: 0; 1215 | -webkit-transform: translate3d(0, 2000px, 0); 1216 | transform: translate3d(0, 2000px, 0); 1217 | } 1218 | } 1219 | 1220 | @keyframes bounceOutDown { 1221 | 20% { 1222 | -webkit-transform: translate3d(0, 10px, 0); 1223 | transform: translate3d(0, 10px, 0); 1224 | } 1225 | 1226 | 40%, 1227 | 45% { 1228 | opacity: 1; 1229 | -webkit-transform: translate3d(0, -20px, 0); 1230 | transform: translate3d(0, -20px, 0); 1231 | } 1232 | 1233 | to { 1234 | opacity: 0; 1235 | -webkit-transform: translate3d(0, 2000px, 0); 1236 | transform: translate3d(0, 2000px, 0); 1237 | } 1238 | } 1239 | 1240 | .bounceOutDown { 1241 | -webkit-animation-name: bounceOutDown; 1242 | animation-name: bounceOutDown; 1243 | } 1244 | 1245 | @-webkit-keyframes bounceOutLeft { 1246 | 20% { 1247 | opacity: 1; 1248 | -webkit-transform: translate3d(20px, 0, 0); 1249 | transform: translate3d(20px, 0, 0); 1250 | } 1251 | 1252 | to { 1253 | opacity: 0; 1254 | -webkit-transform: translate3d(-2000px, 0, 0); 1255 | transform: translate3d(-2000px, 0, 0); 1256 | } 1257 | } 1258 | 1259 | @keyframes bounceOutLeft { 1260 | 20% { 1261 | opacity: 1; 1262 | -webkit-transform: translate3d(20px, 0, 0); 1263 | transform: translate3d(20px, 0, 0); 1264 | } 1265 | 1266 | to { 1267 | opacity: 0; 1268 | -webkit-transform: translate3d(-2000px, 0, 0); 1269 | transform: translate3d(-2000px, 0, 0); 1270 | } 1271 | } 1272 | 1273 | .bounceOutLeft { 1274 | -webkit-animation-name: bounceOutLeft; 1275 | animation-name: bounceOutLeft; 1276 | } 1277 | 1278 | @-webkit-keyframes bounceOutRight { 1279 | 20% { 1280 | opacity: 1; 1281 | -webkit-transform: translate3d(-20px, 0, 0); 1282 | transform: translate3d(-20px, 0, 0); 1283 | } 1284 | 1285 | to { 1286 | opacity: 0; 1287 | -webkit-transform: translate3d(2000px, 0, 0); 1288 | transform: translate3d(2000px, 0, 0); 1289 | } 1290 | } 1291 | 1292 | @keyframes bounceOutRight { 1293 | 20% { 1294 | opacity: 1; 1295 | -webkit-transform: translate3d(-20px, 0, 0); 1296 | transform: translate3d(-20px, 0, 0); 1297 | } 1298 | 1299 | to { 1300 | opacity: 0; 1301 | -webkit-transform: translate3d(2000px, 0, 0); 1302 | transform: translate3d(2000px, 0, 0); 1303 | } 1304 | } 1305 | 1306 | .bounceOutRight { 1307 | -webkit-animation-name: bounceOutRight; 1308 | animation-name: bounceOutRight; 1309 | } 1310 | 1311 | @-webkit-keyframes bounceOutUp { 1312 | 20% { 1313 | -webkit-transform: translate3d(0, -10px, 0); 1314 | transform: translate3d(0, -10px, 0); 1315 | } 1316 | 1317 | 40%, 1318 | 45% { 1319 | opacity: 1; 1320 | -webkit-transform: translate3d(0, 20px, 0); 1321 | transform: translate3d(0, 20px, 0); 1322 | } 1323 | 1324 | to { 1325 | opacity: 0; 1326 | -webkit-transform: translate3d(0, -2000px, 0); 1327 | transform: translate3d(0, -2000px, 0); 1328 | } 1329 | } 1330 | 1331 | @keyframes bounceOutUp { 1332 | 20% { 1333 | -webkit-transform: translate3d(0, -10px, 0); 1334 | transform: translate3d(0, -10px, 0); 1335 | } 1336 | 1337 | 40%, 1338 | 45% { 1339 | opacity: 1; 1340 | -webkit-transform: translate3d(0, 20px, 0); 1341 | transform: translate3d(0, 20px, 0); 1342 | } 1343 | 1344 | to { 1345 | opacity: 0; 1346 | -webkit-transform: translate3d(0, -2000px, 0); 1347 | transform: translate3d(0, -2000px, 0); 1348 | } 1349 | } 1350 | 1351 | .bounceOutUp { 1352 | -webkit-animation-name: bounceOutUp; 1353 | animation-name: bounceOutUp; 1354 | } 1355 | 1356 | @-webkit-keyframes fadeIn { 1357 | from { 1358 | opacity: 0; 1359 | } 1360 | 1361 | to { 1362 | opacity: 1; 1363 | } 1364 | } 1365 | 1366 | @keyframes fadeIn { 1367 | from { 1368 | opacity: 0; 1369 | } 1370 | 1371 | to { 1372 | opacity: 1; 1373 | } 1374 | } 1375 | 1376 | .fadeIn { 1377 | -webkit-animation-name: fadeIn; 1378 | animation-name: fadeIn; 1379 | } 1380 | 1381 | @-webkit-keyframes fadeInDown { 1382 | from { 1383 | opacity: 0; 1384 | -webkit-transform: translate3d(0, -100%, 0); 1385 | transform: translate3d(0, -100%, 0); 1386 | } 1387 | 1388 | to { 1389 | opacity: 1; 1390 | -webkit-transform: translate3d(0, 0, 0); 1391 | transform: translate3d(0, 0, 0); 1392 | } 1393 | } 1394 | 1395 | @keyframes fadeInDown { 1396 | from { 1397 | opacity: 0; 1398 | -webkit-transform: translate3d(0, -100%, 0); 1399 | transform: translate3d(0, -100%, 0); 1400 | } 1401 | 1402 | to { 1403 | opacity: 1; 1404 | -webkit-transform: translate3d(0, 0, 0); 1405 | transform: translate3d(0, 0, 0); 1406 | } 1407 | } 1408 | 1409 | .fadeInDown { 1410 | -webkit-animation-name: fadeInDown; 1411 | animation-name: fadeInDown; 1412 | } 1413 | 1414 | @-webkit-keyframes fadeInDownBig { 1415 | from { 1416 | opacity: 0; 1417 | -webkit-transform: translate3d(0, -2000px, 0); 1418 | transform: translate3d(0, -2000px, 0); 1419 | } 1420 | 1421 | to { 1422 | opacity: 1; 1423 | -webkit-transform: translate3d(0, 0, 0); 1424 | transform: translate3d(0, 0, 0); 1425 | } 1426 | } 1427 | 1428 | @keyframes fadeInDownBig { 1429 | from { 1430 | opacity: 0; 1431 | -webkit-transform: translate3d(0, -2000px, 0); 1432 | transform: translate3d(0, -2000px, 0); 1433 | } 1434 | 1435 | to { 1436 | opacity: 1; 1437 | -webkit-transform: translate3d(0, 0, 0); 1438 | transform: translate3d(0, 0, 0); 1439 | } 1440 | } 1441 | 1442 | .fadeInDownBig { 1443 | -webkit-animation-name: fadeInDownBig; 1444 | animation-name: fadeInDownBig; 1445 | } 1446 | 1447 | @-webkit-keyframes fadeInLeft { 1448 | from { 1449 | opacity: 0; 1450 | -webkit-transform: translate3d(-100%, 0, 0); 1451 | transform: translate3d(-100%, 0, 0); 1452 | } 1453 | 1454 | to { 1455 | opacity: 1; 1456 | -webkit-transform: translate3d(0, 0, 0); 1457 | transform: translate3d(0, 0, 0); 1458 | } 1459 | } 1460 | 1461 | @keyframes fadeInLeft { 1462 | from { 1463 | opacity: 0; 1464 | -webkit-transform: translate3d(-100%, 0, 0); 1465 | transform: translate3d(-100%, 0, 0); 1466 | } 1467 | 1468 | to { 1469 | opacity: 1; 1470 | -webkit-transform: translate3d(0, 0, 0); 1471 | transform: translate3d(0, 0, 0); 1472 | } 1473 | } 1474 | 1475 | .fadeInLeft { 1476 | -webkit-animation-name: fadeInLeft; 1477 | animation-name: fadeInLeft; 1478 | } 1479 | 1480 | @-webkit-keyframes fadeInLeftBig { 1481 | from { 1482 | opacity: 0; 1483 | -webkit-transform: translate3d(-2000px, 0, 0); 1484 | transform: translate3d(-2000px, 0, 0); 1485 | } 1486 | 1487 | to { 1488 | opacity: 1; 1489 | -webkit-transform: translate3d(0, 0, 0); 1490 | transform: translate3d(0, 0, 0); 1491 | } 1492 | } 1493 | 1494 | @keyframes fadeInLeftBig { 1495 | from { 1496 | opacity: 0; 1497 | -webkit-transform: translate3d(-2000px, 0, 0); 1498 | transform: translate3d(-2000px, 0, 0); 1499 | } 1500 | 1501 | to { 1502 | opacity: 1; 1503 | -webkit-transform: translate3d(0, 0, 0); 1504 | transform: translate3d(0, 0, 0); 1505 | } 1506 | } 1507 | 1508 | .fadeInLeftBig { 1509 | -webkit-animation-name: fadeInLeftBig; 1510 | animation-name: fadeInLeftBig; 1511 | } 1512 | 1513 | @-webkit-keyframes fadeInRight { 1514 | from { 1515 | opacity: 0; 1516 | -webkit-transform: translate3d(100%, 0, 0); 1517 | transform: translate3d(100%, 0, 0); 1518 | } 1519 | 1520 | to { 1521 | opacity: 1; 1522 | -webkit-transform: translate3d(0, 0, 0); 1523 | transform: translate3d(0, 0, 0); 1524 | } 1525 | } 1526 | 1527 | @keyframes fadeInRight { 1528 | from { 1529 | opacity: 0; 1530 | -webkit-transform: translate3d(100%, 0, 0); 1531 | transform: translate3d(100%, 0, 0); 1532 | } 1533 | 1534 | to { 1535 | opacity: 1; 1536 | -webkit-transform: translate3d(0, 0, 0); 1537 | transform: translate3d(0, 0, 0); 1538 | } 1539 | } 1540 | 1541 | .fadeInRight { 1542 | -webkit-animation-name: fadeInRight; 1543 | animation-name: fadeInRight; 1544 | } 1545 | 1546 | @-webkit-keyframes fadeInRightBig { 1547 | from { 1548 | opacity: 0; 1549 | -webkit-transform: translate3d(2000px, 0, 0); 1550 | transform: translate3d(2000px, 0, 0); 1551 | } 1552 | 1553 | to { 1554 | opacity: 1; 1555 | -webkit-transform: translate3d(0, 0, 0); 1556 | transform: translate3d(0, 0, 0); 1557 | } 1558 | } 1559 | 1560 | @keyframes fadeInRightBig { 1561 | from { 1562 | opacity: 0; 1563 | -webkit-transform: translate3d(2000px, 0, 0); 1564 | transform: translate3d(2000px, 0, 0); 1565 | } 1566 | 1567 | to { 1568 | opacity: 1; 1569 | -webkit-transform: translate3d(0, 0, 0); 1570 | transform: translate3d(0, 0, 0); 1571 | } 1572 | } 1573 | 1574 | .fadeInRightBig { 1575 | -webkit-animation-name: fadeInRightBig; 1576 | animation-name: fadeInRightBig; 1577 | } 1578 | 1579 | @-webkit-keyframes fadeInUp { 1580 | from { 1581 | opacity: 0; 1582 | -webkit-transform: translate3d(0, 100%, 0); 1583 | transform: translate3d(0, 100%, 0); 1584 | } 1585 | 1586 | to { 1587 | opacity: 1; 1588 | -webkit-transform: translate3d(0, 0, 0); 1589 | transform: translate3d(0, 0, 0); 1590 | } 1591 | } 1592 | 1593 | @keyframes fadeInUp { 1594 | from { 1595 | opacity: 0; 1596 | -webkit-transform: translate3d(0, 100%, 0); 1597 | transform: translate3d(0, 100%, 0); 1598 | } 1599 | 1600 | to { 1601 | opacity: 1; 1602 | -webkit-transform: translate3d(0, 0, 0); 1603 | transform: translate3d(0, 0, 0); 1604 | } 1605 | } 1606 | 1607 | .fadeInUp { 1608 | -webkit-animation-name: fadeInUp; 1609 | animation-name: fadeInUp; 1610 | } 1611 | 1612 | @-webkit-keyframes fadeInUpBig { 1613 | from { 1614 | opacity: 0; 1615 | -webkit-transform: translate3d(0, 2000px, 0); 1616 | transform: translate3d(0, 2000px, 0); 1617 | } 1618 | 1619 | to { 1620 | opacity: 1; 1621 | -webkit-transform: translate3d(0, 0, 0); 1622 | transform: translate3d(0, 0, 0); 1623 | } 1624 | } 1625 | 1626 | @keyframes fadeInUpBig { 1627 | from { 1628 | opacity: 0; 1629 | -webkit-transform: translate3d(0, 2000px, 0); 1630 | transform: translate3d(0, 2000px, 0); 1631 | } 1632 | 1633 | to { 1634 | opacity: 1; 1635 | -webkit-transform: translate3d(0, 0, 0); 1636 | transform: translate3d(0, 0, 0); 1637 | } 1638 | } 1639 | 1640 | .fadeInUpBig { 1641 | -webkit-animation-name: fadeInUpBig; 1642 | animation-name: fadeInUpBig; 1643 | } 1644 | 1645 | @-webkit-keyframes fadeOut { 1646 | from { 1647 | opacity: 1; 1648 | } 1649 | 1650 | to { 1651 | opacity: 0; 1652 | } 1653 | } 1654 | 1655 | @keyframes fadeOut { 1656 | from { 1657 | opacity: 1; 1658 | } 1659 | 1660 | to { 1661 | opacity: 0; 1662 | } 1663 | } 1664 | 1665 | .fadeOut { 1666 | -webkit-animation-name: fadeOut; 1667 | animation-name: fadeOut; 1668 | } 1669 | 1670 | @-webkit-keyframes fadeOutDown { 1671 | from { 1672 | opacity: 1; 1673 | } 1674 | 1675 | to { 1676 | opacity: 0; 1677 | -webkit-transform: translate3d(0, 100%, 0); 1678 | transform: translate3d(0, 100%, 0); 1679 | } 1680 | } 1681 | 1682 | @keyframes fadeOutDown { 1683 | from { 1684 | opacity: 1; 1685 | } 1686 | 1687 | to { 1688 | opacity: 0; 1689 | -webkit-transform: translate3d(0, 100%, 0); 1690 | transform: translate3d(0, 100%, 0); 1691 | } 1692 | } 1693 | 1694 | .fadeOutDown { 1695 | -webkit-animation-name: fadeOutDown; 1696 | animation-name: fadeOutDown; 1697 | } 1698 | 1699 | @-webkit-keyframes fadeOutDownBig { 1700 | from { 1701 | opacity: 1; 1702 | } 1703 | 1704 | to { 1705 | opacity: 0; 1706 | -webkit-transform: translate3d(0, 2000px, 0); 1707 | transform: translate3d(0, 2000px, 0); 1708 | } 1709 | } 1710 | 1711 | @keyframes fadeOutDownBig { 1712 | from { 1713 | opacity: 1; 1714 | } 1715 | 1716 | to { 1717 | opacity: 0; 1718 | -webkit-transform: translate3d(0, 2000px, 0); 1719 | transform: translate3d(0, 2000px, 0); 1720 | } 1721 | } 1722 | 1723 | .fadeOutDownBig { 1724 | -webkit-animation-name: fadeOutDownBig; 1725 | animation-name: fadeOutDownBig; 1726 | } 1727 | 1728 | @-webkit-keyframes fadeOutLeft { 1729 | from { 1730 | opacity: 1; 1731 | } 1732 | 1733 | to { 1734 | opacity: 0; 1735 | -webkit-transform: translate3d(-100%, 0, 0); 1736 | transform: translate3d(-100%, 0, 0); 1737 | } 1738 | } 1739 | 1740 | @keyframes fadeOutLeft { 1741 | from { 1742 | opacity: 1; 1743 | } 1744 | 1745 | to { 1746 | opacity: 0; 1747 | -webkit-transform: translate3d(-100%, 0, 0); 1748 | transform: translate3d(-100%, 0, 0); 1749 | } 1750 | } 1751 | 1752 | .fadeOutLeft { 1753 | -webkit-animation-name: fadeOutLeft; 1754 | animation-name: fadeOutLeft; 1755 | } 1756 | 1757 | @-webkit-keyframes fadeOutLeftBig { 1758 | from { 1759 | opacity: 1; 1760 | } 1761 | 1762 | to { 1763 | opacity: 0; 1764 | -webkit-transform: translate3d(-2000px, 0, 0); 1765 | transform: translate3d(-2000px, 0, 0); 1766 | } 1767 | } 1768 | 1769 | @keyframes fadeOutLeftBig { 1770 | from { 1771 | opacity: 1; 1772 | } 1773 | 1774 | to { 1775 | opacity: 0; 1776 | -webkit-transform: translate3d(-2000px, 0, 0); 1777 | transform: translate3d(-2000px, 0, 0); 1778 | } 1779 | } 1780 | 1781 | .fadeOutLeftBig { 1782 | -webkit-animation-name: fadeOutLeftBig; 1783 | animation-name: fadeOutLeftBig; 1784 | } 1785 | 1786 | @-webkit-keyframes fadeOutRight { 1787 | from { 1788 | opacity: 1; 1789 | } 1790 | 1791 | to { 1792 | opacity: 0; 1793 | -webkit-transform: translate3d(100%, 0, 0); 1794 | transform: translate3d(100%, 0, 0); 1795 | } 1796 | } 1797 | 1798 | @keyframes fadeOutRight { 1799 | from { 1800 | opacity: 1; 1801 | } 1802 | 1803 | to { 1804 | opacity: 0; 1805 | -webkit-transform: translate3d(100%, 0, 0); 1806 | transform: translate3d(100%, 0, 0); 1807 | } 1808 | } 1809 | 1810 | .fadeOutRight { 1811 | -webkit-animation-name: fadeOutRight; 1812 | animation-name: fadeOutRight; 1813 | } 1814 | 1815 | @-webkit-keyframes fadeOutRightBig { 1816 | from { 1817 | opacity: 1; 1818 | } 1819 | 1820 | to { 1821 | opacity: 0; 1822 | -webkit-transform: translate3d(2000px, 0, 0); 1823 | transform: translate3d(2000px, 0, 0); 1824 | } 1825 | } 1826 | 1827 | @keyframes fadeOutRightBig { 1828 | from { 1829 | opacity: 1; 1830 | } 1831 | 1832 | to { 1833 | opacity: 0; 1834 | -webkit-transform: translate3d(2000px, 0, 0); 1835 | transform: translate3d(2000px, 0, 0); 1836 | } 1837 | } 1838 | 1839 | .fadeOutRightBig { 1840 | -webkit-animation-name: fadeOutRightBig; 1841 | animation-name: fadeOutRightBig; 1842 | } 1843 | 1844 | @-webkit-keyframes fadeOutUp { 1845 | from { 1846 | opacity: 1; 1847 | } 1848 | 1849 | to { 1850 | opacity: 0; 1851 | -webkit-transform: translate3d(0, -100%, 0); 1852 | transform: translate3d(0, -100%, 0); 1853 | } 1854 | } 1855 | 1856 | @keyframes fadeOutUp { 1857 | from { 1858 | opacity: 1; 1859 | } 1860 | 1861 | to { 1862 | opacity: 0; 1863 | -webkit-transform: translate3d(0, -100%, 0); 1864 | transform: translate3d(0, -100%, 0); 1865 | } 1866 | } 1867 | 1868 | .fadeOutUp { 1869 | -webkit-animation-name: fadeOutUp; 1870 | animation-name: fadeOutUp; 1871 | } 1872 | 1873 | @-webkit-keyframes fadeOutUpBig { 1874 | from { 1875 | opacity: 1; 1876 | } 1877 | 1878 | to { 1879 | opacity: 0; 1880 | -webkit-transform: translate3d(0, -2000px, 0); 1881 | transform: translate3d(0, -2000px, 0); 1882 | } 1883 | } 1884 | 1885 | @keyframes fadeOutUpBig { 1886 | from { 1887 | opacity: 1; 1888 | } 1889 | 1890 | to { 1891 | opacity: 0; 1892 | -webkit-transform: translate3d(0, -2000px, 0); 1893 | transform: translate3d(0, -2000px, 0); 1894 | } 1895 | } 1896 | 1897 | .fadeOutUpBig { 1898 | -webkit-animation-name: fadeOutUpBig; 1899 | animation-name: fadeOutUpBig; 1900 | } 1901 | 1902 | @-webkit-keyframes flip { 1903 | from { 1904 | -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) 1905 | rotate3d(0, 1, 0, -360deg); 1906 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); 1907 | -webkit-animation-timing-function: ease-out; 1908 | animation-timing-function: ease-out; 1909 | } 1910 | 1911 | 40% { 1912 | -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 1913 | rotate3d(0, 1, 0, -190deg); 1914 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 1915 | rotate3d(0, 1, 0, -190deg); 1916 | -webkit-animation-timing-function: ease-out; 1917 | animation-timing-function: ease-out; 1918 | } 1919 | 1920 | 50% { 1921 | -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 1922 | rotate3d(0, 1, 0, -170deg); 1923 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 1924 | rotate3d(0, 1, 0, -170deg); 1925 | -webkit-animation-timing-function: ease-in; 1926 | animation-timing-function: ease-in; 1927 | } 1928 | 1929 | 80% { 1930 | -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) 1931 | rotate3d(0, 1, 0, 0deg); 1932 | transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) 1933 | rotate3d(0, 1, 0, 0deg); 1934 | -webkit-animation-timing-function: ease-in; 1935 | animation-timing-function: ease-in; 1936 | } 1937 | 1938 | to { 1939 | -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) 1940 | rotate3d(0, 1, 0, 0deg); 1941 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); 1942 | -webkit-animation-timing-function: ease-in; 1943 | animation-timing-function: ease-in; 1944 | } 1945 | } 1946 | 1947 | @keyframes flip { 1948 | from { 1949 | -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) 1950 | rotate3d(0, 1, 0, -360deg); 1951 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); 1952 | -webkit-animation-timing-function: ease-out; 1953 | animation-timing-function: ease-out; 1954 | } 1955 | 1956 | 40% { 1957 | -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 1958 | rotate3d(0, 1, 0, -190deg); 1959 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 1960 | rotate3d(0, 1, 0, -190deg); 1961 | -webkit-animation-timing-function: ease-out; 1962 | animation-timing-function: ease-out; 1963 | } 1964 | 1965 | 50% { 1966 | -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 1967 | rotate3d(0, 1, 0, -170deg); 1968 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 1969 | rotate3d(0, 1, 0, -170deg); 1970 | -webkit-animation-timing-function: ease-in; 1971 | animation-timing-function: ease-in; 1972 | } 1973 | 1974 | 80% { 1975 | -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) 1976 | rotate3d(0, 1, 0, 0deg); 1977 | transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) 1978 | rotate3d(0, 1, 0, 0deg); 1979 | -webkit-animation-timing-function: ease-in; 1980 | animation-timing-function: ease-in; 1981 | } 1982 | 1983 | to { 1984 | -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) 1985 | rotate3d(0, 1, 0, 0deg); 1986 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); 1987 | -webkit-animation-timing-function: ease-in; 1988 | animation-timing-function: ease-in; 1989 | } 1990 | } 1991 | 1992 | .animated.flip { 1993 | -webkit-backface-visibility: visible; 1994 | backface-visibility: visible; 1995 | -webkit-animation-name: flip; 1996 | animation-name: flip; 1997 | } 1998 | 1999 | @-webkit-keyframes flipInX { 2000 | from { 2001 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2002 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2003 | -webkit-animation-timing-function: ease-in; 2004 | animation-timing-function: ease-in; 2005 | opacity: 0; 2006 | } 2007 | 2008 | 40% { 2009 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2010 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2011 | -webkit-animation-timing-function: ease-in; 2012 | animation-timing-function: ease-in; 2013 | } 2014 | 2015 | 60% { 2016 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 2017 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 2018 | opacity: 1; 2019 | } 2020 | 2021 | 80% { 2022 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 2023 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 2024 | } 2025 | 2026 | to { 2027 | -webkit-transform: perspective(400px); 2028 | transform: perspective(400px); 2029 | } 2030 | } 2031 | 2032 | @keyframes flipInX { 2033 | from { 2034 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2035 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2036 | -webkit-animation-timing-function: ease-in; 2037 | animation-timing-function: ease-in; 2038 | opacity: 0; 2039 | } 2040 | 2041 | 40% { 2042 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2043 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2044 | -webkit-animation-timing-function: ease-in; 2045 | animation-timing-function: ease-in; 2046 | } 2047 | 2048 | 60% { 2049 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 2050 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 2051 | opacity: 1; 2052 | } 2053 | 2054 | 80% { 2055 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 2056 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 2057 | } 2058 | 2059 | to { 2060 | -webkit-transform: perspective(400px); 2061 | transform: perspective(400px); 2062 | } 2063 | } 2064 | 2065 | .flipInX { 2066 | -webkit-backface-visibility: visible !important; 2067 | backface-visibility: visible !important; 2068 | -webkit-animation-name: flipInX; 2069 | animation-name: flipInX; 2070 | } 2071 | 2072 | @-webkit-keyframes flipInY { 2073 | from { 2074 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2075 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2076 | -webkit-animation-timing-function: ease-in; 2077 | animation-timing-function: ease-in; 2078 | opacity: 0; 2079 | } 2080 | 2081 | 40% { 2082 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 2083 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 2084 | -webkit-animation-timing-function: ease-in; 2085 | animation-timing-function: ease-in; 2086 | } 2087 | 2088 | 60% { 2089 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 2090 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 2091 | opacity: 1; 2092 | } 2093 | 2094 | 80% { 2095 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 2096 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 2097 | } 2098 | 2099 | to { 2100 | -webkit-transform: perspective(400px); 2101 | transform: perspective(400px); 2102 | } 2103 | } 2104 | 2105 | @keyframes flipInY { 2106 | from { 2107 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2108 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2109 | -webkit-animation-timing-function: ease-in; 2110 | animation-timing-function: ease-in; 2111 | opacity: 0; 2112 | } 2113 | 2114 | 40% { 2115 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 2116 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 2117 | -webkit-animation-timing-function: ease-in; 2118 | animation-timing-function: ease-in; 2119 | } 2120 | 2121 | 60% { 2122 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 2123 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 2124 | opacity: 1; 2125 | } 2126 | 2127 | 80% { 2128 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 2129 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 2130 | } 2131 | 2132 | to { 2133 | -webkit-transform: perspective(400px); 2134 | transform: perspective(400px); 2135 | } 2136 | } 2137 | 2138 | .flipInY { 2139 | -webkit-backface-visibility: visible !important; 2140 | backface-visibility: visible !important; 2141 | -webkit-animation-name: flipInY; 2142 | animation-name: flipInY; 2143 | } 2144 | 2145 | @-webkit-keyframes flipOutX { 2146 | from { 2147 | -webkit-transform: perspective(400px); 2148 | transform: perspective(400px); 2149 | } 2150 | 2151 | 30% { 2152 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2153 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2154 | opacity: 1; 2155 | } 2156 | 2157 | to { 2158 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2159 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2160 | opacity: 0; 2161 | } 2162 | } 2163 | 2164 | @keyframes flipOutX { 2165 | from { 2166 | -webkit-transform: perspective(400px); 2167 | transform: perspective(400px); 2168 | } 2169 | 2170 | 30% { 2171 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2172 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2173 | opacity: 1; 2174 | } 2175 | 2176 | to { 2177 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2178 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2179 | opacity: 0; 2180 | } 2181 | } 2182 | 2183 | .flipOutX { 2184 | -webkit-animation-duration: 0.75s; 2185 | animation-duration: 0.75s; 2186 | -webkit-animation-name: flipOutX; 2187 | animation-name: flipOutX; 2188 | -webkit-backface-visibility: visible !important; 2189 | backface-visibility: visible !important; 2190 | } 2191 | 2192 | @-webkit-keyframes flipOutY { 2193 | from { 2194 | -webkit-transform: perspective(400px); 2195 | transform: perspective(400px); 2196 | } 2197 | 2198 | 30% { 2199 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2200 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2201 | opacity: 1; 2202 | } 2203 | 2204 | to { 2205 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2206 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2207 | opacity: 0; 2208 | } 2209 | } 2210 | 2211 | @keyframes flipOutY { 2212 | from { 2213 | -webkit-transform: perspective(400px); 2214 | transform: perspective(400px); 2215 | } 2216 | 2217 | 30% { 2218 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2219 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2220 | opacity: 1; 2221 | } 2222 | 2223 | to { 2224 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2225 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2226 | opacity: 0; 2227 | } 2228 | } 2229 | 2230 | .flipOutY { 2231 | -webkit-animation-duration: 0.75s; 2232 | animation-duration: 0.75s; 2233 | -webkit-backface-visibility: visible !important; 2234 | backface-visibility: visible !important; 2235 | -webkit-animation-name: flipOutY; 2236 | animation-name: flipOutY; 2237 | } 2238 | 2239 | @-webkit-keyframes lightSpeedIn { 2240 | from { 2241 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 2242 | transform: translate3d(100%, 0, 0) skewX(-30deg); 2243 | opacity: 0; 2244 | } 2245 | 2246 | 60% { 2247 | -webkit-transform: skewX(20deg); 2248 | transform: skewX(20deg); 2249 | opacity: 1; 2250 | } 2251 | 2252 | 80% { 2253 | -webkit-transform: skewX(-5deg); 2254 | transform: skewX(-5deg); 2255 | } 2256 | 2257 | to { 2258 | -webkit-transform: translate3d(0, 0, 0); 2259 | transform: translate3d(0, 0, 0); 2260 | } 2261 | } 2262 | 2263 | @keyframes lightSpeedIn { 2264 | from { 2265 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 2266 | transform: translate3d(100%, 0, 0) skewX(-30deg); 2267 | opacity: 0; 2268 | } 2269 | 2270 | 60% { 2271 | -webkit-transform: skewX(20deg); 2272 | transform: skewX(20deg); 2273 | opacity: 1; 2274 | } 2275 | 2276 | 80% { 2277 | -webkit-transform: skewX(-5deg); 2278 | transform: skewX(-5deg); 2279 | } 2280 | 2281 | to { 2282 | -webkit-transform: translate3d(0, 0, 0); 2283 | transform: translate3d(0, 0, 0); 2284 | } 2285 | } 2286 | 2287 | .lightSpeedIn { 2288 | -webkit-animation-name: lightSpeedIn; 2289 | animation-name: lightSpeedIn; 2290 | -webkit-animation-timing-function: ease-out; 2291 | animation-timing-function: ease-out; 2292 | } 2293 | 2294 | @-webkit-keyframes lightSpeedOut { 2295 | from { 2296 | opacity: 1; 2297 | } 2298 | 2299 | to { 2300 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2301 | transform: translate3d(100%, 0, 0) skewX(30deg); 2302 | opacity: 0; 2303 | } 2304 | } 2305 | 2306 | @keyframes lightSpeedOut { 2307 | from { 2308 | opacity: 1; 2309 | } 2310 | 2311 | to { 2312 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2313 | transform: translate3d(100%, 0, 0) skewX(30deg); 2314 | opacity: 0; 2315 | } 2316 | } 2317 | 2318 | .lightSpeedOut { 2319 | -webkit-animation-name: lightSpeedOut; 2320 | animation-name: lightSpeedOut; 2321 | -webkit-animation-timing-function: ease-in; 2322 | animation-timing-function: ease-in; 2323 | } 2324 | 2325 | @-webkit-keyframes rotateIn { 2326 | from { 2327 | -webkit-transform-origin: center; 2328 | transform-origin: center; 2329 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2330 | transform: rotate3d(0, 0, 1, -200deg); 2331 | opacity: 0; 2332 | } 2333 | 2334 | to { 2335 | -webkit-transform-origin: center; 2336 | transform-origin: center; 2337 | -webkit-transform: translate3d(0, 0, 0); 2338 | transform: translate3d(0, 0, 0); 2339 | opacity: 1; 2340 | } 2341 | } 2342 | 2343 | @keyframes rotateIn { 2344 | from { 2345 | -webkit-transform-origin: center; 2346 | transform-origin: center; 2347 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2348 | transform: rotate3d(0, 0, 1, -200deg); 2349 | opacity: 0; 2350 | } 2351 | 2352 | to { 2353 | -webkit-transform-origin: center; 2354 | transform-origin: center; 2355 | -webkit-transform: translate3d(0, 0, 0); 2356 | transform: translate3d(0, 0, 0); 2357 | opacity: 1; 2358 | } 2359 | } 2360 | 2361 | .rotateIn { 2362 | -webkit-animation-name: rotateIn; 2363 | animation-name: rotateIn; 2364 | } 2365 | 2366 | @-webkit-keyframes rotateInDownLeft { 2367 | from { 2368 | -webkit-transform-origin: left bottom; 2369 | transform-origin: left bottom; 2370 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2371 | transform: rotate3d(0, 0, 1, -45deg); 2372 | opacity: 0; 2373 | } 2374 | 2375 | to { 2376 | -webkit-transform-origin: left bottom; 2377 | transform-origin: left bottom; 2378 | -webkit-transform: translate3d(0, 0, 0); 2379 | transform: translate3d(0, 0, 0); 2380 | opacity: 1; 2381 | } 2382 | } 2383 | 2384 | @keyframes rotateInDownLeft { 2385 | from { 2386 | -webkit-transform-origin: left bottom; 2387 | transform-origin: left bottom; 2388 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2389 | transform: rotate3d(0, 0, 1, -45deg); 2390 | opacity: 0; 2391 | } 2392 | 2393 | to { 2394 | -webkit-transform-origin: left bottom; 2395 | transform-origin: left bottom; 2396 | -webkit-transform: translate3d(0, 0, 0); 2397 | transform: translate3d(0, 0, 0); 2398 | opacity: 1; 2399 | } 2400 | } 2401 | 2402 | .rotateInDownLeft { 2403 | -webkit-animation-name: rotateInDownLeft; 2404 | animation-name: rotateInDownLeft; 2405 | } 2406 | 2407 | @-webkit-keyframes rotateInDownRight { 2408 | from { 2409 | -webkit-transform-origin: right bottom; 2410 | transform-origin: right bottom; 2411 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2412 | transform: rotate3d(0, 0, 1, 45deg); 2413 | opacity: 0; 2414 | } 2415 | 2416 | to { 2417 | -webkit-transform-origin: right bottom; 2418 | transform-origin: right bottom; 2419 | -webkit-transform: translate3d(0, 0, 0); 2420 | transform: translate3d(0, 0, 0); 2421 | opacity: 1; 2422 | } 2423 | } 2424 | 2425 | @keyframes rotateInDownRight { 2426 | from { 2427 | -webkit-transform-origin: right bottom; 2428 | transform-origin: right bottom; 2429 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2430 | transform: rotate3d(0, 0, 1, 45deg); 2431 | opacity: 0; 2432 | } 2433 | 2434 | to { 2435 | -webkit-transform-origin: right bottom; 2436 | transform-origin: right bottom; 2437 | -webkit-transform: translate3d(0, 0, 0); 2438 | transform: translate3d(0, 0, 0); 2439 | opacity: 1; 2440 | } 2441 | } 2442 | 2443 | .rotateInDownRight { 2444 | -webkit-animation-name: rotateInDownRight; 2445 | animation-name: rotateInDownRight; 2446 | } 2447 | 2448 | @-webkit-keyframes rotateInUpLeft { 2449 | from { 2450 | -webkit-transform-origin: left bottom; 2451 | transform-origin: left bottom; 2452 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2453 | transform: rotate3d(0, 0, 1, 45deg); 2454 | opacity: 0; 2455 | } 2456 | 2457 | to { 2458 | -webkit-transform-origin: left bottom; 2459 | transform-origin: left bottom; 2460 | -webkit-transform: translate3d(0, 0, 0); 2461 | transform: translate3d(0, 0, 0); 2462 | opacity: 1; 2463 | } 2464 | } 2465 | 2466 | @keyframes rotateInUpLeft { 2467 | from { 2468 | -webkit-transform-origin: left bottom; 2469 | transform-origin: left bottom; 2470 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2471 | transform: rotate3d(0, 0, 1, 45deg); 2472 | opacity: 0; 2473 | } 2474 | 2475 | to { 2476 | -webkit-transform-origin: left bottom; 2477 | transform-origin: left bottom; 2478 | -webkit-transform: translate3d(0, 0, 0); 2479 | transform: translate3d(0, 0, 0); 2480 | opacity: 1; 2481 | } 2482 | } 2483 | 2484 | .rotateInUpLeft { 2485 | -webkit-animation-name: rotateInUpLeft; 2486 | animation-name: rotateInUpLeft; 2487 | } 2488 | 2489 | @-webkit-keyframes rotateInUpRight { 2490 | from { 2491 | -webkit-transform-origin: right bottom; 2492 | transform-origin: right bottom; 2493 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2494 | transform: rotate3d(0, 0, 1, -90deg); 2495 | opacity: 0; 2496 | } 2497 | 2498 | to { 2499 | -webkit-transform-origin: right bottom; 2500 | transform-origin: right bottom; 2501 | -webkit-transform: translate3d(0, 0, 0); 2502 | transform: translate3d(0, 0, 0); 2503 | opacity: 1; 2504 | } 2505 | } 2506 | 2507 | @keyframes rotateInUpRight { 2508 | from { 2509 | -webkit-transform-origin: right bottom; 2510 | transform-origin: right bottom; 2511 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2512 | transform: rotate3d(0, 0, 1, -90deg); 2513 | opacity: 0; 2514 | } 2515 | 2516 | to { 2517 | -webkit-transform-origin: right bottom; 2518 | transform-origin: right bottom; 2519 | -webkit-transform: translate3d(0, 0, 0); 2520 | transform: translate3d(0, 0, 0); 2521 | opacity: 1; 2522 | } 2523 | } 2524 | 2525 | .rotateInUpRight { 2526 | -webkit-animation-name: rotateInUpRight; 2527 | animation-name: rotateInUpRight; 2528 | } 2529 | 2530 | @-webkit-keyframes rotateOut { 2531 | from { 2532 | -webkit-transform-origin: center; 2533 | transform-origin: center; 2534 | opacity: 1; 2535 | } 2536 | 2537 | to { 2538 | -webkit-transform-origin: center; 2539 | transform-origin: center; 2540 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2541 | transform: rotate3d(0, 0, 1, 200deg); 2542 | opacity: 0; 2543 | } 2544 | } 2545 | 2546 | @keyframes rotateOut { 2547 | from { 2548 | -webkit-transform-origin: center; 2549 | transform-origin: center; 2550 | opacity: 1; 2551 | } 2552 | 2553 | to { 2554 | -webkit-transform-origin: center; 2555 | transform-origin: center; 2556 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2557 | transform: rotate3d(0, 0, 1, 200deg); 2558 | opacity: 0; 2559 | } 2560 | } 2561 | 2562 | .rotateOut { 2563 | -webkit-animation-name: rotateOut; 2564 | animation-name: rotateOut; 2565 | } 2566 | 2567 | @-webkit-keyframes rotateOutDownLeft { 2568 | from { 2569 | -webkit-transform-origin: left bottom; 2570 | transform-origin: left bottom; 2571 | opacity: 1; 2572 | } 2573 | 2574 | to { 2575 | -webkit-transform-origin: left bottom; 2576 | transform-origin: left bottom; 2577 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2578 | transform: rotate3d(0, 0, 1, 45deg); 2579 | opacity: 0; 2580 | } 2581 | } 2582 | 2583 | @keyframes rotateOutDownLeft { 2584 | from { 2585 | -webkit-transform-origin: left bottom; 2586 | transform-origin: left bottom; 2587 | opacity: 1; 2588 | } 2589 | 2590 | to { 2591 | -webkit-transform-origin: left bottom; 2592 | transform-origin: left bottom; 2593 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2594 | transform: rotate3d(0, 0, 1, 45deg); 2595 | opacity: 0; 2596 | } 2597 | } 2598 | 2599 | .rotateOutDownLeft { 2600 | -webkit-animation-name: rotateOutDownLeft; 2601 | animation-name: rotateOutDownLeft; 2602 | } 2603 | 2604 | @-webkit-keyframes rotateOutDownRight { 2605 | from { 2606 | -webkit-transform-origin: right bottom; 2607 | transform-origin: right bottom; 2608 | opacity: 1; 2609 | } 2610 | 2611 | to { 2612 | -webkit-transform-origin: right bottom; 2613 | transform-origin: right bottom; 2614 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2615 | transform: rotate3d(0, 0, 1, -45deg); 2616 | opacity: 0; 2617 | } 2618 | } 2619 | 2620 | @keyframes rotateOutDownRight { 2621 | from { 2622 | -webkit-transform-origin: right bottom; 2623 | transform-origin: right bottom; 2624 | opacity: 1; 2625 | } 2626 | 2627 | to { 2628 | -webkit-transform-origin: right bottom; 2629 | transform-origin: right bottom; 2630 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2631 | transform: rotate3d(0, 0, 1, -45deg); 2632 | opacity: 0; 2633 | } 2634 | } 2635 | 2636 | .rotateOutDownRight { 2637 | -webkit-animation-name: rotateOutDownRight; 2638 | animation-name: rotateOutDownRight; 2639 | } 2640 | 2641 | @-webkit-keyframes rotateOutUpLeft { 2642 | from { 2643 | -webkit-transform-origin: left bottom; 2644 | transform-origin: left bottom; 2645 | opacity: 1; 2646 | } 2647 | 2648 | to { 2649 | -webkit-transform-origin: left bottom; 2650 | transform-origin: left bottom; 2651 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2652 | transform: rotate3d(0, 0, 1, -45deg); 2653 | opacity: 0; 2654 | } 2655 | } 2656 | 2657 | @keyframes rotateOutUpLeft { 2658 | from { 2659 | -webkit-transform-origin: left bottom; 2660 | transform-origin: left bottom; 2661 | opacity: 1; 2662 | } 2663 | 2664 | to { 2665 | -webkit-transform-origin: left bottom; 2666 | transform-origin: left bottom; 2667 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2668 | transform: rotate3d(0, 0, 1, -45deg); 2669 | opacity: 0; 2670 | } 2671 | } 2672 | 2673 | .rotateOutUpLeft { 2674 | -webkit-animation-name: rotateOutUpLeft; 2675 | animation-name: rotateOutUpLeft; 2676 | } 2677 | 2678 | @-webkit-keyframes rotateOutUpRight { 2679 | from { 2680 | -webkit-transform-origin: right bottom; 2681 | transform-origin: right bottom; 2682 | opacity: 1; 2683 | } 2684 | 2685 | to { 2686 | -webkit-transform-origin: right bottom; 2687 | transform-origin: right bottom; 2688 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2689 | transform: rotate3d(0, 0, 1, 90deg); 2690 | opacity: 0; 2691 | } 2692 | } 2693 | 2694 | @keyframes rotateOutUpRight { 2695 | from { 2696 | -webkit-transform-origin: right bottom; 2697 | transform-origin: right bottom; 2698 | opacity: 1; 2699 | } 2700 | 2701 | to { 2702 | -webkit-transform-origin: right bottom; 2703 | transform-origin: right bottom; 2704 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2705 | transform: rotate3d(0, 0, 1, 90deg); 2706 | opacity: 0; 2707 | } 2708 | } 2709 | 2710 | .rotateOutUpRight { 2711 | -webkit-animation-name: rotateOutUpRight; 2712 | animation-name: rotateOutUpRight; 2713 | } 2714 | 2715 | @-webkit-keyframes hinge { 2716 | 0% { 2717 | -webkit-transform-origin: top left; 2718 | transform-origin: top left; 2719 | -webkit-animation-timing-function: ease-in-out; 2720 | animation-timing-function: ease-in-out; 2721 | } 2722 | 2723 | 20%, 2724 | 60% { 2725 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2726 | transform: rotate3d(0, 0, 1, 80deg); 2727 | -webkit-transform-origin: top left; 2728 | transform-origin: top left; 2729 | -webkit-animation-timing-function: ease-in-out; 2730 | animation-timing-function: ease-in-out; 2731 | } 2732 | 2733 | 40%, 2734 | 80% { 2735 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2736 | transform: rotate3d(0, 0, 1, 60deg); 2737 | -webkit-transform-origin: top left; 2738 | transform-origin: top left; 2739 | -webkit-animation-timing-function: ease-in-out; 2740 | animation-timing-function: ease-in-out; 2741 | opacity: 1; 2742 | } 2743 | 2744 | to { 2745 | -webkit-transform: translate3d(0, 700px, 0); 2746 | transform: translate3d(0, 700px, 0); 2747 | opacity: 0; 2748 | } 2749 | } 2750 | 2751 | @keyframes hinge { 2752 | 0% { 2753 | -webkit-transform-origin: top left; 2754 | transform-origin: top left; 2755 | -webkit-animation-timing-function: ease-in-out; 2756 | animation-timing-function: ease-in-out; 2757 | } 2758 | 2759 | 20%, 2760 | 60% { 2761 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2762 | transform: rotate3d(0, 0, 1, 80deg); 2763 | -webkit-transform-origin: top left; 2764 | transform-origin: top left; 2765 | -webkit-animation-timing-function: ease-in-out; 2766 | animation-timing-function: ease-in-out; 2767 | } 2768 | 2769 | 40%, 2770 | 80% { 2771 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2772 | transform: rotate3d(0, 0, 1, 60deg); 2773 | -webkit-transform-origin: top left; 2774 | transform-origin: top left; 2775 | -webkit-animation-timing-function: ease-in-out; 2776 | animation-timing-function: ease-in-out; 2777 | opacity: 1; 2778 | } 2779 | 2780 | to { 2781 | -webkit-transform: translate3d(0, 700px, 0); 2782 | transform: translate3d(0, 700px, 0); 2783 | opacity: 0; 2784 | } 2785 | } 2786 | 2787 | .hinge { 2788 | -webkit-animation-duration: 2s; 2789 | animation-duration: 2s; 2790 | -webkit-animation-name: hinge; 2791 | animation-name: hinge; 2792 | } 2793 | 2794 | @-webkit-keyframes jackInTheBox { 2795 | from { 2796 | opacity: 0; 2797 | -webkit-transform: scale(0.1) rotate(30deg); 2798 | transform: scale(0.1) rotate(30deg); 2799 | -webkit-transform-origin: center bottom; 2800 | transform-origin: center bottom; 2801 | } 2802 | 2803 | 50% { 2804 | -webkit-transform: rotate(-10deg); 2805 | transform: rotate(-10deg); 2806 | } 2807 | 2808 | 70% { 2809 | -webkit-transform: rotate(3deg); 2810 | transform: rotate(3deg); 2811 | } 2812 | 2813 | to { 2814 | opacity: 1; 2815 | -webkit-transform: scale(1); 2816 | transform: scale(1); 2817 | } 2818 | } 2819 | 2820 | @keyframes jackInTheBox { 2821 | from { 2822 | opacity: 0; 2823 | -webkit-transform: scale(0.1) rotate(30deg); 2824 | transform: scale(0.1) rotate(30deg); 2825 | -webkit-transform-origin: center bottom; 2826 | transform-origin: center bottom; 2827 | } 2828 | 2829 | 50% { 2830 | -webkit-transform: rotate(-10deg); 2831 | transform: rotate(-10deg); 2832 | } 2833 | 2834 | 70% { 2835 | -webkit-transform: rotate(3deg); 2836 | transform: rotate(3deg); 2837 | } 2838 | 2839 | to { 2840 | opacity: 1; 2841 | -webkit-transform: scale(1); 2842 | transform: scale(1); 2843 | } 2844 | } 2845 | 2846 | .jackInTheBox { 2847 | -webkit-animation-name: jackInTheBox; 2848 | animation-name: jackInTheBox; 2849 | } 2850 | 2851 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2852 | 2853 | @-webkit-keyframes rollIn { 2854 | from { 2855 | opacity: 0; 2856 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2857 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2858 | } 2859 | 2860 | to { 2861 | opacity: 1; 2862 | -webkit-transform: translate3d(0, 0, 0); 2863 | transform: translate3d(0, 0, 0); 2864 | } 2865 | } 2866 | 2867 | @keyframes rollIn { 2868 | from { 2869 | opacity: 0; 2870 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2871 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2872 | } 2873 | 2874 | to { 2875 | opacity: 1; 2876 | -webkit-transform: translate3d(0, 0, 0); 2877 | transform: translate3d(0, 0, 0); 2878 | } 2879 | } 2880 | 2881 | .rollIn { 2882 | -webkit-animation-name: rollIn; 2883 | animation-name: rollIn; 2884 | } 2885 | 2886 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2887 | 2888 | @-webkit-keyframes rollOut { 2889 | from { 2890 | opacity: 1; 2891 | } 2892 | 2893 | to { 2894 | opacity: 0; 2895 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2896 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2897 | } 2898 | } 2899 | 2900 | @keyframes rollOut { 2901 | from { 2902 | opacity: 1; 2903 | } 2904 | 2905 | to { 2906 | opacity: 0; 2907 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2908 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2909 | } 2910 | } 2911 | 2912 | .rollOut { 2913 | -webkit-animation-name: rollOut; 2914 | animation-name: rollOut; 2915 | } 2916 | 2917 | @-webkit-keyframes zoomIn { 2918 | from { 2919 | opacity: 0; 2920 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 2921 | transform: scale3d(0.3, 0.3, 0.3); 2922 | } 2923 | 2924 | 50% { 2925 | opacity: 1; 2926 | } 2927 | } 2928 | 2929 | @keyframes zoomIn { 2930 | from { 2931 | opacity: 0; 2932 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 2933 | transform: scale3d(0.3, 0.3, 0.3); 2934 | } 2935 | 2936 | 50% { 2937 | opacity: 1; 2938 | } 2939 | } 2940 | 2941 | .zoomIn { 2942 | -webkit-animation-name: zoomIn; 2943 | animation-name: zoomIn; 2944 | } 2945 | 2946 | @-webkit-keyframes zoomInDown { 2947 | from { 2948 | opacity: 0; 2949 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 2950 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 2951 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 2952 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 2953 | } 2954 | 2955 | 60% { 2956 | opacity: 1; 2957 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 2958 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 2959 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 2960 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 2961 | } 2962 | } 2963 | 2964 | @keyframes zoomInDown { 2965 | from { 2966 | opacity: 0; 2967 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 2968 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 2969 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 2970 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 2971 | } 2972 | 2973 | 60% { 2974 | opacity: 1; 2975 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 2976 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 2977 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 2978 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 2979 | } 2980 | } 2981 | 2982 | .zoomInDown { 2983 | -webkit-animation-name: zoomInDown; 2984 | animation-name: zoomInDown; 2985 | } 2986 | 2987 | @-webkit-keyframes zoomInLeft { 2988 | from { 2989 | opacity: 0; 2990 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 2991 | transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 2992 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 2993 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 2994 | } 2995 | 2996 | 60% { 2997 | opacity: 1; 2998 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 2999 | transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 3000 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3001 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3002 | } 3003 | } 3004 | 3005 | @keyframes zoomInLeft { 3006 | from { 3007 | opacity: 0; 3008 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 3009 | transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 3010 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3011 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3012 | } 3013 | 3014 | 60% { 3015 | opacity: 1; 3016 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 3017 | transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 3018 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3019 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3020 | } 3021 | } 3022 | 3023 | .zoomInLeft { 3024 | -webkit-animation-name: zoomInLeft; 3025 | animation-name: zoomInLeft; 3026 | } 3027 | 3028 | @-webkit-keyframes zoomInRight { 3029 | from { 3030 | opacity: 0; 3031 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 3032 | transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 3033 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3034 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3035 | } 3036 | 3037 | 60% { 3038 | opacity: 1; 3039 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 3040 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 3041 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3042 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3043 | } 3044 | } 3045 | 3046 | @keyframes zoomInRight { 3047 | from { 3048 | opacity: 0; 3049 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 3050 | transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 3051 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3052 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3053 | } 3054 | 3055 | 60% { 3056 | opacity: 1; 3057 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 3058 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 3059 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3060 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3061 | } 3062 | } 3063 | 3064 | .zoomInRight { 3065 | -webkit-animation-name: zoomInRight; 3066 | animation-name: zoomInRight; 3067 | } 3068 | 3069 | @-webkit-keyframes zoomInUp { 3070 | from { 3071 | opacity: 0; 3072 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 3073 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 3074 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3075 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3076 | } 3077 | 3078 | 60% { 3079 | opacity: 1; 3080 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 3081 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 3082 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3083 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3084 | } 3085 | } 3086 | 3087 | @keyframes zoomInUp { 3088 | from { 3089 | opacity: 0; 3090 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 3091 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 3092 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3093 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3094 | } 3095 | 3096 | 60% { 3097 | opacity: 1; 3098 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 3099 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 3100 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3101 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3102 | } 3103 | } 3104 | 3105 | .zoomInUp { 3106 | -webkit-animation-name: zoomInUp; 3107 | animation-name: zoomInUp; 3108 | } 3109 | 3110 | @-webkit-keyframes zoomOut { 3111 | from { 3112 | opacity: 1; 3113 | } 3114 | 3115 | 50% { 3116 | opacity: 0; 3117 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 3118 | transform: scale3d(0.3, 0.3, 0.3); 3119 | } 3120 | 3121 | to { 3122 | opacity: 0; 3123 | } 3124 | } 3125 | 3126 | @keyframes zoomOut { 3127 | from { 3128 | opacity: 1; 3129 | } 3130 | 3131 | 50% { 3132 | opacity: 0; 3133 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 3134 | transform: scale3d(0.3, 0.3, 0.3); 3135 | } 3136 | 3137 | to { 3138 | opacity: 0; 3139 | } 3140 | } 3141 | 3142 | .zoomOut { 3143 | -webkit-animation-name: zoomOut; 3144 | animation-name: zoomOut; 3145 | } 3146 | 3147 | @-webkit-keyframes zoomOutDown { 3148 | 40% { 3149 | opacity: 1; 3150 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 3151 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 3152 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3153 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3154 | } 3155 | 3156 | to { 3157 | opacity: 0; 3158 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 3159 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 3160 | -webkit-transform-origin: center bottom; 3161 | transform-origin: center bottom; 3162 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3163 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3164 | } 3165 | } 3166 | 3167 | @keyframes zoomOutDown { 3168 | 40% { 3169 | opacity: 1; 3170 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 3171 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 3172 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3173 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3174 | } 3175 | 3176 | to { 3177 | opacity: 0; 3178 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 3179 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 3180 | -webkit-transform-origin: center bottom; 3181 | transform-origin: center bottom; 3182 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3183 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3184 | } 3185 | } 3186 | 3187 | .zoomOutDown { 3188 | -webkit-animation-name: zoomOutDown; 3189 | animation-name: zoomOutDown; 3190 | } 3191 | 3192 | @-webkit-keyframes zoomOutLeft { 3193 | 40% { 3194 | opacity: 1; 3195 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 3196 | transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 3197 | } 3198 | 3199 | to { 3200 | opacity: 0; 3201 | -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); 3202 | transform: scale(0.1) translate3d(-2000px, 0, 0); 3203 | -webkit-transform-origin: left center; 3204 | transform-origin: left center; 3205 | } 3206 | } 3207 | 3208 | @keyframes zoomOutLeft { 3209 | 40% { 3210 | opacity: 1; 3211 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 3212 | transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 3213 | } 3214 | 3215 | to { 3216 | opacity: 0; 3217 | -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); 3218 | transform: scale(0.1) translate3d(-2000px, 0, 0); 3219 | -webkit-transform-origin: left center; 3220 | transform-origin: left center; 3221 | } 3222 | } 3223 | 3224 | .zoomOutLeft { 3225 | -webkit-animation-name: zoomOutLeft; 3226 | animation-name: zoomOutLeft; 3227 | } 3228 | 3229 | @-webkit-keyframes zoomOutRight { 3230 | 40% { 3231 | opacity: 1; 3232 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 3233 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 3234 | } 3235 | 3236 | to { 3237 | opacity: 0; 3238 | -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); 3239 | transform: scale(0.1) translate3d(2000px, 0, 0); 3240 | -webkit-transform-origin: right center; 3241 | transform-origin: right center; 3242 | } 3243 | } 3244 | 3245 | @keyframes zoomOutRight { 3246 | 40% { 3247 | opacity: 1; 3248 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 3249 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 3250 | } 3251 | 3252 | to { 3253 | opacity: 0; 3254 | -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); 3255 | transform: scale(0.1) translate3d(2000px, 0, 0); 3256 | -webkit-transform-origin: right center; 3257 | transform-origin: right center; 3258 | } 3259 | } 3260 | 3261 | .zoomOutRight { 3262 | -webkit-animation-name: zoomOutRight; 3263 | animation-name: zoomOutRight; 3264 | } 3265 | 3266 | @-webkit-keyframes zoomOutUp { 3267 | 40% { 3268 | opacity: 1; 3269 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 3270 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 3271 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3272 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3273 | } 3274 | 3275 | to { 3276 | opacity: 0; 3277 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 3278 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 3279 | -webkit-transform-origin: center bottom; 3280 | transform-origin: center bottom; 3281 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3282 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3283 | } 3284 | } 3285 | 3286 | @keyframes zoomOutUp { 3287 | 40% { 3288 | opacity: 1; 3289 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 3290 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 3291 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3292 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 3293 | } 3294 | 3295 | to { 3296 | opacity: 0; 3297 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 3298 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 3299 | -webkit-transform-origin: center bottom; 3300 | transform-origin: center bottom; 3301 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3302 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 3303 | } 3304 | } 3305 | 3306 | .zoomOutUp { 3307 | -webkit-animation-name: zoomOutUp; 3308 | animation-name: zoomOutUp; 3309 | } 3310 | 3311 | @-webkit-keyframes slideInDown { 3312 | from { 3313 | -webkit-transform: translate3d(0, -100%, 0); 3314 | transform: translate3d(0, -100%, 0); 3315 | visibility: visible; 3316 | } 3317 | 3318 | to { 3319 | -webkit-transform: translate3d(0, 0, 0); 3320 | transform: translate3d(0, 0, 0); 3321 | } 3322 | } 3323 | 3324 | @keyframes slideInDown { 3325 | from { 3326 | -webkit-transform: translate3d(0, -100%, 0); 3327 | transform: translate3d(0, -100%, 0); 3328 | visibility: visible; 3329 | } 3330 | 3331 | to { 3332 | -webkit-transform: translate3d(0, 0, 0); 3333 | transform: translate3d(0, 0, 0); 3334 | } 3335 | } 3336 | 3337 | .slideInDown { 3338 | -webkit-animation-name: slideInDown; 3339 | animation-name: slideInDown; 3340 | } 3341 | 3342 | @-webkit-keyframes slideInLeft { 3343 | from { 3344 | -webkit-transform: translate3d(-100%, 0, 0); 3345 | transform: translate3d(-100%, 0, 0); 3346 | visibility: visible; 3347 | } 3348 | 3349 | to { 3350 | -webkit-transform: translate3d(0, 0, 0); 3351 | transform: translate3d(0, 0, 0); 3352 | } 3353 | } 3354 | 3355 | @keyframes slideInLeft { 3356 | from { 3357 | -webkit-transform: translate3d(-100%, 0, 0); 3358 | transform: translate3d(-100%, 0, 0); 3359 | visibility: visible; 3360 | } 3361 | 3362 | to { 3363 | -webkit-transform: translate3d(0, 0, 0); 3364 | transform: translate3d(0, 0, 0); 3365 | } 3366 | } 3367 | 3368 | .slideInLeft { 3369 | -webkit-animation-name: slideInLeft; 3370 | animation-name: slideInLeft; 3371 | } 3372 | 3373 | @-webkit-keyframes slideInRight { 3374 | from { 3375 | -webkit-transform: translate3d(100%, 0, 0); 3376 | transform: translate3d(100%, 0, 0); 3377 | visibility: visible; 3378 | } 3379 | 3380 | to { 3381 | -webkit-transform: translate3d(0, 0, 0); 3382 | transform: translate3d(0, 0, 0); 3383 | } 3384 | } 3385 | 3386 | @keyframes slideInRight { 3387 | from { 3388 | -webkit-transform: translate3d(100%, 0, 0); 3389 | transform: translate3d(100%, 0, 0); 3390 | visibility: visible; 3391 | } 3392 | 3393 | to { 3394 | -webkit-transform: translate3d(0, 0, 0); 3395 | transform: translate3d(0, 0, 0); 3396 | } 3397 | } 3398 | 3399 | .slideInRight { 3400 | -webkit-animation-name: slideInRight; 3401 | animation-name: slideInRight; 3402 | } 3403 | 3404 | @-webkit-keyframes slideInUp { 3405 | from { 3406 | -webkit-transform: translate3d(0, 100%, 0); 3407 | transform: translate3d(0, 100%, 0); 3408 | visibility: visible; 3409 | } 3410 | 3411 | to { 3412 | -webkit-transform: translate3d(0, 0, 0); 3413 | transform: translate3d(0, 0, 0); 3414 | } 3415 | } 3416 | 3417 | @keyframes slideInUp { 3418 | from { 3419 | -webkit-transform: translate3d(0, 100%, 0); 3420 | transform: translate3d(0, 100%, 0); 3421 | visibility: visible; 3422 | } 3423 | 3424 | to { 3425 | -webkit-transform: translate3d(0, 0, 0); 3426 | transform: translate3d(0, 0, 0); 3427 | } 3428 | } 3429 | 3430 | .slideInUp { 3431 | -webkit-animation-name: slideInUp; 3432 | animation-name: slideInUp; 3433 | } 3434 | 3435 | @-webkit-keyframes slideOutDown { 3436 | from { 3437 | -webkit-transform: translate3d(0, 0, 0); 3438 | transform: translate3d(0, 0, 0); 3439 | } 3440 | 3441 | to { 3442 | visibility: hidden; 3443 | -webkit-transform: translate3d(0, 100%, 0); 3444 | transform: translate3d(0, 100%, 0); 3445 | } 3446 | } 3447 | 3448 | @keyframes slideOutDown { 3449 | from { 3450 | -webkit-transform: translate3d(0, 0, 0); 3451 | transform: translate3d(0, 0, 0); 3452 | } 3453 | 3454 | to { 3455 | visibility: hidden; 3456 | -webkit-transform: translate3d(0, 100%, 0); 3457 | transform: translate3d(0, 100%, 0); 3458 | } 3459 | } 3460 | 3461 | .slideOutDown { 3462 | -webkit-animation-name: slideOutDown; 3463 | animation-name: slideOutDown; 3464 | } 3465 | 3466 | @-webkit-keyframes slideOutLeft { 3467 | from { 3468 | -webkit-transform: translate3d(0, 0, 0); 3469 | transform: translate3d(0, 0, 0); 3470 | } 3471 | 3472 | to { 3473 | visibility: hidden; 3474 | -webkit-transform: translate3d(-100%, 0, 0); 3475 | transform: translate3d(-100%, 0, 0); 3476 | } 3477 | } 3478 | 3479 | @keyframes slideOutLeft { 3480 | from { 3481 | -webkit-transform: translate3d(0, 0, 0); 3482 | transform: translate3d(0, 0, 0); 3483 | } 3484 | 3485 | to { 3486 | visibility: hidden; 3487 | -webkit-transform: translate3d(-100%, 0, 0); 3488 | transform: translate3d(-100%, 0, 0); 3489 | } 3490 | } 3491 | 3492 | .slideOutLeft { 3493 | -webkit-animation-name: slideOutLeft; 3494 | animation-name: slideOutLeft; 3495 | } 3496 | 3497 | @-webkit-keyframes slideOutRight { 3498 | from { 3499 | -webkit-transform: translate3d(0, 0, 0); 3500 | transform: translate3d(0, 0, 0); 3501 | } 3502 | 3503 | to { 3504 | visibility: hidden; 3505 | -webkit-transform: translate3d(100%, 0, 0); 3506 | transform: translate3d(100%, 0, 0); 3507 | } 3508 | } 3509 | 3510 | @keyframes slideOutRight { 3511 | from { 3512 | -webkit-transform: translate3d(0, 0, 0); 3513 | transform: translate3d(0, 0, 0); 3514 | } 3515 | 3516 | to { 3517 | visibility: hidden; 3518 | -webkit-transform: translate3d(100%, 0, 0); 3519 | transform: translate3d(100%, 0, 0); 3520 | } 3521 | } 3522 | 3523 | .slideOutRight { 3524 | -webkit-animation-name: slideOutRight; 3525 | animation-name: slideOutRight; 3526 | } 3527 | 3528 | @-webkit-keyframes slideOutUp { 3529 | from { 3530 | -webkit-transform: translate3d(0, 0, 0); 3531 | transform: translate3d(0, 0, 0); 3532 | } 3533 | 3534 | to { 3535 | visibility: hidden; 3536 | -webkit-transform: translate3d(0, -100%, 0); 3537 | transform: translate3d(0, -100%, 0); 3538 | } 3539 | } 3540 | 3541 | @keyframes slideOutUp { 3542 | from { 3543 | -webkit-transform: translate3d(0, 0, 0); 3544 | transform: translate3d(0, 0, 0); 3545 | } 3546 | 3547 | to { 3548 | visibility: hidden; 3549 | -webkit-transform: translate3d(0, -100%, 0); 3550 | transform: translate3d(0, -100%, 0); 3551 | } 3552 | } 3553 | 3554 | .slideOutUp { 3555 | -webkit-animation-name: slideOutUp; 3556 | animation-name: slideOutUp; 3557 | } 3558 | 3559 | .animated { 3560 | -webkit-animation-duration: 1s; 3561 | animation-duration: 1s; 3562 | -webkit-animation-fill-mode: both; 3563 | animation-fill-mode: both; 3564 | } 3565 | 3566 | .animated.infinite { 3567 | -webkit-animation-iteration-count: infinite; 3568 | animation-iteration-count: infinite; 3569 | } 3570 | 3571 | .animated.delay-1s { 3572 | -webkit-animation-delay: 1s; 3573 | animation-delay: 1s; 3574 | } 3575 | 3576 | .animated.delay-2s { 3577 | -webkit-animation-delay: 2s; 3578 | animation-delay: 2s; 3579 | } 3580 | 3581 | .animated.delay-3s { 3582 | -webkit-animation-delay: 3s; 3583 | animation-delay: 3s; 3584 | } 3585 | 3586 | .animated.delay-4s { 3587 | -webkit-animation-delay: 4s; 3588 | animation-delay: 4s; 3589 | } 3590 | 3591 | .animated.delay-5s { 3592 | -webkit-animation-delay: 5s; 3593 | animation-delay: 5s; 3594 | } 3595 | 3596 | .animated.fast { 3597 | -webkit-animation-duration: 800ms; 3598 | animation-duration: 800ms; 3599 | } 3600 | 3601 | .animated.faster { 3602 | -webkit-animation-duration: 500ms; 3603 | animation-duration: 500ms; 3604 | } 3605 | 3606 | .animated.slow { 3607 | -webkit-animation-duration: 2s; 3608 | animation-duration: 2s; 3609 | } 3610 | 3611 | .animated.slower { 3612 | -webkit-animation-duration: 3s; 3613 | animation-duration: 3s; 3614 | } 3615 | 3616 | @media (print), (prefers-reduced-motion) { 3617 | .animated { 3618 | -webkit-animation: unset !important; 3619 | animation: unset !important; 3620 | -webkit-transition: none !important; 3621 | transition: none !important; 3622 | } 3623 | } 3624 | --------------------------------------------------------------------------------