UNPKG

vue-ant-patterns

Version:

vue-ant-patterns

1,942 lines (1,941 loc) 101 kB
@charset "UTF-8"; /* 命名规则, 三部分 className .flex-侧轴 .flex-主轴 .flex-侧轴-主轴 */ /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable no-duplicate-selectors */ /* stylelint-disable */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ /* dropdown-menu 部分样式覆盖 */ .depot-header-dropdown .ant-dropdown { min-width: 200px; } .depot-header-dropdown .ant-dropdown-menu { min-width: 200px; } .depot-header-dropdown .ant-dropdown-menu-dark { min-width: 200px; background: rgba(75, 88, 116, 0.95); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-divider { background-color: #444f6b; } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu { background: rgba(75, 88, 116, 0.95); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu .ant-dropdown-menu-submenu-arrow, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow { color: rgba(255, 255, 255, 0.85); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow .anticon, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu .ant-dropdown-menu-submenu-arrow .anticon, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow .anticon { color: rgba(255, 255, 255, 0.85); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item:hover, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu:hover, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title:hover, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-selected, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title-selected { background: #0275fd; color: rgba(255, 255, 255, 0.85); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item:hover .ant-dropdown-menu-submenu-title, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu:hover .ant-dropdown-menu-submenu-title, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title:hover .ant-dropdown-menu-submenu-title, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected .ant-dropdown-menu-submenu-title, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-selected .ant-dropdown-menu-submenu-title, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title-selected .ant-dropdown-menu-submenu-title { background: #0275fd; } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item:hover .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu:hover .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title:hover .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-selected .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title-selected .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow { color: rgba(255, 255, 255, 0.85); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item:hover .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow .anticon, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu:hover .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow .anticon, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title:hover .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow .anticon, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow .anticon, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-selected .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow .anticon, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title-selected .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow .anticon { color: rgba(255, 255, 255, 0.85); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-disabled, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title { background: none; color: rgba(0, 0, 0, 0.25); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-arrow, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-disabled .ant-dropdown-menu-submenu-arrow, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow { background: none; color: rgba(0, 0, 0, 0.25); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-arrow .anticon, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-disabled .ant-dropdown-menu-submenu-arrow .anticon, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow .anticon { background: none; color: rgba(0, 0, 0, 0.25); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled:hover, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-disabled:hover, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title:hover { background: none; color: rgba(0, 0, 0, 0.25); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled:hover .ant-dropdown-menu-submenu-arrow, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-disabled:hover .ant-dropdown-menu-submenu-arrow, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title:hover .ant-dropdown-menu-submenu-arrow { background: none; color: rgba(0, 0, 0, 0.25); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled:hover .ant-dropdown-menu-submenu-arrow .anticon, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-disabled:hover .ant-dropdown-menu-submenu-arrow .anticon, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title:hover .ant-dropdown-menu-submenu-arrow .anticon { background: none; color: rgba(0, 0, 0, 0.25); } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-selected { color: rgba(255, 255, 255, 0.85); background-color: #0275fd; } .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected > a, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-selected > a, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected > a:hover, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-selected > a:hover, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected .ant-dropdown-menu-submenu-title, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-selected .ant-dropdown-menu-submenu-title, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected .ant-dropdown-menu-submenu-title:hover, .depot-header-dropdown .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-selected .ant-dropdown-menu-submenu-title:hover { background-color: #0275fd; color: rgba(255, 255, 255, 0.85); } .depot-header-dropdown .ant-dropdown-menu-submenu-selected { color: #4b5874; background-color: #a8adb3; } .depot-header-dropdown .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-popup.ant-dropdown-menu-dark { background: none; } .depot-header-dropdown.avatar-dropdown .ant-dropdown { min-width: 150px; } .depot-header-dropdown.avatar-dropdown .ant-dropdown-menu { min-width: 150px; } .ant-input-affix-wrapper .ant-input-suffix { right: 6px; } .ant-input-affix-wrapper .ant-input-suffix .anticon-close-circle { -webkit-transition: all 0.3s; transition: all 0.3s; color: rgba(0, 0, 0, 0.25); cursor: pointer; } .ant-input-affix-wrapper .ant-input-suffix .anticon-close-circle:hover { color: rgba(0, 0, 0, 0.45); } .reset-ant-collapse .ant-collapse-item .ant-collapse-header, .ant-collapse .ant-collapse-item .ant-collapse-header { padding-left: 32px; padding-right: 12px; } .reset-ant-collapse .ant-collapse .ant-collapse-item .ant-collapse-header .arrow, .ant-collapse .ant-collapse .ant-collapse-item .ant-collapse-header .arrow { left: 8px; } .reset-ant-collapse .ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box, .ant-collapse .ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box { padding-left: 32px; } .reset-ant-collapse .ant-collapse-borderless .ant-collapse-item-active:last-child, .ant-collapse .ant-collapse-borderless .ant-collapse-item-active:last-child { border: none; } /* table 部分样式覆盖 */ .ant-table.ant-table-small { line-height: 1.4; } .ant-table.ant-table-middle { line-height: 1.7; } .ant-table-small { border: 0; } .ant-table-small.ant-table-bordered { border: 1px solid #e8e8e8; border-radius: 0; } .ant-table-small.ant-table-bordered .ant-table-content { border-right: 0; } .ant-table-small .ant-table-content > .ant-table-body { margin: 0 0; } .ant-table-small .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-small .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th, .ant-table-small .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-small .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th, .ant-table-small .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-small .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-small .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, .ant-table-small .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th { background-color: #fafafa; } .ant-form-item { margin-bottom: 18px; } .ant-form-item.ant-form-item-with-help { margin-bottom: 0px; } .ant-form-explain { margin-bottom: -2px; } .ant-form-vertical .ant-form-explain { margin-bottom: -6px; } .ant-form-vertical .ant-form-item-label { padding-bottom: 4px; } .ant-card-head { line-height: 1; font-size: 14px; } /* 命名规则, 三部分 className .flex-侧轴 .flex-主轴 .flex-侧轴-主轴 */ .flex-start-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .flex-start-center { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flex-start-end { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .flex-start-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .flex-center-start { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .flex-center-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flex-center-end { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .flex-center-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-end-start { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .flex-end-center { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flex-end-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .flex-end-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .flex-align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .flex-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .flex-justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .flex-justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flex-justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .flex-justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex-justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex-grow { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: 0px; flex-basis: 0px; } .fw700 { font-weight: 700; } .fw100 { font-weight: 100; } .fw400 { font-weight: 400; } .f12 { font-size: 12px; } .f14 { font-size: 14px; } .f16 { font-size: 16px; } .f18 { font-size: 18px; } .f22 { font-size: 22px; } .f24 { font-size: 24px; } .f26 { font-size: 26px; } .f32 { font-size: 32px; } .vertical-text { -webkit-writing-mode: tb-rl; -ms-writing-mode: tb-rl; writing-mode: tb-rl; letter-spacing: 2px; } .text-color-org { color: #f0ad29; } .text-color-red { color: #ed5a50; } .text-color-green { color: #66bb3d; } .text-color-blue { color: #336caf; } .text-color-blue-light { color: #0275fd; } .text-color-white { color: rgba(255, 255, 255, 0.85); } .margin-xs { margin: 8px; } .margin-top-xs { margin-top: 8px; } .padding-top-xs { padding-top: 8px; } .margin-right-xs { margin-right: 8px; } .padding-right-xs { padding-right: 8px; } .margin-bottom-xs { margin-bottom: 8px; } .padding-bottom-xs { padding-bottom: 8px; } .margin-left-xs { margin-left: 8px; } .padding-left-xs { padding-left: 8px; } .margin-sm { margin: 12px; } .margin-top-sm { margin-top: 12px; } .padding-top-sm { padding-top: 12px; } .margin-right-sm { margin-right: 12px; } .padding-right-sm { padding-right: 12px; } .margin-bottom-sm { margin-bottom: 12px; } .padding-bottom-sm { padding-bottom: 12px; } .margin-left-sm { margin-left: 12px; } .padding-left-sm { padding-left: 12px; } .margin-md { margin: 16px; } .margin-top-md { margin-top: 16px; } .padding-top-md { padding-top: 16px; } .margin-right-md { margin-right: 16px; } .padding-right-md { padding-right: 16px; } .margin-bottom-md { margin-bottom: 16px; } .padding-bottom-md { padding-bottom: 16px; } .margin-left-md { margin-left: 16px; } .padding-left-md { padding-left: 16px; } .margin-lg { margin: 24px; } .margin-top-lg { margin-top: 24px; } .padding-top-lg { padding-top: 24px; } .margin-right-lg { margin-right: 24px; } .padding-right-lg { padding-right: 24px; } .margin-bottom-lg { margin-bottom: 24px; } .padding-bottom-lg { padding-bottom: 24px; } .margin-left-lg { margin-left: 24px; } .padding-left-lg { padding-left: 24px; } .tag { padding: 0 5px; border-radius: 3px; background: rgba(168, 173, 179, 0.3); white-space: nowrap; display: inline-block; font-size: 14px; } .tag-info { background: #336caf; color: rgba(255, 255, 255, 0.85); } .tag-warning { background: #f0ad29; color: rgba(255, 255, 255, 0.85); } .tag-error { background: #ed5a50; color: rgba(255, 255, 255, 0.85); } .tag-success { background: #66bb3d; color: rgba(255, 255, 255, 0.85); } .d-avatar img { border-radius: 50%; } .d-avatar.w40 img { width: 40px; height: 40px; } .d-avatar.w80 img { width: 80px; height: 80px; } .d-avatar.w112 img { width: 112px; height: 112px; } .d-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin: 0; list-style-type: none; } .d-list li { list-style-type: none; } .d-list-col-2 { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .d-list-col-2 .item { width: 49%; } .d-list-readonly .ant-form-item { margin-bottom: 0; } .d-list .ant-form-item-control, .d-list .ant-form-item-label { line-height: 31.9999px; } .d-list-form { padding-top: 12px; } .d-list-form .ant-form-item-label { width: 20%; } .d-list-lg .ant-form-item-control, .d-list-lg .ant-form-item-label { line-height: 39.9999px; } .d-list-sm .ant-form-item-control, .d-list-sm .ant-form-item-label { line-height: 23.9999px; } .d-list-edit .ant-form-item-control, .d-list-edit .ant-form-item-label { line-height: 39.9999px; } .d-list-readonly .d-list .ant-form-item { margin-bottom: 0; } .d-list-lg .d-list .ant-form-item-control, .d-list-lg .d-list .ant-form-item-label { line-height: 39.9999px; } .d-list-sm .d-list .ant-form-item-control, .d-list-sm .d-list .ant-form-item-label { line-height: 23.9999px; } .d-list-edit .d-list .ant-form-item-control, .d-list-edit .d-list .ant-form-item-label { line-height: 39.9999px; } /*! * animate.css -https://daneden.github.io/animate.css/ * Version - 3.7.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2019 Daniel Eden */ @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; 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-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 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% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1;