UNPKG

vue-antd-ui

Version:

An enterprise-class UI design language and Vue-based implementation

2,343 lines 551 kB
/*! * * antd v1.0.1 * * Copyright 2017-present, vue-antd-ui. * All rights reserved. * */ /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable no-duplicate-selectors */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ /* stylelint-disable at-rule-no-unknown */ @font-face { font-family: "Monospaced Number"; src: local("Tahoma"); unicode-range: U+30-39; } @font-face { font-family: "Chinese Quote"; src: local("PingFang SC"), local("SimSun"); unicode-range: U+2018, U+2019, U+201c, U+201d; } html, body { width: 100%; height: 100%; } input::-ms-clear, input::-ms-reveal { display: none; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @-ms-viewport { width: device-width; } article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } body { margin: 0; font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; color: rgba(0, 0, 0, 0.65); background-color: #fff; } [tabindex="-1"]:focus { outline: none !important; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5em; color: rgba(0, 0, 0, 0.85); font-weight: 500; } p { margin-top: 0; margin-bottom: 1em; } abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; } address { margin-bottom: 1em; font-style: normal; line-height: inherit; } input[type="text"], input[type="password"], input[type="number"], textarea { -webkit-appearance: none; } ol, ul, dl { margin-top: 0; margin-bottom: 1em; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 500; } dd { margin-bottom: .5em; margin-left: 0; } blockquote { margin: 0 0 1em; } dfn { font-style: italic; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } a { color: #1890ff; background-color: transparent; text-decoration: none; outline: none; cursor: pointer; -webkit-transition: color .3s; transition: color .3s; -webkit-text-decoration-skip: objects; } a:focus { text-decoration: underline; -webkit-text-decoration-skip: ink; text-decoration-skip: ink; } a:hover { color: #40a9ff; } a:active { color: #096dd9; } a:active, a:hover { outline: 0; text-decoration: none; } a[disabled] { color: rgba(0, 0, 0, 0.25); cursor: not-allowed; pointer-events: none; } pre, code, kbd, samp { font-family: Consolas, Menlo, Courier, monospace; font-size: 1em; } pre { margin-top: 0; margin-bottom: 1em; overflow: auto; } figure { margin: 0 0 1em; } img { vertical-align: middle; border-style: none; } svg:not(:root) { overflow: hidden; } a, area, button, [role="button"], input:not([type=range]), label, select, summary, textarea { -ms-touch-action: manipulation; touch-action: manipulation; } table { border-collapse: collapse; } caption { padding-top: .75em; padding-bottom: .3em; color: rgba(0, 0, 0, 0.45); text-align: left; caption-side: bottom; } th { text-align: inherit; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } input[type="radio"], input[type="checkbox"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5em; font-size: 1.5em; line-height: inherit; color: inherit; white-space: normal; } progress { vertical-align: baseline; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { outline-offset: -2px; -webkit-appearance: none; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; } template { display: none; } [hidden] { display: none !important; } mark { padding: .2em; background-color: #feffe6; } ::-moz-selection { background: #1890ff; color: #fff; } ::selection { background: #1890ff; color: #fff; } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; visibility: hidden; font-size: 0; height: 0; } @font-face { font-family: 'anticon'; src: url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.eot'); /* IE9*/ src: url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.woff') format('woff'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.ttf') format('truetype'), /* iOS 4.1- */ url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.svg#iconfont') format('svg'); } .anticon { display: inline-block; font-style: normal; vertical-align: baseline; text-align: center; text-transform: none; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .anticon:before { display: block; font-family: "anticon" !important; } .anticon-step-forward:before { content: "\E600"; } .anticon-step-backward:before { content: "\E601"; } .anticon-forward:before { content: "\E602"; } .anticon-backward:before { content: "\E603"; } .anticon-caret-right:before { content: "\E604"; } .anticon-caret-left:before { content: "\E605"; } .anticon-caret-down:before { content: "\E606"; } .anticon-caret-up:before { content: "\E607"; } .anticon-right-circle:before { content: "\E608"; } .anticon-circle-right:before { content: "\E608"; } .anticon-caret-circle-right:before { content: "\E608"; } .anticon-left-circle:before { content: "\E609"; } .anticon-circle-left:before { content: "\E609"; } .anticon-caret-circle-left:before { content: "\E609"; } .anticon-up-circle:before { content: "\E60A"; } .anticon-circle-up:before { content: "\E60A"; } .anticon-caret-circle-up:before { content: "\E60A"; } .anticon-down-circle:before { content: "\E60B"; } .anticon-circle-down:before { content: "\E60B"; } .anticon-caret-circle-down:before { content: "\E60B"; } .anticon-right-circle-o:before { content: "\E60C"; } .anticon-circle-o-right:before { content: "\E60C"; } .anticon-caret-circle-o-right:before { content: "\E60C"; } .anticon-left-circle-o:before { content: "\E60D"; } .anticon-circle-o-left:before { content: "\E60D"; } .anticon-caret-circle-o-left:before { content: "\E60D"; } .anticon-up-circle-o:before { content: "\E60E"; } .anticon-circle-o-up:before { content: "\E60E"; } .anticon-caret-circle-o-up:before { content: "\E60E"; } .anticon-down-circle-o:before { content: "\E60F"; } .anticon-circle-o-down:before { content: "\E60F"; } .anticon-caret-circle-o-down:before { content: "\E60F"; } .anticon-verticle-left:before { content: "\E610"; } .anticon-verticle-right:before { content: "\E611"; } .anticon-rollback:before { content: "\E612"; } .anticon-retweet:before { content: "\E613"; } .anticon-shrink:before { content: "\E614"; } .anticon-arrows-alt:before { content: "\E615"; } .anticon-arrow-salt:before { content: "\E615"; } .anticon-reload:before { content: "\E616"; } .anticon-double-right:before { content: "\E617"; } .anticon-double-left:before { content: "\E618"; } .anticon-arrow-down:before { content: "\E619"; } .anticon-arrow-up:before { content: "\E61A"; } .anticon-arrow-right:before { content: "\E61B"; } .anticon-arrow-left:before { content: "\E61C"; } .anticon-down:before { content: "\E61D"; } .anticon-up:before { content: "\E61E"; } .anticon-right:before { content: "\E61F"; } .anticon-left:before { content: "\E620"; } .anticon-minus-square-o:before { content: "\E621"; } .anticon-minus-circle:before { content: "\E622"; } .anticon-minus-circle-o:before { content: "\E623"; } .anticon-minus:before { content: "\E624"; } .anticon-plus-circle-o:before { content: "\E625"; } .anticon-plus-circle:before { content: "\E626"; } .anticon-plus:before { content: "\E627"; } .anticon-info-circle:before { content: "\E628"; } .anticon-info-circle-o:before { content: "\E629"; } .anticon-info:before { content: "\E62A"; } .anticon-exclamation:before { content: "\E62B"; } .anticon-exclamation-circle:before { content: "\E62C"; } .anticon-exclamation-circle-o:before { content: "\E62D"; } .anticon-close-circle:before { content: "\E62E"; } .anticon-cross-circle:before { content: "\E62E"; } .anticon-close-circle-o:before { content: "\E62F"; } .anticon-cross-circle-o:before { content: "\E62F"; } .anticon-check-circle:before { content: "\E630"; } .anticon-check-circle-o:before { content: "\E631"; } .anticon-check:before { content: "\E632"; } .anticon-close:before { content: "\E633"; } .anticon-cross:before { content: "\E633"; } .anticon-customer-service:before { content: "\E634"; } .anticon-customerservice:before { content: "\E634"; } .anticon-credit-card:before { content: "\E635"; } .anticon-code-o:before { content: "\E636"; } .anticon-book:before { content: "\E637"; } .anticon-bars:before { content: "\E639"; } .anticon-question:before { content: "\E63A"; } .anticon-question-circle:before { content: "\E63B"; } .anticon-question-circle-o:before { content: "\E63C"; } .anticon-pause:before { content: "\E63D"; } .anticon-pause-circle:before { content: "\E63E"; } .anticon-pause-circle-o:before { content: "\E63F"; } .anticon-clock-circle:before { content: "\E640"; } .anticon-clock-circle-o:before { content: "\E641"; } .anticon-swap:before { content: "\E642"; } .anticon-swap-left:before { content: "\E643"; } .anticon-swap-right:before { content: "\E644"; } .anticon-plus-square-o:before { content: "\E645"; } .anticon-frown:before { content: "\E646"; } .anticon-frown-circle:before { content: "\E646"; } .anticon-ellipsis:before { content: "\E647"; } .anticon-copy:before { content: "\E648"; } .anticon-menu-fold:before { content: "\E9AC"; } .anticon-mail:before { content: "\E659"; } .anticon-logout:before { content: "\E65A"; } .anticon-link:before { content: "\E65B"; } .anticon-area-chart:before { content: "\E65C"; } .anticon-line-chart:before { content: "\E65D"; } .anticon-home:before { content: "\E65E"; } .anticon-laptop:before { content: "\E65F"; } .anticon-star:before { content: "\E660"; } .anticon-star-o:before { content: "\E661"; } .anticon-folder:before { content: "\E662"; } .anticon-filter:before { content: "\E663"; } .anticon-file:before { content: "\E664"; } .anticon-exception:before { content: "\E665"; } .anticon-meh:before { content: "\E666"; } .anticon-meh-circle:before { content: "\E666"; } .anticon-meh-o:before { content: "\E667"; } .anticon-shopping-cart:before { content: "\E668"; } .anticon-save:before { content: "\E669"; } .anticon-user:before { content: "\E66A"; } .anticon-video-camera:before { content: "\E66B"; } .anticon-to-top:before { content: "\E66C"; } .anticon-team:before { content: "\E66D"; } .anticon-tablet:before { content: "\E66E"; } .anticon-solution:before { content: "\E66F"; } .anticon-search:before { content: "\E670"; } .anticon-share-alt:before { content: "\E671"; } .anticon-setting:before { content: "\E672"; } .anticon-poweroff:before { content: "\E6D5"; } .anticon-picture:before { content: "\E674"; } .anticon-phone:before { content: "\E675"; } .anticon-paper-clip:before { content: "\E676"; } .anticon-notification:before { content: "\E677"; } .anticon-mobile:before { content: "\E678"; } .anticon-menu-unfold:before { content: "\E9AD"; } .anticon-inbox:before { content: "\E67A"; } .anticon-lock:before { content: "\E67B"; } .anticon-qrcode:before { content: "\E67C"; } .anticon-play-circle:before { content: "\E6D0"; } .anticon-play-circle-o:before { content: "\E6D1"; } .anticon-tag:before { content: "\E6D2"; } .anticon-tag-o:before { content: "\E6D3"; } .anticon-tags:before { content: "\E67D"; } .anticon-tags-o:before { content: "\E67E"; } .anticon-cloud-o:before { content: "\E67F"; } .anticon-cloud:before { content: "\E680"; } .anticon-cloud-upload:before { content: "\E681"; } .anticon-cloud-download:before { content: "\E682"; } .anticon-cloud-download-o:before { content: "\E683"; } .anticon-cloud-upload-o:before { content: "\E684"; } .anticon-environment:before { content: "\E685"; } .anticon-environment-o:before { content: "\E686"; } .anticon-eye:before { content: "\E687"; } .anticon-eye-o:before { content: "\E688"; } .anticon-camera:before { content: "\E689"; } .anticon-camera-o:before { content: "\E68A"; } .anticon-windows:before { content: "\E68B"; } .anticon-apple:before { content: "\E68C"; } .anticon-apple-o:before { content: "\E6D4"; } .anticon-android:before { content: "\E938"; } .anticon-android-o:before { content: "\E68D"; } .anticon-aliwangwang:before { content: "\E68E"; } .anticon-aliwangwang-o:before { content: "\E68F"; } .anticon-export:before { content: "\E691"; } .anticon-edit:before { content: "\E692"; } .anticon-circle-down-o:before { content: "\E693"; } .anticon-circle-down-:before { content: "\E694"; } .anticon-appstore-o:before { content: "\E695"; } .anticon-appstore:before { content: "\E696"; } .anticon-scan:before { content: "\E697"; } .anticon-file-text:before { content: "\E698"; } .anticon-folder-open:before { content: "\E699"; } .anticon-hdd:before { content: "\E69A"; } .anticon-ie:before { content: "\E69B"; } .anticon-file-jpg:before { content: "\E69C"; } .anticon-like:before { content: "\E64C"; } .anticon-like-o:before { content: "\E69D"; } .anticon-dislike:before { content: "\E64B"; } .anticon-dislike-o:before { content: "\E69E"; } .anticon-delete:before { content: "\E69F"; } .anticon-enter:before { content: "\E6A0"; } .anticon-pushpin-o:before { content: "\E6A1"; } .anticon-pushpin:before { content: "\E6A2"; } .anticon-heart:before { content: "\E6A3"; } .anticon-heart-o:before { content: "\E6A4"; } .anticon-pay-circle:before { content: "\E6A5"; } .anticon-pay-circle-o:before { content: "\E6A6"; } .anticon-smile:before { content: "\E6A7"; } .anticon-smile-circle:before { content: "\E6A7"; } .anticon-smile-o:before { content: "\E6A8"; } .anticon-frown-o:before { content: "\E6A9"; } .anticon-calculator:before { content: "\E6AA"; } .anticon-message:before { content: "\E6AB"; } .anticon-chrome:before { content: "\E6AC"; } .anticon-github:before { content: "\E6AD"; } .anticon-file-unknown:before { content: "\E6AF"; } .anticon-file-excel:before { content: "\E6B0"; } .anticon-file-ppt:before { content: "\E6B1"; } .anticon-file-word:before { content: "\E6B2"; } .anticon-file-pdf:before { content: "\E6B3"; } .anticon-desktop:before { content: "\E6B4"; } .anticon-upload:before { content: "\E6B6"; } .anticon-download:before { content: "\E6B7"; } .anticon-pie-chart:before { content: "\E6B8"; } .anticon-unlock:before { content: "\E6BA"; } .anticon-calendar:before { content: "\E6BB"; } .anticon-windows-o:before { content: "\E6BC"; } .anticon-dot-chart:before { content: "\E6BD"; } .anticon-bar-chart:before { content: "\E6BE"; } .anticon-code:before { content: "\E6BF"; } .anticon-api:before { content: "\E951"; } .anticon-plus-square:before { content: "\E6C0"; } .anticon-minus-square:before { content: "\E6C1"; } .anticon-close-square:before { content: "\E6C2"; } .anticon-close-square-o:before { content: "\E6C3"; } .anticon-check-square:before { content: "\E6C4"; } .anticon-check-square-o:before { content: "\E6C5"; } .anticon-fast-backward:before { content: "\E6C6"; } .anticon-fast-forward:before { content: "\E6C7"; } .anticon-up-square:before { content: "\E6C8"; } .anticon-down-square:before { content: "\E6C9"; } .anticon-left-square:before { content: "\E6CA"; } .anticon-right-square:before { content: "\E6CB"; } .anticon-right-square-o:before { content: "\E6CC"; } .anticon-left-square-o:before { content: "\E6CD"; } .anticon-down-square-o:before { content: "\E6CE"; } .anticon-up-square-o:before { content: "\E6CF"; } .anticon-loading:before { content: "\E64D"; } .anticon-loading-3-quarters:before { content: "\E6AE"; } .anticon-bulb:before { content: "\E649"; } .anticon-select:before { content: "\E64A"; } .anticon-addfile:before, .anticon-file-add:before { content: "\E910"; } .anticon-addfolder:before, .anticon-folder-add:before { content: "\E914"; } .anticon-switcher:before { content: "\E913"; } .anticon-rocket:before { content: "\E90F"; } .anticon-dingding:before { content: "\E923"; } .anticon-dingding-o:before { content: "\E925"; } .anticon-bell:before { content: "\E64E"; } .anticon-disconnect:before { content: "\E64F"; } .anticon-database:before { content: "\E650"; } .anticon-compass:before { content: "\E6DB"; } .anticon-barcode:before { content: "\E652"; } .anticon-hourglass:before { content: "\E653"; } .anticon-key:before { content: "\E654"; } .anticon-flag:before { content: "\E655"; } .anticon-layout:before { content: "\E656"; } .anticon-login:before { content: "\E657"; } .anticon-printer:before { content: "\E673"; } .anticon-sound:before { content: "\E6E9"; } .anticon-usb:before { content: "\E6D7"; } .anticon-skin:before { content: "\E6D8"; } .anticon-tool:before { content: "\E6D9"; } .anticon-sync:before { content: "\E6DA"; } .anticon-wifi:before { content: "\E6D6"; } .anticon-car:before { content: "\E6DC"; } .anticon-copyright:before { content: "\E6DE"; } .anticon-schedule:before { content: "\E6DF"; } .anticon-user-add:before { content: "\E6ED"; } .anticon-user-delete:before { content: "\E6E0"; } .anticon-usergroup-add:before { content: "\E6DD"; } .anticon-usergroup-delete:before { content: "\E6E1"; } .anticon-man:before { content: "\E6E2"; } .anticon-woman:before { content: "\E6EC"; } .anticon-shop:before { content: "\E6E3"; } .anticon-gift:before { content: "\E6E4"; } .anticon-idcard:before { content: "\E6E5"; } .anticon-medicine-box:before { content: "\E6E6"; } .anticon-red-envelope:before { content: "\E6E7"; } .anticon-coffee:before { content: "\E6E8"; } .anticon-trademark:before { content: "\E651"; } .anticon-safety:before { content: "\E6EA"; } .anticon-wallet:before { content: "\E6EB"; } .anticon-bank:before { content: "\E6EE"; } .anticon-trophy:before { content: "\E6EF"; } .anticon-contacts:before { content: "\E6F0"; } .anticon-global:before { content: "\E6F1"; } .anticon-shake:before { content: "\E94F"; } .anticon-fork:before { content: "\E6F2"; } .anticon-dashboard:before { content: "\E99A"; } .anticon-profile:before { content: "\E999"; } .anticon-table:before { content: "\E998"; } .anticon-warning:before { content: "\E997"; } .anticon-form:before { content: "\E996"; } .anticon-spin:before { display: inline-block; -webkit-animation: loadingCircle 1s infinite linear; animation: loadingCircle 1s infinite linear; } .anticon-weibo-square:before { content: "\E6F5"; } .anticon-weibo-circle:before { content: "\E6F4"; } .anticon-taobao-circle:before { content: "\E6F3"; } .anticon-html5:before { content: "\E9C7"; } .anticon-weibo:before { content: "\E9C6"; } .anticon-twitter:before { content: "\E9C5"; } .anticon-wechat:before { content: "\E9C4"; } .anticon-youtube:before { content: "\E9C3"; } .anticon-alipay-circle:before { content: "\E9C2"; } .anticon-taobao:before { content: "\E9C1"; } .anticon-skype:before { content: "\E9C0"; } .anticon-qq:before { content: "\E9BF"; } .anticon-medium-workmark:before { content: "\E9BE"; } .anticon-gitlab:before { content: "\E9BD"; } .anticon-medium:before { content: "\E9BC"; } .anticon-linkedin:before { content: "\E9BB"; } .anticon-google-plus:before { content: "\E9BA"; } .anticon-dropbox:before { content: "\E9B9"; } .anticon-facebook:before { content: "\E9B8"; } .anticon-codepen:before { content: "\E9B7"; } .anticon-amazon:before { content: "\E9B6"; } .anticon-google:before { content: "\E9B5"; } .anticon-codepen-circle:before { content: "\E9B4"; } .anticon-alipay:before { content: "\E9B3"; } .anticon-ant-design:before { content: "\E9B2"; } .anticon-aliyun:before { content: "\E9F4"; } .anticon-zhihu:before { content: "\E703"; } .anticon-file-markdown:before { content: "\E704"; } .anticon-slack:before { content: "\E705"; } .anticon-slack-square:before { content: "\E706"; } .anticon-behance:before { content: "\E707"; } .anticon-behance-square:before { content: "\E708"; } .anticon-dribbble:before { content: "\E709"; } .anticon-dribbble-square:before { content: "\E70A"; } .anticon-instagram:before { content: "\E70B"; } .anticon-yuque:before { content: "\E70C"; } .fade-enter, .fade-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .fade-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .fade-enter.fade-enter-active, .fade-appear.fade-appear-active { -webkit-animation-name: antFadeIn; animation-name: antFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .fade-leave.fade-leave-active { -webkit-animation-name: antFadeOut; animation-name: antFadeOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .fade-enter, .fade-appear { opacity: 0; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .fade-leave { -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes antFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes antFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes antFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes antFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .move-up-enter, .move-up-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-up-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-up-enter.move-up-enter-active, .move-up-appear.move-up-appear-active { -webkit-animation-name: antMoveUpIn; animation-name: antMoveUpIn; -webkit-animation-play-state: running; animation-play-state: running; } .move-up-leave.move-up-leave-active { -webkit-animation-name: antMoveUpOut; animation-name: antMoveUpOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .move-up-enter, .move-up-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); } .move-up-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } .move-down-enter, .move-down-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-down-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-down-enter.move-down-enter-active, .move-down-appear.move-down-appear-active { -webkit-animation-name: antMoveDownIn; animation-name: antMoveDownIn; -webkit-animation-play-state: running; animation-play-state: running; } .move-down-leave.move-down-leave-active { -webkit-animation-name: antMoveDownOut; animation-name: antMoveDownOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .move-down-enter, .move-down-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); } .move-down-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } .move-left-enter, .move-left-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-left-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-left-enter.move-left-enter-active, .move-left-appear.move-left-appear-active { -webkit-animation-name: antMoveLeftIn; animation-name: antMoveLeftIn; -webkit-animation-play-state: running; animation-play-state: running; } .move-left-leave.move-left-leave-active { -webkit-animation-name: antMoveLeftOut; animation-name: antMoveLeftOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .move-left-enter, .move-left-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); } .move-left-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } .move-right-enter, .move-right-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-right-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-right-enter.move-right-enter-active, .move-right-appear.move-right-appear-active { -webkit-animation-name: antMoveRightIn; animation-name: antMoveRightIn; -webkit-animation-play-state: running; animation-play-state: running; } .move-right-leave.move-right-leave-active { -webkit-animation-name: antMoveRightOut; animation-name: antMoveRightOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .move-right-enter, .move-right-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); } .move-right-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } @-webkit-keyframes antMoveDownIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes antMoveDownIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @-webkit-keyframes antMoveDownOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } } @keyframes antMoveDownOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } } @-webkit-keyframes antMoveLeftIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } } @keyframes antMoveLeftIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } } @-webkit-keyframes antMoveLeftOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } } @keyframes antMoveLeftOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } } @-webkit-keyframes antMoveRightIn { 0% { opacity: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { opacity: 1; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes antMoveRightIn { 0% { opacity: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { opacity: 1; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes antMoveRightOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } } @keyframes antMoveRightOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } } @-webkit-keyframes antMoveUpIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes antMoveUpIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @-webkit-keyframes antMoveUpOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } } @keyframes antMoveUpOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } } @-webkit-keyframes loadingCircle { 0% { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loadingCircle { 0% { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .slide-up-enter, .slide-up-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-up-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-up-enter.slide-up-enter-active, .slide-up-appear.slide-up-appear-active { -webkit-animation-name: antSlideUpIn; animation-name: antSlideUpIn; -webkit-animation-play-state: running; animation-play-state: running; } .slide-up-leave.slide-up-leave-active { -webkit-animation-name: antSlideUpOut; animation-name: antSlideUpOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .slide-up-enter, .slide-up-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } .slide-up-leave { -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); } .slide-down-enter, .slide-down-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-down-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-down-enter.slide-down-enter-active, .slide-down-appear.slide-down-appear-active { -webkit-animation-name: antSlideDownIn; animation-name: antSlideDownIn; -webkit-animation-play-state: running; animation-play-state: running; } .slide-down-leave.slide-down-leave-active { -webkit-animation-name: antSlideDownOut; animation-name: antSlideDownOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .slide-down-enter, .slide-down-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } .slide-down-leave { -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); } .slide-left-enter, .slide-left-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-left-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-left-enter.slide-left-enter-active, .slide-left-appear.slide-left-appear-active { -webkit-animation-name: antSlideLeftIn; animation-name: antSlideLeftIn; -webkit-animation-play-state: running; animation-play-state: running; } .slide-left-leave.slide-left-leave-active { -webkit-animation-name: antSlideLeftOut; animation-name: antSlideLeftOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .slide-left-enter, .slide-left-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } .slide-left-leave { -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); } .slide-right-enter, .slide-right-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-right-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-right-enter.slide-right-enter-active, .slide-right-appear.slide-right-appear-active { -webkit-animation-name: antSlideRightIn; animation-name: antSlideRightIn; -webkit-animation-play-state: running; animation-play-state: running; } .slide-right-leave.slide-right-leave-active { -webkit-animation-name: antSlideRightOut; animation-name: antSlideRightOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .slide-right-enter, .slide-right-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } .slide-right-leave { -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-keyframes antSlideUpIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes antSlideUpIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes antSlideUpOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @keyframes antSlideUpOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @-webkit-keyframes antSlideDownIn { 0% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes antSlideDownIn { 0% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes antSlideDownOut { 0% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @keyframes antSlideDownOut { 0% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @-webkit-keyframes antSlideLeftIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes antSlideLeftIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes antSlideLeftOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } @keyframes antSlideLeftOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } @-webkit-keyframes antSlideRightIn { 0% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes antSlideRightIn { 0% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes antSlideRightOut { 0% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } @keyframes antSlideRightOut { 0% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } .swing-enter, .swing-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .swing-enter.swing-enter-active, .swing-appear.swing-appear-active { -webkit-animation-name: antSwingIn; animation-name: antSwingIn; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes antSwingIn { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 40% { -webkit-transform: translateX(10px); transform: translateX(10px); } 60% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 80% { -webkit-transform: translateX(5px); transform: translateX(5px); } } @keyframes antSwingIn { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 40% { -webkit-transform: translateX(10px); transform: translateX(10px); } 60% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 80% { -webkit-transform: translateX(5px); transform: translateX(5px); } } .zoom-enter, .zoom-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-