Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
R
registration
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
13
Issues
13
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
丁伟
registration
Commits
d5476d07
Commit
d5476d07
authored
Jun 11, 2021
by
丁伟
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
1、报名系统2.0版本修改
parent
cbe5f3b8
Show whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
419 additions
and
40 deletions
+419
-40
src/main/java/org/ccpit/business/registerManage/IndexController.java
+11
-0
src/main/java/org/ccpit/business/registerManage/RegisterController.java
+2
-2
src/main/java/org/ccpit/business/registerManage/RegisterService.java
+1
-1
src/main/resources/framework-dev.properties
+24
-0
src/main/resources/framework.properties
+6
-6
src/main/webapp/WEB-INF/jsp/business/registerInfoListPage.jsp
+20
-2
src/main/webapp/WEB-INF/jsp/front/info.jsp
+43
-23
src/main/webapp/WEB-INF/jsp/home.jsp
+10
-0
src/main/webapp/resource/business/registration.js
+9
-4
src/main/webapp/resource/front/css/animate.min.css
+12
-0
src/main/webapp/resource/front/css/style.css
+24
-1
src/main/webapp/resource/front/css/syalert.min.css
+123
-0
src/main/webapp/resource/front/js/info.js
+83
-1
src/main/webapp/resource/front/js/syalert.min.js
+51
-0
No files found.
src/main/java/org/ccpit/business/registerManage/IndexController.java
View file @
d5476d07
...
...
@@ -151,6 +151,16 @@ public class IndexController extends BaseController {
SubjectInfo
sub_info
=
new
SubjectInfo
();
sub_info
.
setId
(
registerInfo
.
getId
());
sub_info
.
setSubject
(
registerInfo
.
getSubject
());
sub_info
.
setRegisterStatus
(
registerInfo
.
getRegisterStatus
());
sub_info
.
setInvoiceTitle
(
registerInfo
.
getInvoiceTitle
());
sub_info
.
setInvoiceInfo
(
registerInfo
.
getInvoiceInfo
());
sub_info
.
setTaxpayerNum
(
registerInfo
.
getTaxpayerNum
());
sub_info
.
setAddressName
(
registerInfo
.
getAddressName
());
sub_info
.
setTelephone
(
registerInfo
.
getTelephone
());
sub_info
.
setBankAccount
(
registerInfo
.
getBankAccount
());
sub_info
.
setBankAddress
(
registerInfo
.
getBankAddress
());
sub_info
.
setTaxIssue
(
registerInfo
.
getTaxIssue
());
sub_info
.
setAppreciationTaxType
(
registerInfo
.
getAppreciationTaxType
());
subjectInfos
.
add
(
sub_info
);
List
<
Metadata
>
status
=
metadataService
.
getMetadatasByType2
(
"status"
);
List
<
Metadata
>
status2
=
metadataService
.
getMetadatasByType2
(
"status2"
);
...
...
@@ -270,6 +280,7 @@ public class IndexController extends BaseController {
registerInfo
.
setRegisterStatus
(
0
);
registerInfo
.
setRegType
(
true
);
registerInfo
.
setPhase
(
phase
);
registerInfo
.
setInvoiceInfo
(
"发票内容为相应考试的考试费"
);
try
{
String
pwd
=
PasswordHash
.
createHash
(
registerInfo
.
getPassword
());
registerInfo
.
setPassword
(
pwd
);
...
...
src/main/java/org/ccpit/business/registerManage/RegisterController.java
View file @
d5476d07
...
...
@@ -189,9 +189,9 @@ public class RegisterController extends BaseController {
pageRequest
.
setOrderBy
(
"submitTime desc "
);
StringBuffer
hql
=
new
StringBuffer
(
sb
.
toString
());
Page
<
RegisterInfo
>
infoPage
=
registerService
.
queryRegisterInfos
(
pageRequest
,
hql
.
toString
());
List
<
RegisterInfo
>
reg_infos
=
registerService
.
query
(
subject
,
phase
,
name
,
status
);
//
List<RegisterInfo> reg_infos = registerService.query(subject,phase,name,status);
// infoPage.getRows().addAll(reg_infos);
infoPage
.
setTotal
(
infoPage
.
getTotal
()+
reg_infos
.
size
());
//
infoPage.setTotal(infoPage.getTotal()+reg_infos.size());
return
infoPage
;
}
...
...
src/main/java/org/ccpit/business/registerManage/RegisterService.java
View file @
d5476d07
...
...
@@ -141,7 +141,7 @@ public class RegisterService {
sb
.
append
(
" and subject = "
+
subject
);
}
if
(
phase
!=
null
&&
phase
!=
0
)
{
sb
.
append
(
" and phaseId =
'"
+
phase
+
"'"
);
sb
.
append
(
" and phaseId =
"
+
phase
);
}
if
(
StringUtils
.
isNotBlank
(
name
)){
sb
.
append
(
" and name like '%"
+
name
+
"%'"
);
...
...
src/main/resources/framework-dev.properties
0 → 100644
View file @
d5476d07
# jdbc.X
jdbc.driverClassName
=
com.mysql.jdbc.Driver
# 生产环境 docker 环境下一定要注意 将localhost 换成mysql
#jdbc.url=jdbc:mysql://mysql:3306/registration?createDatabaseIfNotExist=true&characterEncoding=utf-8
#jdbc.user=root
#jdbc.pass=root
# 开发环境
jdbc.url
=
jdbc:mysql://localhost:3306/registration?createDatabaseIfNotExist=true&characterEncoding=utf-8
jdbc.user
=
ccpit
jdbc.pass
=
ccpit1516
# hibernate.X
hibernate.dialect
=
org.hibernate.dialect.MySQL5Dialect
hibernate.show_sql
=
false
hibernate.hbm2ddl.auto
=
update
#email
email.name
=
passwordcdcs@ccpit.org
email.password
=
Ccoic2088
email.smtp
=
smtp.exmail.qq.com
system.uploadFilePath
=
/data/vhosts/upload.peixunbaoming.ccpit.org
system.downloadFilePath
=
/data/vhosts/upload.peixunbaoming.ccpit.org
src/main/resources/framework.properties
View file @
d5476d07
# jdbc.X
jdbc.driverClassName
=
com.mysql.jdbc.Driver
# 生产环境 docker 环境下一定要注意 将localhost 换成mysql
#
jdbc.url=jdbc:mysql://mysql:3306/registration?createDatabaseIfNotExist=true&characterEncoding=utf-8
#
jdbc.user=root
#
jdbc.pass=root
jdbc.url
=
jdbc:mysql://mysql:3306/registration?createDatabaseIfNotExist=true&characterEncoding=utf-8
jdbc.user
=
root
jdbc.pass
=
root
# 开发环境
jdbc.url
=
jdbc:mysql://localhost:3306/registration?createDatabaseIfNotExist=true&characterEncoding=utf-8
jdbc.user
=
ccpit
jdbc.pass
=
ccpit1516
#
jdbc.url=jdbc:mysql://localhost:3306/registration?createDatabaseIfNotExist=true&characterEncoding=utf-8
#
jdbc.user=ccpit
#
jdbc.pass=ccpit1516
# hibernate.X
hibernate.dialect
=
org.hibernate.dialect.MySQL5Dialect
...
...
src/main/webapp/WEB-INF/jsp/business/registerInfoListPage.jsp
View file @
d5476d07
...
...
@@ -350,7 +350,16 @@
<div
class=
"ele-select"
>
<input
type=
"checkbox"
checked=
"checked"
>
</div>
<div
class=
"ele-name"
val=
"name_en"
>
NAME
</div>
<div
class=
"ele-name"
val=
"name_en"
>
Family NAME
</div>
<div
class=
"ele"
>
<a
class=
"up"
>
↑
</a><a
class=
"down"
>
↓
</a>
</div>
</div>
<div
class=
"block"
>
<div
class=
"ele-select"
>
<input
type=
"checkbox"
checked=
"checked"
>
</div>
<div
class=
"ele-name"
val=
"name_en_last"
>
Given NAME
</div>
<div
class=
"ele"
>
<a
class=
"up"
>
↑
</a><a
class=
"down"
>
↓
</a>
</div>
...
...
@@ -587,6 +596,15 @@
</td>
</tr>
<tr>
<td
align=
"right"
><span>
发票开具时间:
</span></td>
<td
align=
"left"
>
<select
id=
"taxIssue_id"
name=
"taxIssue"
class=
"easyui-combobox"
>
<option
value=
"1"
>
款项到账当年开具
</option>
<option
value=
"2"
>
款项到账次年开具
</option>
</select>
</td>
</tr>
<tr>
<td
align=
"right"
><span>
缴费时间:
</span></td>
<td
align=
"left"
>
<input
id=
"payTimeId"
name=
"payTime"
class=
"easyui-datebox"
/>
...
...
@@ -786,7 +804,7 @@
<tr>
<td
align=
"right"
><span>
发票开具时间:
</span></td>
<td
align=
"left"
>
<select
id=
"taxIssue_
i
d"
name=
"taxIssue"
class=
"easyui-combobox"
>
<select
id=
"taxIssue_
I
d"
name=
"taxIssue"
class=
"easyui-combobox"
>
<option
value=
"1"
>
款项到账当年开具
</option>
<option
value=
"2"
>
款项到账次年开具
</option>
</select>
...
...
src/main/webapp/WEB-INF/jsp/front/info.jsp
View file @
d5476d07
...
...
@@ -20,10 +20,13 @@
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
注册信息
</title>
<link
href=
"/resource/front/css/style.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link
href=
"/resource/front/css/animate.min.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link
href=
"/resource/front/css/syalert.min.css"
rel=
"stylesheet"
type=
"text/css"
/>
<script
src=
"/resource/home/js/jquery-1.8.1.min.js"
></script>
<script
src=
"/resource/home/js/ajaxfileupload.js"
></script>
<script
src=
"/resource/front/js/photoUpload.js"
></script>
<script
src=
"/resource/front/js/info.js"
></script>
<script
src=
"/resource/front/js/syalert.min.js"
></script>
</head>
<div
class=
"wrapper"
>
<div
id=
"top"
><IMG
src=
"/resource/front/img/banner.png"
width=
1024
height=
204
></div>
...
...
@@ -89,18 +92,39 @@
<td
class=
"name"
width=
"25%"
style=
"font-weight: bold;font-size: 15px"
>
已报名科目:
</td>
<td
colspan=
"2"
>
<c:forEach
items=
"${subjectInfos}"
var=
"sub_info"
>
<table
width=
"100%"
>
<tbody>
<tr>
<td
width=
"35%"
>
<c:forEach
items=
"${subject}"
var=
"sub"
>
<font
style=
"font-size: 17px;font-weight: bold"
>
<c:if
test=
"${sub_info.subject == sub.dataNameId}"
>
${sub.dataName}
 
</c:if></font>
</c:forEach>
(
<c:forEach
items=
"${status}"
var=
"s"
>
</td>
<td
width=
"45%"
>
(当前状态:
<c:forEach
items=
"${status}"
var=
"s"
>
<c:if
test=
"${sub_info.registerStatus == s.dataNameId}"
>
${s.dataName}
</c:if>
</c:forEach>
)
<br>
</c:forEach>
</c:forEach>
 
<a
href=
"javascript:void(0);"
onclick=
"lookInvoice('${sub_info.invoiceTitle}',
'${sub_info.taxpayerNum}','${sub_info.addressName}','${sub_info.telephone}','${sub_info.bankAddress}',
'${sub_info.bankAccount}','${sub_info.taxIssue}','${sub_info.invoiceInfo}','${sub_info.appreciationTaxType}','${sub_info.subject}')"
>
查看发票信息
</a>
)
</td>
</tr>
</tbody>
</table>
</c:forEach>
</td>
</tr>
</c:if>
<div
class=
"sy-alert sy-alert-alert animated"
sy-enter=
"zoomIn"
sy-leave=
"zoomOut"
sy-type=
"alert"
sy-mask=
"true"
id=
"alert2"
>
<div
class=
"sy-title"
></div>
<div
class=
"invoiceWin"
></div>
<div
class=
"sy-btn"
>
<button
onClick=
"ok('alert2')"
>
确定
</button>
</div>
</div>
<c:if
test=
"${!registerInfo.regType}"
>
<tr
name=
"trEmial"
>
<td
class=
"name"
width=
"25%"
>
报名科目:
</td>
...
...
@@ -120,14 +144,14 @@
</tr>
</c:if>
<c:if
test=
"${registerInfo.regType}"
>
<tr
id=
""
name=
"trEmial"
>
<td
class=
"name"
width=
"25%"
>
报名状态:
</td
>
<td
style=
"font-size:16px;color:red;font-weight:bold"
>
<c:forEach
items=
"${status}"
var=
"s"
>
<c:if
test=
"${registerInfo.registerStatus == s.dataNameId}"
>
${s.dataName}
</c:if
>
</c:forEach
>
</td
>
</tr
>
<
%
--
<
tr
id=
""
name=
"trEmial"
>
--%
>
<
%
--
<
td
class=
"name"
width=
"25%"
>
报名状态:
</td>
--%
>
<
%
--
<
td
style=
"font-size:16px;color:red;font-weight:bold"
>
--%
>
<
%
--
<
c:forEach
items=
"${status}"
var=
"s"
>
--%
>
<
%
--
<
c:if
test=
"${registerInfo.registerStatus == s.dataNameId}"
>
${s.dataName}
</c:if>
--%
>
<
%
--
</
c:forEach
>
--%
>
<
%
--
</
td
>
--%
>
<
%
--
</
tr
>
--%
>
<c:if
test=
"${not empty registerInfo.dcNumber}"
>
<tr
id=
""
name=
"trEmial"
>
<td
class=
"name"
width=
"25%"
>
LIBF NUMBER:
</td>
...
...
@@ -194,45 +218,45 @@
<td>
${registerInfo.telphone}
</td>
</tr>
<tr>
<tr
style=
"display: none"
>
<td
class=
"name"
>
增值税发票:
</td>
<td>
<c:if
test=
"${registerInfo.appreciationTaxType == 1}"
>
增值税普通发票
</c:if>
<c:if
test=
"${registerInfo.appreciationTaxType == 2}"
>
增值税专用发票
</c:if>
</td>
</tr>
<tr>
<tr
style=
"display: none"
>
<td
class=
"name"
>
发票抬头:
</td>
<td
id=
"invoiceTitle_id"
>
${registerInfo.invoiceTitle}
</td>
</tr>
<tr>
<tr
style=
"display: none"
>
<td
class=
"name"
>
发票内容:
</td>
<td
id=
"invoiceInfo_id"
>
${registerInfo.invoiceInfo}
</td>
</tr>
<tr>
<tr
style=
"display: none"
>
<td
class=
"name"
>
纳税人识别号:
</td>
<td
id=
"taxpayerNum_id"
>
${registerInfo.taxpayerNum}
</td>
</tr>
<c:if
test=
"${registerInfo.appreciationTaxType == 2}"
>
<tr>
<tr
style=
"display: none"
>
<td
class=
"name"
>
公司地址:
</td>
<td
id=
"addressName_id"
>
${registerInfo.addressName}
</td>
</tr>
</c:if>
<c:if
test=
"${registerInfo.appreciationTaxType == 2}"
>
<tr>
<tr
style=
"display: none"
>
<td
class=
"name"
>
公司电话:
</td>
<td
id=
"telephone_id"
>
${registerInfo.telephone}
</td>
</tr>
</c:if>
<c:if
test=
"${registerInfo.appreciationTaxType == 2}"
>
<tr>
<tr
style=
"display: none"
>
<td
class=
"name"
>
开户行:
</td>
<td
id=
"bankAddress_id"
>
${registerInfo.bankAddress}
</td>
</tr>
</c:if>
<c:if
test=
"${registerInfo.appreciationTaxType == 2}"
>
<tr>
<tr
style=
"display: none"
>
<td
class=
"name"
>
银行账号:
</td>
<td
id=
"bankAccount_id"
>
${registerInfo.bankAccount}
</td>
</tr>
...
...
@@ -249,10 +273,6 @@
</tr>
<tr>
<td
class=
"name"
>
CITY SELECT:
</td>
<td>
${registerInfo.city_en}
</td>
</tr>
<tr>
<td
class=
"name"
>
TITLE:
</td>
<td>
${registerInfo.title}
</td>
</tr>
...
...
src/main/webapp/WEB-INF/jsp/home.jsp
View file @
d5476d07
...
...
@@ -40,6 +40,7 @@
<div
region=
"west"
hide=
"true"
split=
"true"
title=
"导航菜单"
style=
"width: 180px;"
id=
"west"
>
<div
id=
"nav"
class=
"easyui-accordion"
fit=
"true"
border=
"false"
>
<!-- 导航内容 -->
<div
title=
"系统管理"
data-options=
"collapsible:true"
>
<ul
>
<security:url
uri=
"/admin/org/goinOrgListPage"
><li><div><a
ref=
"11"
href=
"#"
rel=
"/admin/org/goinOrgListPage"
><span
class=
"icon icon-sys"
>
</span><span
class=
"nav"
>
机构管理
</span></a></div></li></security:url>
<security:url
uri=
"/admin/user/queryAllUser"
><li><div><a
ref=
"12"
href=
"#"
rel=
"/admin/user/queryAllUser"
><span
class=
"icon icon-users"
>
</span><span
class=
"nav"
>
用户管理
</span></a></div></li></security:url>
...
...
@@ -48,17 +49,26 @@
<security:url
uri=
"/admin/privilegeManage/goRolePriListPage"
><li><div><a
ref=
"15"
href=
"#"
rel=
"/admin/privilegeManage/goRolePriListPage"
><span
class=
"icon icon-allotRole"
>
</span><span
class=
"nav"
>
角色权限分配
</span></a></div></li></security:url>
<security:url
uri=
"/admin/metadataManage/goinMetadataListPage"
><li><div><a
ref=
"16"
href=
"#"
rel=
"/admin/metadataManage/goinMetadataListPage"
><span
class=
"icon icon-database"
>
</span><span
class=
"nav"
>
数据字典管理
</span></a></div></li></security:url>
</ul>
</div>
<div
title=
"考试管理"
data-options=
"collapsible:true"
>
<ul>
<security:url
uri=
"/admin/business/registerManage/goinRegisterInfoListPage"
><li><div><a
ref=
"21"
href=
"#"
rel=
"/admin/business/registerManage/goinRegisterInfoListPage"
><span
class=
"icon icon-nav"
>
</span><span
class=
"nav"
>
报名管理
</span></a></div></li></security:url>
<security:url
uri=
"/admin/business/registerManage/goinRegisterInfoExtListPage"
><li><div><a
ref=
"21"
href=
"#"
rel=
"/admin/business/registerManage/goinRegisterInfoExtListPage"
><span
class=
"icon icon-nav"
>
</span><span
class=
"nav"
>
延考恢复管理
</span></a></div></li></security:url>
<security:url
uri=
"/admin/business/phaseManage/page"
><li><div><a
ref=
"21"
href=
"#"
rel=
"/admin/business/phaseManage/page"
><span
class=
"icon icon-nav"
>
</span><span
class=
"nav"
>
报名期数管理
</span></a></div></li></security:url>
</ul>
</div>
<div
title=
"邮件管理"
data-options=
"collapsible:true"
>
<ul>
<security:url
uri=
"/admin/logManage/goinLogInfoListPage"
><li><div><a
ref=
"31"
rel=
"/business/EmailManage/goinEmailPage"
><span
class=
"icon icon-log"
>
</span><span
class=
"nav"
>
邮件管理
</span></a></div></li></security:url>
</ul>
</div>
<div
title=
"日志管理"
data-options=
"collapsible:true"
>
<ul>
<security:url
uri=
"/admin/logManage/goinLogInfoListPage"
><li><div><a
ref=
"31"
rel=
"/admin/logManage/goinLogInfoListPage"
><span
class=
"icon icon-log"
>
</span><span
class=
"nav"
>
统计日志
</span></a></div></li></security:url>
</ul>
</div>
</div>
</div>
<div
id=
"mainPanle"
region=
"center"
style=
"background: #eee; overflow-y: hidden"
>
<div
id=
"tabs"
class=
"easyui-tabs"
fit=
"true"
border=
"false"
>
<div
title=
"欢迎使用"
...
...
src/main/webapp/resource/business/registration.js
View file @
d5476d07
...
...
@@ -40,7 +40,7 @@ Date.prototype.format = function (format) {
$
(
function
()
{
divHeight
=
$
(
"#queryDiv"
).
height
();
dataGridWidth
=
$
(
"#queryDiv"
).
width
();
dataGridHeight
=
divHeight
+
45
;
// dataGridHeight = divHeight
;
bodyWidth
=
document
.
body
.
clientWidth
;
bodyHeight
=
document
.
documentElement
.
clientHeight
;
...
...
@@ -139,7 +139,7 @@ function initExportWindow(){
function
initDataTable
(){
var
h
=
document
.
documentElement
.
clientHeight
;
$
(
"#registersTable"
).
datagrid
({
height
:
h
/
4
,
height
:
(
h
-
divHeight
)
/
3
*
2
-
30
,
nowrap
:
true
,
striped
:
true
,
pagination
:
true
,
...
...
@@ -216,7 +216,7 @@ function initDataTable(){
function
subjectTableById
(
id
){
var
h
=
document
.
documentElement
.
clientHeight
;
$
(
"#subjectTable"
).
datagrid
({
height
:
(
h
-
dataGridHeight
)
/
3
,
height
:
(
h
-
divHeight
)
/
3
+
30
,
nowrap
:
true
,
striped
:
true
,
pagination
:
true
,
...
...
@@ -367,6 +367,10 @@ function initInputWidth(){
panelHeight
:
'auto'
,
textField
:
'text'
});
$
(
"#taxIssue_Id"
).
combobox
({
width
:
fixShortWidth
()
+
4
,
panelHeight
:
'auto'
});
$
(
"#city_enId"
).
combobox
({
url
:
'/admin/metadataManage/getMetadatasList?dataType=encityType'
,
...
...
@@ -914,5 +918,6 @@ function closeWindow2(){
}
//关闭窗口
function
closeWindow3
(){
function
closeWindow3
()
{
$
(
"#subjectWinId"
).
window
(
'close'
);
}
src/main/webapp/resource/front/css/animate.min.css
0 → 100644
View file @
d5476d07
@charset
"UTF-8"
;
/*!
* 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
{
0
%,
20
%,
53
%,
80
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
.215
,
.61
,
.355
,
1
);
animation-timing-function
:
cubic-bezier
(
.215
,
.61
,
.355
,
1
);
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
40
%,
43
%
{
-webkit-animation-timing-function
:
cubic-bezier
(
.755
,
.05
,
.855
,
.06
);
animation-timing-function
:
cubic-bezier
(
.755
,
.05
,
.855
,
.06
);
-webkit-transform
:
translate3d
(
0
,
-30px
,
0
);
transform
:
translate3d
(
0
,
-30px
,
0
)}
70
%
{
-webkit-animation-timing-function
:
cubic-bezier
(
.755
,
.05
,
.855
,
.06
);
animation-timing-function
:
cubic-bezier
(
.755
,
.05
,
.855
,
.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
{
0
%,
20
%,
53
%,
80
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
.215
,
.61
,
.355
,
1
);
animation-timing-function
:
cubic-bezier
(
.215
,
.61
,
.355
,
1
);
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
40
%,
43
%
{
-webkit-animation-timing-function
:
cubic-bezier
(
.755
,
.05
,
.855
,
.06
);
animation-timing-function
:
cubic-bezier
(
.755
,
.05
,
.855
,
.06
);
-webkit-transform
:
translate3d
(
0
,
-30px
,
0
);
transform
:
translate3d
(
0
,
-30px
,
0
)}
70
%
{
-webkit-animation-timing-function
:
cubic-bezier
(
.755
,
.05
,
.855
,
.06
);
animation-timing-function
:
cubic-bezier
(
.755
,
.05
,
.855
,
.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
{
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-timing-function
:
ease-in-out
;
animation-timing-function
:
ease-in-out
;
-webkit-animation-name
:
headShake
;
animation-name
:
headShake
}
@-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-transform-origin
:
top
center
;
transform-origin
:
top
center
;
-webkit-animation-name
:
swing
;
animation-name
:
swing
}
@-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
;
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
{
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
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
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
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
1.03
,
1.03
,
1.03
);
transform
:
scale3d
(
1.03
,
1.03
,
1.03
)}
80
%
{
-webkit-transform
:
scale3d
(
.97
,
.97
,
.97
);
transform
:
scale3d
(
.97
,
.97
,
.97
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleX
(
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
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
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
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
1.03
,
1.03
,
1.03
);
transform
:
scale3d
(
1.03
,
1.03
,
1.03
)}
80
%
{
-webkit-transform
:
scale3d
(
.97
,
.97
,
.97
);
transform
:
scale3d
(
.97
,
.97
,
.97
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleX
(
1
);
transform
:
scaleX
(
1
)}}
.bounceIn
{
-webkit-animation-duration
:
.75s
;
animation-duration
:
.75s
;
-webkit-animation-name
:
bounceIn
;
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
%
{
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
:
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
%
{
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
:
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
%
{
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
:
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
%
{
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
:
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
%
{
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
:
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
%
{
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
:
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
%
{
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
:
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
%
{
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
:
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
%
{
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
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}}
@keyframes
bounceOut
{
20
%
{
-webkit-transform
:
scale3d
(
.9
,
.9
,
.9
);
transform
:
scale3d
(
.9
,
.9
,
.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
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}}
.bounceOut
{
-webkit-animation-duration
:
.75s
;
animation-duration
:
.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
{
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
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
fadeInDown
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.fadeInDown
{
-webkit-animation-name
:
fadeInDown
;
animation-name
:
fadeInDown
}
@-webkit-keyframes
fadeInDownBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-2000px
,
0
);
transform
:
translate3d
(
0
,
-2000px
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
fadeInDownBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-2000px
,
0
);
transform
:
translate3d
(
0
,
-2000px
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.fadeInDownBig
{
-webkit-animation-name
:
fadeInDownBig
;
animation-name
:
fadeInDownBig
}
@-webkit-keyframes
fadeInLeft
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
fadeInLeft
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.fadeInLeft
{
-webkit-animation-name
:
fadeInLeft
;
animation-name
:
fadeInLeft
}
@-webkit-keyframes
fadeInLeftBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-2000px
,
0
,
0
);
transform
:
translate3d
(
-2000px
,
0
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
fadeInLeftBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-2000px
,
0
,
0
);
transform
:
translate3d
(
-2000px
,
0
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.fadeInLeftBig
{
-webkit-animation-name
:
fadeInLeftBig
;
animation-name
:
fadeInLeftBig
}
@-webkit-keyframes
fadeInRight
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
fadeInRight
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.fadeInRight
{
-webkit-animation-name
:
fadeInRight
;
animation-name
:
fadeInRight
}
@-webkit-keyframes
fadeInRightBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
2000px
,
0
,
0
);
transform
:
translate3d
(
2000px
,
0
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
fadeInRightBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
2000px
,
0
,
0
);
transform
:
translate3d
(
2000px
,
0
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.fadeInRightBig
{
-webkit-animation-name
:
fadeInRightBig
;
animation-name
:
fadeInRightBig
}
@-webkit-keyframes
fadeInUp
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
fadeInUp
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.fadeInUp
{
-webkit-animation-name
:
fadeInUp
;
animation-name
:
fadeInUp
}
@-webkit-keyframes
fadeInUpBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
2000px
,
0
);
transform
:
translate3d
(
0
,
2000px
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
fadeInUpBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
2000px
,
0
);
transform
:
translate3d
(
0
,
2000px
,
0
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
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
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)}}
@keyframes
fadeOutDown
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)}}
.fadeOutDown
{
-webkit-animation-name
:
fadeOutDown
;
animation-name
:
fadeOutDown
}
@-webkit-keyframes
fadeOutDownBig
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
2000px
,
0
);
transform
:
translate3d
(
0
,
2000px
,
0
)}}
@keyframes
fadeOutDownBig
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
2000px
,
0
);
transform
:
translate3d
(
0
,
2000px
,
0
)}}
.fadeOutDownBig
{
-webkit-animation-name
:
fadeOutDownBig
;
animation-name
:
fadeOutDownBig
}
@-webkit-keyframes
fadeOutLeft
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
)}}
@keyframes
fadeOutLeft
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
)}}
.fadeOutLeft
{
-webkit-animation-name
:
fadeOutLeft
;
animation-name
:
fadeOutLeft
}
@-webkit-keyframes
fadeOutLeftBig
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-2000px
,
0
,
0
);
transform
:
translate3d
(
-2000px
,
0
,
0
)}}
@keyframes
fadeOutLeftBig
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-2000px
,
0
,
0
);
transform
:
translate3d
(
-2000px
,
0
,
0
)}}
.fadeOutLeftBig
{
-webkit-animation-name
:
fadeOutLeftBig
;
animation-name
:
fadeOutLeftBig
}
@-webkit-keyframes
fadeOutRight
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
)}}
@keyframes
fadeOutRight
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
)}}
.fadeOutRight
{
-webkit-animation-name
:
fadeOutRight
;
animation-name
:
fadeOutRight
}
@-webkit-keyframes
fadeOutRightBig
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
2000px
,
0
,
0
);
transform
:
translate3d
(
2000px
,
0
,
0
)}}
@keyframes
fadeOutRightBig
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
2000px
,
0
,
0
);
transform
:
translate3d
(
2000px
,
0
,
0
)}}
.fadeOutRightBig
{
-webkit-animation-name
:
fadeOutRightBig
;
animation-name
:
fadeOutRightBig
}
@-webkit-keyframes
fadeOutUp
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
)}}
@keyframes
fadeOutUp
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
)}}
.fadeOutUp
{
-webkit-animation-name
:
fadeOutUp
;
animation-name
:
fadeOutUp
}
@-webkit-keyframes
fadeOutUpBig
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-2000px
,
0
);
transform
:
translate3d
(
0
,
-2000px
,
0
)}}
@keyframes
fadeOutUpBig
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-2000px
,
0
);
transform
:
translate3d
(
0
,
-2000px
,
0
)}}
.fadeOutUpBig
{
-webkit-animation-name
:
fadeOutUpBig
;
animation-name
:
fadeOutUpBig
}
@-webkit-keyframes
flip
{
0
%
{
-webkit-transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
0
)
rotateY
(
-1turn
);
transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
0
)
rotateY
(
-1turn
);
-webkit-animation-timing-function
:
ease-out
;
animation-timing-function
:
ease-out
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
150px
)
rotateY
(
-190deg
);
transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
150px
)
rotateY
(
-190deg
);
-webkit-animation-timing-function
:
ease-out
;
animation-timing-function
:
ease-out
}
50
%
{
-webkit-transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
150px
)
rotateY
(
-170deg
);
transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
150px
)
rotateY
(
-170deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
scale3d
(
.95
,
.95
,
.95
)
translateZ
(
0
)
rotateY
(
0deg
);
transform
:
perspective
(
400px
)
scale3d
(
.95
,
.95
,
.95
)
translateZ
(
0
)
rotateY
(
0deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
to
{
-webkit-transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
0
)
rotateY
(
0deg
);
transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
0
)
rotateY
(
0deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}}
@keyframes
flip
{
0
%
{
-webkit-transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
0
)
rotateY
(
-1turn
);
transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
0
)
rotateY
(
-1turn
);
-webkit-animation-timing-function
:
ease-out
;
animation-timing-function
:
ease-out
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
150px
)
rotateY
(
-190deg
);
transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
150px
)
rotateY
(
-190deg
);
-webkit-animation-timing-function
:
ease-out
;
animation-timing-function
:
ease-out
}
50
%
{
-webkit-transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
150px
)
rotateY
(
-170deg
);
transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
150px
)
rotateY
(
-170deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
scale3d
(
.95
,
.95
,
.95
)
translateZ
(
0
)
rotateY
(
0deg
);
transform
:
perspective
(
400px
)
scale3d
(
.95
,
.95
,
.95
)
translateZ
(
0
)
rotateY
(
0deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
to
{
-webkit-transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
0
)
rotateY
(
0deg
);
transform
:
perspective
(
400px
)
scaleX
(
1
)
translateZ
(
0
)
rotateY
(
0deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}}
.animated.flip
{
-webkit-backface-visibility
:
visible
;
backface-visibility
:
visible
;
-webkit-animation-name
:
flip
;
animation-name
:
flip
}
@-webkit-keyframes
flipInX
{
0
%
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
90deg
);
transform
:
perspective
(
400px
)
rotateX
(
90deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
;
opacity
:
0
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
-20deg
);
transform
:
perspective
(
400px
)
rotateX
(
-20deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
60
%
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
10deg
);
transform
:
perspective
(
400px
)
rotateX
(
10deg
);
opacity
:
1
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
-5deg
);
transform
:
perspective
(
400px
)
rotateX
(
-5deg
)}
to
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)}}
@keyframes
flipInX
{
0
%
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
90deg
);
transform
:
perspective
(
400px
)
rotateX
(
90deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
;
opacity
:
0
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
-20deg
);
transform
:
perspective
(
400px
)
rotateX
(
-20deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
60
%
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
10deg
);
transform
:
perspective
(
400px
)
rotateX
(
10deg
);
opacity
:
1
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
-5deg
);
transform
:
perspective
(
400px
)
rotateX
(
-5deg
)}
to
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)}}
.flipInX
{
-webkit-backface-visibility
:
visible
!important
;
backface-visibility
:
visible
!important
;
-webkit-animation-name
:
flipInX
;
animation-name
:
flipInX
}
@-webkit-keyframes
flipInY
{
0
%
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
90deg
);
transform
:
perspective
(
400px
)
rotateY
(
90deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
;
opacity
:
0
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
-20deg
);
transform
:
perspective
(
400px
)
rotateY
(
-20deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
60
%
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
10deg
);
transform
:
perspective
(
400px
)
rotateY
(
10deg
);
opacity
:
1
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
-5deg
);
transform
:
perspective
(
400px
)
rotateY
(
-5deg
)}
to
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)}}
@keyframes
flipInY
{
0
%
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
90deg
);
transform
:
perspective
(
400px
)
rotateY
(
90deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
;
opacity
:
0
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
-20deg
);
transform
:
perspective
(
400px
)
rotateY
(
-20deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
60
%
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
10deg
);
transform
:
perspective
(
400px
)
rotateY
(
10deg
);
opacity
:
1
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
-5deg
);
transform
:
perspective
(
400px
)
rotateY
(
-5deg
)}
to
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)}}
.flipInY
{
-webkit-backface-visibility
:
visible
!important
;
backface-visibility
:
visible
!important
;
-webkit-animation-name
:
flipInY
;
animation-name
:
flipInY
}
@-webkit-keyframes
flipOutX
{
0
%
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)}
30
%
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
-20deg
);
transform
:
perspective
(
400px
)
rotateX
(
-20deg
);
opacity
:
1
}
to
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
90deg
);
transform
:
perspective
(
400px
)
rotateX
(
90deg
);
opacity
:
0
}}
@keyframes
flipOutX
{
0
%
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)}
30
%
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
-20deg
);
transform
:
perspective
(
400px
)
rotateX
(
-20deg
);
opacity
:
1
}
to
{
-webkit-transform
:
perspective
(
400px
)
rotateX
(
90deg
);
transform
:
perspective
(
400px
)
rotateX
(
90deg
);
opacity
:
0
}}
.flipOutX
{
-webkit-animation-duration
:
.75s
;
animation-duration
:
.75s
;
-webkit-animation-name
:
flipOutX
;
animation-name
:
flipOutX
;
-webkit-backface-visibility
:
visible
!important
;
backface-visibility
:
visible
!important
}
@-webkit-keyframes
flipOutY
{
0
%
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)}
30
%
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
-15deg
);
transform
:
perspective
(
400px
)
rotateY
(
-15deg
);
opacity
:
1
}
to
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
90deg
);
transform
:
perspective
(
400px
)
rotateY
(
90deg
);
opacity
:
0
}}
@keyframes
flipOutY
{
0
%
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)}
30
%
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
-15deg
);
transform
:
perspective
(
400px
)
rotateY
(
-15deg
);
opacity
:
1
}
to
{
-webkit-transform
:
perspective
(
400px
)
rotateY
(
90deg
);
transform
:
perspective
(
400px
)
rotateY
(
90deg
);
opacity
:
0
}}
.flipOutY
{
-webkit-animation-duration
:
.75s
;
animation-duration
:
.75s
;
-webkit-backface-visibility
:
visible
!important
;
backface-visibility
:
visible
!important
;
-webkit-animation-name
:
flipOutY
;
animation-name
:
flipOutY
}
@-webkit-keyframes
lightSpeedIn
{
0
%
{
-webkit-transform
:
translate3d
(
100%
,
0
,
0
)
skewX
(
-30deg
);
transform
:
translate3d
(
100%
,
0
,
0
)
skewX
(
-30deg
);
opacity
:
0
}
60
%
{
-webkit-transform
:
skewX
(
20deg
);
transform
:
skewX
(
20deg
);
opacity
:
1
}
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
);
transform
:
translate3d
(
100%
,
0
,
0
)
skewX
(
-30deg
);
opacity
:
0
}
60
%
{
-webkit-transform
:
skewX
(
20deg
);
transform
:
skewX
(
20deg
);
opacity
:
1
}
80
%
{
-webkit-transform
:
skewX
(
-5deg
);
transform
:
skewX
(
-5deg
)}
to
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.lightSpeedIn
{
-webkit-animation-name
:
lightSpeedIn
;
animation-name
:
lightSpeedIn
;
-webkit-animation-timing-function
:
ease-out
;
animation-timing-function
:
ease-out
}
@-webkit-keyframes
lightSpeedOut
{
0
%
{
opacity
:
1
}
to
{
-webkit-transform
:
translate3d
(
100%
,
0
,
0
)
skewX
(
30deg
);
transform
:
translate3d
(
100%
,
0
,
0
)
skewX
(
30deg
);
opacity
:
0
}}
@keyframes
lightSpeedOut
{
0
%
{
opacity
:
1
}
to
{
-webkit-transform
:
translate3d
(
100%
,
0
,
0
)
skewX
(
30deg
);
transform
:
translate3d
(
100%
,
0
,
0
)
skewX
(
30deg
);
opacity
:
0
}}
.lightSpeedOut
{
-webkit-animation-name
:
lightSpeedOut
;
animation-name
:
lightSpeedOut
;
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
@-webkit-keyframes
rotateIn
{
0
%
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
rotate
(
-200deg
);
transform
:
rotate
(
-200deg
);
opacity
:
0
}
to
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
opacity
:
1
}}
@keyframes
rotateIn
{
0
%
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
rotate
(
-200deg
);
transform
:
rotate
(
-200deg
);
opacity
:
0
}
to
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
opacity
:
1
}}
.rotateIn
{
-webkit-animation-name
:
rotateIn
;
animation-name
:
rotateIn
}
@-webkit-keyframes
rotateInDownLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate
(
-45deg
);
transform
:
rotate
(
-45deg
);
opacity
:
0
}
to
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
opacity
:
1
}}
@keyframes
rotateInDownLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate
(
-45deg
);
transform
:
rotate
(
-45deg
);
opacity
:
0
}
to
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
opacity
:
1
}}
.rotateInDownLeft
{
-webkit-animation-name
:
rotateInDownLeft
;
animation-name
:
rotateInDownLeft
}
@-webkit-keyframes
rotateInDownRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate
(
45deg
);
transform
:
rotate
(
45deg
);
opacity
:
0
}
to
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
opacity
:
1
}}
@keyframes
rotateInDownRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate
(
45deg
);
transform
:
rotate
(
45deg
);
opacity
:
0
}
to
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
opacity
:
1
}}
.rotateInDownRight
{
-webkit-animation-name
:
rotateInDownRight
;
animation-name
:
rotateInDownRight
}
@-webkit-keyframes
rotateInUpLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate
(
45deg
);
transform
:
rotate
(
45deg
);
opacity
:
0
}
to
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
opacity
:
1
}}
@keyframes
rotateInUpLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate
(
45deg
);
transform
:
rotate
(
45deg
);
opacity
:
0
}
to
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
opacity
:
1
}}
.rotateInUpLeft
{
-webkit-animation-name
:
rotateInUpLeft
;
animation-name
:
rotateInUpLeft
}
@-webkit-keyframes
rotateInUpRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate
(
-90deg
);
transform
:
rotate
(
-90deg
);
opacity
:
0
}
to
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
opacity
:
1
}}
@keyframes
rotateInUpRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate
(
-90deg
);
transform
:
rotate
(
-90deg
);
opacity
:
0
}
to
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
);
opacity
:
1
}}
.rotateInUpRight
{
-webkit-animation-name
:
rotateInUpRight
;
animation-name
:
rotateInUpRight
}
@-webkit-keyframes
rotateOut
{
0
%
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
opacity
:
1
}
to
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
rotate
(
200deg
);
transform
:
rotate
(
200deg
);
opacity
:
0
}}
@keyframes
rotateOut
{
0
%
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
opacity
:
1
}
to
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
rotate
(
200deg
);
transform
:
rotate
(
200deg
);
opacity
:
0
}}
.rotateOut
{
-webkit-animation-name
:
rotateOut
;
animation-name
:
rotateOut
}
@-webkit-keyframes
rotateOutDownLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
opacity
:
1
}
to
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate
(
45deg
);
transform
:
rotate
(
45deg
);
opacity
:
0
}}
@keyframes
rotateOutDownLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
opacity
:
1
}
to
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate
(
45deg
);
transform
:
rotate
(
45deg
);
opacity
:
0
}}
.rotateOutDownLeft
{
-webkit-animation-name
:
rotateOutDownLeft
;
animation-name
:
rotateOutDownLeft
}
@-webkit-keyframes
rotateOutDownRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
opacity
:
1
}
to
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate
(
-45deg
);
transform
:
rotate
(
-45deg
);
opacity
:
0
}}
@keyframes
rotateOutDownRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
opacity
:
1
}
to
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate
(
-45deg
);
transform
:
rotate
(
-45deg
);
opacity
:
0
}}
.rotateOutDownRight
{
-webkit-animation-name
:
rotateOutDownRight
;
animation-name
:
rotateOutDownRight
}
@-webkit-keyframes
rotateOutUpLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
opacity
:
1
}
to
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate
(
-45deg
);
transform
:
rotate
(
-45deg
);
opacity
:
0
}}
@keyframes
rotateOutUpLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
opacity
:
1
}
to
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate
(
-45deg
);
transform
:
rotate
(
-45deg
);
opacity
:
0
}}
.rotateOutUpLeft
{
-webkit-animation-name
:
rotateOutUpLeft
;
animation-name
:
rotateOutUpLeft
}
@-webkit-keyframes
rotateOutUpRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
opacity
:
1
}
to
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
);
opacity
:
0
}}
@keyframes
rotateOutUpRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
opacity
:
1
}
to
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
);
opacity
:
0
}}
.rotateOutUpRight
{
-webkit-animation-name
:
rotateOutUpRight
;
animation-name
:
rotateOutUpRight
}
@-webkit-keyframes
hinge
{
0
%
{
-webkit-transform-origin
:
top
left
;
transform-origin
:
top
left
;
-webkit-animation-timing-function
:
ease-in-out
;
animation-timing-function
:
ease-in-out
}
20
%,
60
%
{
-webkit-transform
:
rotate
(
80deg
);
transform
:
rotate
(
80deg
);
-webkit-transform-origin
:
top
left
;
transform-origin
:
top
left
;
-webkit-animation-timing-function
:
ease-in-out
;
animation-timing-function
:
ease-in-out
}
40
%,
80
%
{
-webkit-transform
:
rotate
(
60deg
);
transform
:
rotate
(
60deg
);
-webkit-transform-origin
:
top
left
;
transform-origin
:
top
left
;
-webkit-animation-timing-function
:
ease-in-out
;
animation-timing-function
:
ease-in-out
;
opacity
:
1
}
to
{
-webkit-transform
:
translate3d
(
0
,
700px
,
0
);
transform
:
translate3d
(
0
,
700px
,
0
);
opacity
:
0
}}
@keyframes
hinge
{
0
%
{
-webkit-transform-origin
:
top
left
;
transform-origin
:
top
left
;
-webkit-animation-timing-function
:
ease-in-out
;
animation-timing-function
:
ease-in-out
}
20
%,
60
%
{
-webkit-transform
:
rotate
(
80deg
);
transform
:
rotate
(
80deg
);
-webkit-transform-origin
:
top
left
;
transform-origin
:
top
left
;
-webkit-animation-timing-function
:
ease-in-out
;
animation-timing-function
:
ease-in-out
}
40
%,
80
%
{
-webkit-transform
:
rotate
(
60deg
);
transform
:
rotate
(
60deg
);
-webkit-transform-origin
:
top
left
;
transform-origin
:
top
left
;
-webkit-animation-timing-function
:
ease-in-out
;
animation-timing-function
:
ease-in-out
;
opacity
:
1
}
to
{
-webkit-transform
:
translate3d
(
0
,
700px
,
0
);
transform
:
translate3d
(
0
,
700px
,
0
);
opacity
:
0
}}
.hinge
{
-webkit-animation-duration
:
2s
;
animation-duration
:
2s
;
-webkit-animation-name
:
hinge
;
animation-name
:
hinge
}
@-webkit-keyframes
jackInTheBox
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.1
)
rotate
(
30deg
);
transform
:
scale
(
.1
)
rotate
(
30deg
);
-webkit-transform-origin
:
center
bottom
;
transform-origin
:
center
bottom
}
50
%
{
-webkit-transform
:
rotate
(
-10deg
);
transform
:
rotate
(
-10deg
)}
70
%
{
-webkit-transform
:
rotate
(
3deg
);
transform
:
rotate
(
3deg
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
jackInTheBox
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.1
)
rotate
(
30deg
);
transform
:
scale
(
.1
)
rotate
(
30deg
);
-webkit-transform-origin
:
center
bottom
;
transform-origin
:
center
bottom
}
50
%
{
-webkit-transform
:
rotate
(
-10deg
);
transform
:
rotate
(
-10deg
)}
70
%
{
-webkit-transform
:
rotate
(
3deg
);
transform
:
rotate
(
3deg
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
.jackInTheBox
{
-webkit-animation-name
:
jackInTheBox
;
animation-name
:
jackInTheBox
}
@-webkit-keyframes
rollIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
)
rotate
(
-120deg
);
transform
:
translate3d
(
-100%
,
0
,
0
)
rotate
(
-120deg
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
rollIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
)
rotate
(
-120deg
);
transform
:
translate3d
(
-100%
,
0
,
0
)
rotate
(
-120deg
)}
to
{
opacity
:
1
;
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.rollIn
{
-webkit-animation-name
:
rollIn
;
animation-name
:
rollIn
}
@-webkit-keyframes
rollOut
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
)
rotate
(
120deg
);
transform
:
translate3d
(
100%
,
0
,
0
)
rotate
(
120deg
)}}
@keyframes
rollOut
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
)
rotate
(
120deg
);
transform
:
translate3d
(
100%
,
0
,
0
)
rotate
(
120deg
)}}
.rollOut
{
-webkit-animation-name
:
rollOut
;
animation-name
:
rollOut
}
@-webkit-keyframes
zoomIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
zoomIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
.zoomIn
{
-webkit-animation-name
:
zoomIn
;
animation-name
:
zoomIn
}
@-webkit-keyframes
zoomInDown
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
-1000px
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
-1000px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
60
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
60px
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
60px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
@keyframes
zoomInDown
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
-1000px
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
-1000px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
60
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
60px
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
60px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
.zoomInDown
{
-webkit-animation-name
:
zoomInDown
;
animation-name
:
zoomInDown
}
@-webkit-keyframes
zoomInLeft
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
-1000px
,
0
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
-1000px
,
0
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
60
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
10px
,
0
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
10px
,
0
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
@keyframes
zoomInLeft
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
-1000px
,
0
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
-1000px
,
0
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
60
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
10px
,
0
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
10px
,
0
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
.zoomInLeft
{
-webkit-animation-name
:
zoomInLeft
;
animation-name
:
zoomInLeft
}
@-webkit-keyframes
zoomInRight
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
1000px
,
0
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
1000px
,
0
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
60
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
-10px
,
0
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
-10px
,
0
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
@keyframes
zoomInRight
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
1000px
,
0
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
1000px
,
0
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
60
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
-10px
,
0
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
-10px
,
0
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
.zoomInRight
{
-webkit-animation-name
:
zoomInRight
;
animation-name
:
zoomInRight
}
@-webkit-keyframes
zoomInUp
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
1000px
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
1000px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
60
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
-60px
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
-60px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
@keyframes
zoomInUp
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
1000px
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
1000px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
60
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
-60px
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
-60px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
.zoomInUp
{
-webkit-animation-name
:
zoomInUp
;
animation-name
:
zoomInUp
}
@-webkit-keyframes
zoomOut
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
zoomOut
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.zoomOut
{
-webkit-animation-name
:
zoomOut
;
animation-name
:
zoomOut
}
@-webkit-keyframes
zoomOutDown
{
40
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
-60px
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
-60px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
2000px
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
2000px
,
0
);
-webkit-transform-origin
:
center
bottom
;
transform-origin
:
center
bottom
;
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
@keyframes
zoomOutDown
{
40
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
-60px
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
-60px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
2000px
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
2000px
,
0
);
-webkit-transform-origin
:
center
bottom
;
transform-origin
:
center
bottom
;
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
.zoomOutDown
{
-webkit-animation-name
:
zoomOutDown
;
animation-name
:
zoomOutDown
}
@-webkit-keyframes
zoomOutLeft
{
40
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
42px
,
0
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
42px
,
0
,
0
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.1
)
translate3d
(
-2000px
,
0
,
0
);
transform
:
scale
(
.1
)
translate3d
(
-2000px
,
0
,
0
);
-webkit-transform-origin
:
left
center
;
transform-origin
:
left
center
}}
@keyframes
zoomOutLeft
{
40
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
42px
,
0
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
42px
,
0
,
0
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.1
)
translate3d
(
-2000px
,
0
,
0
);
transform
:
scale
(
.1
)
translate3d
(
-2000px
,
0
,
0
);
-webkit-transform-origin
:
left
center
;
transform-origin
:
left
center
}}
.zoomOutLeft
{
-webkit-animation-name
:
zoomOutLeft
;
animation-name
:
zoomOutLeft
}
@-webkit-keyframes
zoomOutRight
{
40
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
-42px
,
0
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
-42px
,
0
,
0
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.1
)
translate3d
(
2000px
,
0
,
0
);
transform
:
scale
(
.1
)
translate3d
(
2000px
,
0
,
0
);
-webkit-transform-origin
:
right
center
;
transform-origin
:
right
center
}}
@keyframes
zoomOutRight
{
40
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
-42px
,
0
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
-42px
,
0
,
0
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.1
)
translate3d
(
2000px
,
0
,
0
);
transform
:
scale
(
.1
)
translate3d
(
2000px
,
0
,
0
);
-webkit-transform-origin
:
right
center
;
transform-origin
:
right
center
}}
.zoomOutRight
{
-webkit-animation-name
:
zoomOutRight
;
animation-name
:
zoomOutRight
}
@-webkit-keyframes
zoomOutUp
{
40
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
60px
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
60px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
-2000px
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
-2000px
,
0
);
-webkit-transform-origin
:
center
bottom
;
transform-origin
:
center
bottom
;
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
@keyframes
zoomOutUp
{
40
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
60px
,
0
);
transform
:
scale3d
(
.475
,
.475
,
.475
)
translate3d
(
0
,
60px
,
0
);
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
.55
,
.055
,
.675
,
.19
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
-2000px
,
0
);
transform
:
scale3d
(
.1
,
.1
,
.1
)
translate3d
(
0
,
-2000px
,
0
);
-webkit-transform-origin
:
center
bottom
;
transform-origin
:
center
bottom
;
-webkit-animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
.175
,
.885
,
.32
,
1
)}}
.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
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)}}
@keyframes
slideOutDown
{
0
%
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)}}
.slideOutDown
{
-webkit-animation-name
:
slideOutDown
;
animation-name
:
slideOutDown
}
@-webkit-keyframes
slideOutLeft
{
0
%
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
)}}
@keyframes
slideOutLeft
{
0
%
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
)}}
.slideOutLeft
{
-webkit-animation-name
:
slideOutLeft
;
animation-name
:
slideOutLeft
}
@-webkit-keyframes
slideOutRight
{
0
%
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
)}}
@keyframes
slideOutRight
{
0
%
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
)}}
.slideOutRight
{
-webkit-animation-name
:
slideOutRight
;
animation-name
:
slideOutRight
}
@-webkit-keyframes
slideOutUp
{
0
%
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
)}}
@keyframes
slideOutUp
{
0
%
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
)}}
.slideOutUp
{
-webkit-animation-name
:
slideOutUp
;
animation-name
:
slideOutUp
}
.animated
{
-webkit-animation-duration
:
1s
;
animation-duration
:
1s
;
-webkit-animation-fill-mode
:
both
;
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
:
reduce
),(
print
){
.animated
{
-webkit-animation-duration
:
1ms
!important
;
animation-duration
:
1ms
!important
;
-webkit-transition-duration
:
1ms
!important
;
transition-duration
:
1ms
!important
;
-webkit-animation-iteration-count
:
1
!important
;
animation-iteration-count
:
1
!important
}}
\ No newline at end of file
src/main/webapp/resource/front/css/style.css
View file @
d5476d07
...
...
@@ -625,7 +625,7 @@ tables {
BODY
{
font-size
:
12px
;
display
:
}
.text1
{
...
...
@@ -677,3 +677,26 @@ BODY {
.foot
{
height
:
1000px
}
#in_voice
{
width
:
100%
;
}
.invoiceWin
table
td
{
background
:
#eeeeee
;
color
:
#000
;
line-height
:
40px
;
font-size
:
14px
;
}
.td_left
{
width
:
25%
;
text-align
:
right
;
}
.t_right
{
text-align
:
left
;
width
:
75%
;
}
.sy-title
{
text-align
:
center
;
}
src/main/webapp/resource/front/css/syalert.min.css
0 → 100644
View file @
d5476d07
/*
* syalert.css
* Version - 1.0
* Copyright (c) 2019 sy
*/
@charset
"utf-8"
;
.sy-mask
{
width
:
100%
;
height
:
100%
;
position
:
fixed
;
background
:
rgba
(
0
,
0
,
0
,
0.8
);
left
:
0
;
top
:
0
;
z-index
:
1000
}
.sy-alert
{
position
:
fixed
;
display
:
none
;
background
:
#fff
;
border-radius
:
5px
;
overflow
:
hidden
;
width
:
50%
;
max-width
:
90%
;
max-height
:
80%
;
left
:
0
;
right
:
0
;
margin
:
0
auto
;
z-index
:
9999
}
.sy-alert.animated
{
-webkit-animation-duration
:
.3s
;
animation-duration
:
.3s
}
.sy-alert
.sy-title
{
height
:
45px
;
color
:
#333
;
line-height
:
45px
;
font-size
:
15px
;
border-bottom
:
1px
solid
#eee
;
padding
:
0
12px
}
.sy-alert
.sy-content
{
padding
:
20px
;
text-align
:
center
;
font-size
:
14px
;
line-height
:
24px
;
color
:
#666
;
overflow-y
:
auto
}
.sy-alert
.sy-btn
{
height
:
50%
;
border-top
:
1px
solid
#eee
;
overflow
:
hidden
}
.sy-alert
.sy-btn
button
{
float
:
left
;
border
:
0
;
color
:
#333
;
cursor
:
pointer
;
background
:
#fff
;
width
:
50%
;
line-height
:
45px
;
font-size
:
15px
;
text-align
:
center
}
.sy-alert
.sy-btn
button
:nth-child
(
1
)
{
color
:
#888
;
border-right
:
1px
solid
#eee
}
.sy-alert.sy-alert-alert
.sy-btn
button
{
float
:
none
;
width
:
100%
}
.sy-alert.sy-alert-tips
{
text-align
:
center
;
width
:
150px
;
background
:
rgba
(
0
,
0
,
0
,
0.7
)
}
.sy-alert.sy-alert-tips
.sy-content
{
padding
:
8px
;
color
:
#fff
;
font-size
:
14px
}
.sy-alert.sy-alert-model
.sy-content
{
text-align
:
left
}
.sy-alert.sy-alert-model
.sy-content
.form
.input-item
{
margin-bottom
:
12px
;
position
:
relative
}
.sy-alert.sy-alert-model
.sy-content
.form
.input-item
input
{
display
:
block
;
position
:
relative
;
width
:
100%
;
border
:
1px
solid
#eee
;
padding
:
10px
}
.sy-alert.sy-alert-model
.sy-content
.form
.input-item
.getcode
{
border
:
0
;
top
:
0
;
right
:
0
;
position
:
absolute
;
background
:
0
;
line-height
:
37px
;
color
:
#f60
;
width
:
100px
;
text-align
:
center
}
\ No newline at end of file
src/main/webapp/resource/front/js/info.js
View file @
d5476d07
...
...
@@ -108,10 +108,92 @@ $(function () {
});
$
.
get
(
'/training/getObj?obj_id='
+
obj_id
,
function
(
data
)
{
$
(
"#img1"
).
attr
(
'src'
,
data
.
obj
.
img1
);
})
})
;
})
function
lookInvoice
(
invoiceTitle
,
taxpayerNum
,
addressName
,
telephone
,
bankAddress
,
bankAccount
,
taxIssue
,
invoiceInfo
,
appreciationTaxType
,
subject
)
{
var
title
=
'<h3>'
+
changeTitle
(
subject
)
+
'</h3>'
var
html
=
'<table id="in_voice" ><tr><td class="td_left">增值税发票:</td><td class="td_right">'
+
taxType
(
appreciationTaxType
)
+
'</td></tr>'
html
+=
'<tr><td class="td_left" >发票内容:</td><td class="td_right">'
+
invoiceInfo
+
'</td></tr>'
html
+=
'<tr><td class="td_left">发票抬头:</td><td class="td_right">'
+
invoiceTitle
+
'</td></tr>'
html
+=
'<tr><td class="td_left">纳税人识别号:</td><td class="td_right">'
+
taxpayerNum
+
'</td></tr>'
html
+=
'<tr><td class="td_left">公司地址:</td><td class="td_right">'
+
addressName
+
'</td></tr>'
html
+=
'<tr><td class="td_left">公司电话:</td><td class="td_right">'
+
telephone
+
'</td></tr>'
html
+=
'<tr><td class="td_left">开户行:</td><td class="td_right">'
+
bankAddress
+
'</td></tr>'
html
+=
'<tr><td class="td_left">银行账号:</td><td class="td_right">'
+
bankAccount
+
'</td></tr>'
html
+=
'<tr><td class="td_left">发票开具时间:</td><td class="td_right">'
+
ch
(
taxIssue
)
+
'</td></tr></table>'
$
(
".sy-title"
).
append
(
title
);
$
(
".invoiceWin"
).
append
(
html
);
syalert
.
syopen
(
'alert2'
)
}
function
ok
(
id
){
syalert
.
syhide
(
id
);
$
(
".sy-title"
).
empty
();
$
(
".invoiceWin"
).
empty
();
}
function
ch
(
val
){
if
(
val
==
1
){
return
"款项到账当年开具"
;
}
if
(
val
==
2
){
return
"款项到账次年开具"
;
}
}
function
taxType
(
val
){
if
(
val
==
1
){
return
"增值税普通发票"
;
}
if
(
val
==
2
){
return
"增值税专用发票"
;
}
}
function
changeTitle
(
val
){
if
(
val
==
0
){
return
"跟单信用证专家(CDCS)首次报名发票信息"
;
}
if
(
val
==
1
){
return
"保函与备用证专家(CSDG)首次报名发票信息"
;
}
if
(
val
==
2
){
return
"国际贸易金融专家(CITF)首次报名发票信息"
;
}
if
(
val
==
3
){
return
"跟单信用证专家(CDCS)补考报名发票信息"
;
}
if
(
val
==
4
){
return
"保函与备用证专家(CSDG)补考报名发票信息"
;
}
if
(
val
==
5
){
return
"国际贸易金融专家(CITF)补考报名发票信息"
;
}
if
(
val
==
6
){
return
"国际支付专家(CertPAY)首次报名发票信息"
;
}
if
(
val
==
7
){
return
"贸易金融合规专家(CTFC)首次报名发票信息"
;
}
if
(
val
==
8
){
return
"供应链金融专家(CSCF)首次报名发票信息"
;
}
if
(
val
==
9
){
return
"国际支付专家(CertPAY)补考报名发票信息"
;
}
if
(
val
==
10
){
return
"贸易金融合规专家(CTFC)补考报名发票信息"
;
}
if
(
val
==
11
){
return
"供应链金融专家(CSCF)补考报名发票信息"
;
}
}
function
checkRequired
()
{
var
success
=
true
;
$
(
".required"
).
each
(
function
(
n
,
v
)
{
...
...
src/main/webapp/resource/front/js/syalert.min.js
0 → 100644
View file @
d5476d07
/*
* syalert.js
* Version - 1.0
* Copyright (c) 2019 sy
*/
var
syalert
=
function
()
{
return
{
syopen
:
function
(
id
)
{
var
dom
=
$
(
"#"
+
id
);
this
.
sycenter
(
dom
);
var
name
=
dom
.
attr
(
"sy-enter"
);
var
type
=
dom
.
attr
(
"sy-type"
);
var
mask
=
dom
.
attr
(
"sy-mask"
);
dom
.
addClass
(
name
);
dom
.
show
();
var
that
=
this
;
$
(
"body"
).
css
({
"overflow-y"
:
"hidden"
});
if
(
mask
==
"true"
)
{
$
(
"body"
).
append
(
"<div class='sy-mask' onclick=
\"
closeAlert('"
+
id
+
"')
\"
></div>"
);
$
(
".sy-mask"
).
fadeIn
(
300
)
}
setTimeout
(
function
()
{
dom
.
removeClass
(
name
)
},
300
);
if
(
type
==
"tips"
)
{
setTimeout
(
function
()
{
that
.
syhide
(
id
)
},
1500
)
}
},
syhide
:
function
(
id
)
{
if
(
typeof
id
==
"undefined"
)
{
var
dom
=
$
(
".sy-alert"
)
}
else
{
var
dom
=
$
(
"#"
+
id
)
}
var
name
=
dom
.
attr
(
"sy-leave"
);
dom
.
addClass
(
name
);
$
(
".sy-mask"
).
fadeOut
(
300
);
setTimeout
(
function
()
{
dom
.
hide
();
dom
.
removeClass
(
name
);
$
(
".sy-mask"
).
remove
();
$
(
"body"
).
css
({
"overflow-y"
:
"auto"
})
},
300
)
},
sycenter
:
function
(
dom
)
{
var
mgtop
=
parseFloat
(
dom
.
height
()
/
2
);
dom
.
css
({
"top"
:
"50%"
,
"margin-top"
:
"-"
+
mgtop
+
"px"
})
}
}
}();
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment