Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
S
SURPRISED
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
华国豪
SURPRISED
Commits
77a6bb37
Commit
77a6bb37
authored
Dec 10, 2019
by
华国豪
🙄
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
1
parent
c49fe90e
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
2821 additions
and
0 deletions
+2821
-0
animate.css
css/animate.css
+2592
-0
yearPage.html
html/yearPage.html
+229
-0
No files found.
css/animate.css
0 → 100644
View file @
77a6bb37
.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.hinge
{
-webkit-animation-duration
:
2s
;
animation-duration
:
2s
}
@-webkit-keyframes
bounce
{
0
%,
100
%,
20
%,
53
%,
80
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
)
}
40
%,
43
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.755
,
.050
,
.855
,
.060
);
transition-timing-function
:
cubic-bezier
(
0.755
,
.050
,
.855
,
.060
);
-webkit-transform
:
translate3d
(
0
,
-30px
,
0
);
transform
:
translate3d
(
0
,
-30px
,
0
)
}
70
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.755
,
.050
,
.855
,
.060
);
transition-timing-function
:
cubic-bezier
(
0.755
,
.050
,
.855
,
.060
);
-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
%,
100
%,
20
%,
53
%,
80
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
)
}
40
%,
43
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.755
,
.050
,
.855
,
.060
);
transition-timing-function
:
cubic-bezier
(
0.755
,
.050
,
.855
,
.060
);
-webkit-transform
:
translate3d
(
0
,
-30px
,
0
);
transform
:
translate3d
(
0
,
-30px
,
0
)
}
70
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.755
,
.050
,
.855
,
.060
);
transition-timing-function
:
cubic-bezier
(
0.755
,
.050
,
.855
,
.060
);
-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
;
-ms-transform-origin
:
center
bottom
;
transform-origin
:
center
bottom
}
@-webkit-keyframes
flash
{
0
%,
100
%,
50
%
{
opacity
:
1
}
25
%,
75
%
{
opacity
:
0
}
}
@keyframes
flash
{
0
%,
100
%,
50
%
{
opacity
:
1
}
25
%,
75
%
{
opacity
:
0
}
}
/* 闪烁 */
.flash
{
-webkit-animation-name
:
flash
;
animation-name
:
flash
}
@-webkit-keyframes
pulse
{
0
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
50
%
{
-webkit-transform
:
scale3d
(
1.05
,
1.05
,
1.05
);
transform
:
scale3d
(
1.05
,
1.05
,
1.05
)
}
100
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
}
@keyframes
pulse
{
0
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
50
%
{
-webkit-transform
:
scale3d
(
1.05
,
1.05
,
1.05
);
transform
:
scale3d
(
1.05
,
1.05
,
1.05
)
}
100
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
}
/* 呼吸 放大 */
.pulse
{
-webkit-animation-name
:
pulse
;
animation-name
:
pulse
}
@-webkit-keyframes
rubberBand
{
0
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
30
%
{
-webkit-transform
:
scale3d
(
1.25
,
.75
,
1
);
transform
:
scale3d
(
1.25
,
.75
,
1
)
}
40
%
{
-webkit-transform
:
scale3d
(
0.75
,
1.25
,
1
);
transform
:
scale3d
(
0.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
)
}
100
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
}
@keyframes
rubberBand
{
0
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
30
%
{
-webkit-transform
:
scale3d
(
1.25
,
.75
,
1
);
transform
:
scale3d
(
1.25
,
.75
,
1
)
}
40
%
{
-webkit-transform
:
scale3d
(
0.75
,
1.25
,
1
);
transform
:
scale3d
(
0.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
)
}
100
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
}
/* 左右 拉扯 弹弹弹 */
.rubberBand
{
-webkit-animation-name
:
rubberBand
;
animation-name
:
rubberBand
}
@-webkit-keyframes
shake
{
0
%,
100
%
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
)
}
10
%,
30
%,
50
%,
70
%,
90
%
{
-webkit-transform
:
translate3d
(
-10px
,
0
,
0
);
transform
:
translate3d
(
-10px
,
0
,
0
)
}
20
%,
40
%,
60
%,
80
%
{
-webkit-transform
:
translate3d
(
10px
,
0
,
0
);
transform
:
translate3d
(
10px
,
0
,
0
)
}
}
@keyframes
shake
{
0
%,
100
%
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
)
}
10
%,
30
%,
50
%,
70
%,
90
%
{
-webkit-transform
:
translate3d
(
-10px
,
0
,
0
);
transform
:
translate3d
(
-10px
,
0
,
0
)
}
20
%,
40
%,
60
%,
80
%
{
-webkit-transform
:
translate3d
(
10px
,
0
,
0
);
transform
:
translate3d
(
10px
,
0
,
0
)
}
}
@-webkit-keyframes
shake2
{
0
%,
100
%
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
)
}
10
%,
30
%,
50
%,
70
%,
90
%
{
-webkit-transform
:
translate3d
(
-10px
,
0
,
0
);
transform
:
translate3d
(
-10px
,
0
,
0
)
}
20
%,
40
%,
60
%,
80
%
{
-webkit-transform
:
translate3d
(
10px
,
0
,
0
);
transform
:
translate3d
(
10px
,
0
,
0
)
}
}
@keyframes
shake2
{
0
%,
100
%
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
)
}
10
%,
30
%,
50
%,
70
%,
90
%
{
-webkit-transform
:
translate3d
(
-10px
,
0
,
0
);
transform
:
translate3d
(
-10px
,
0
,
0
)
}
20
%,
40
%,
60
%,
80
%
{
-webkit-transform
:
translate3d
(
10px
,
0
,
0
);
transform
:
translate3d
(
10px
,
0
,
0
)
}
}
.shakeR
{
animation
:
shake2
3s
infinite
;
-webkit-animation
:
shake2
3s
infinite
;
/*Safari and Chrome*/
}
/* 左右抖动 */
.shake
{
-webkit-animation-name
:
shake
;
animation-name
:
shake
}
@-webkit-keyframes
swing
{
20
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
15deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
15deg
)
}
40
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-10deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-10deg
)
}
60
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
5deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
5deg
)
}
80
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-5deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-5deg
)
}
100
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
0deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
0deg
)
}
}
@keyframes
swing
{
20
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
15deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
15deg
)
}
40
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-10deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-10deg
)
}
60
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
5deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
5deg
)
}
80
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-5deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-5deg
)
}
100
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
0deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
0deg
)
}
}
/* 广告牌左右晃动 */
.swing
{
-webkit-transform-origin
:
top
center
;
-ms-transform-origin
:
top
center
;
transform-origin
:
top
center
;
-webkit-animation-name
:
swing
;
animation-name
:
swing
}
@-webkit-keyframes
tada
{
0
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
10
%,
20
%
{
-webkit-transform
:
scale3d
(
.9
,
.9
,
.9
)
rotate3d
(
0
,
0
,
1
,
-3deg
);
transform
:
scale3d
(
.9
,
.9
,
.9
)
rotate3d
(
0
,
0
,
1
,
-3deg
)
}
30
%,
50
%,
70
%,
90
%
{
-webkit-transform
:
scale3d
(
1.1
,
1.1
,
1.1
)
rotate3d
(
0
,
0
,
1
,
3deg
);
transform
:
scale3d
(
1.1
,
1.1
,
1.1
)
rotate3d
(
0
,
0
,
1
,
3deg
)
}
40
%,
60
%,
80
%
{
-webkit-transform
:
scale3d
(
1.1
,
1.1
,
1.1
)
rotate3d
(
0
,
0
,
1
,
-3deg
);
transform
:
scale3d
(
1.1
,
1.1
,
1.1
)
rotate3d
(
0
,
0
,
1
,
-3deg
)
}
100
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
}
@keyframes
tada
{
0
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
10
%,
20
%
{
-webkit-transform
:
scale3d
(
.9
,
.9
,
.9
)
rotate3d
(
0
,
0
,
1
,
-3deg
);
transform
:
scale3d
(
.9
,
.9
,
.9
)
rotate3d
(
0
,
0
,
1
,
-3deg
)
}
30
%,
50
%,
70
%,
90
%
{
-webkit-transform
:
scale3d
(
1.1
,
1.1
,
1.1
)
rotate3d
(
0
,
0
,
1
,
3deg
);
transform
:
scale3d
(
1.1
,
1.1
,
1.1
)
rotate3d
(
0
,
0
,
1
,
3deg
)
}
40
%,
60
%,
80
%
{
-webkit-transform
:
scale3d
(
1.1
,
1.1
,
1.1
)
rotate3d
(
0
,
0
,
1
,
-3deg
);
transform
:
scale3d
(
1.1
,
1.1
,
1.1
)
rotate3d
(
0
,
0
,
1
,
-3deg
)
}
100
%
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
}
/* 放大加抖动 */
.tada
{
-webkit-animation-name
:
tada
;
animation-name
:
tada
}
@-webkit-keyframes
wobble
{
0
%
{
-webkit-transform
:
none
;
transform
:
none
}
15
%
{
-webkit-transform
:
translate3d
(
-25%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-5deg
);
transform
:
translate3d
(
-25%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-5deg
)
}
30
%
{
-webkit-transform
:
translate3d
(
20%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
3deg
);
transform
:
translate3d
(
20%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
3deg
)
}
45
%
{
-webkit-transform
:
translate3d
(
-15%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-3deg
);
transform
:
translate3d
(
-15%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-3deg
)
}
60
%
{
-webkit-transform
:
translate3d
(
10%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
2deg
);
transform
:
translate3d
(
10%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
2deg
)
}
75
%
{
-webkit-transform
:
translate3d
(
-5%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-1deg
);
transform
:
translate3d
(
-5%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-1deg
)
}
100
%
{
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
wobble
{
0
%
{
-webkit-transform
:
none
;
transform
:
none
}
15
%
{
-webkit-transform
:
translate3d
(
-25%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-5deg
);
transform
:
translate3d
(
-25%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-5deg
)
}
30
%
{
-webkit-transform
:
translate3d
(
20%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
3deg
);
transform
:
translate3d
(
20%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
3deg
)
}
45
%
{
-webkit-transform
:
translate3d
(
-15%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-3deg
);
transform
:
translate3d
(
-15%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-3deg
)
}
60
%
{
-webkit-transform
:
translate3d
(
10%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
2deg
);
transform
:
translate3d
(
10%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
2deg
)
}
75
%
{
-webkit-transform
:
translate3d
(
-5%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-1deg
);
transform
:
translate3d
(
-5%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-1deg
)
}
100
%
{
-webkit-transform
:
none
;
transform
:
none
}
}
/* 有弧度的左右晃动 */
.wobble
{
-webkit-animation-name
:
wobble
;
animation-name
:
wobble
}
@-webkit-keyframes
bounceIn
{
0
%,
100
%,
20
%,
40
%,
60
%,
80
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
}
@keyframes
bounceIn
{
0
%,
100
%,
20
%,
40
%,
60
%,
80
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
)
}
}
/* 放大加 闪现 */
.bounceIn
{
-webkit-animation-name
:
bounceIn
;
animation-name
:
bounceIn
;
-webkit-animation-duration
:
.75s
;
animation-duration
:
.75s
}
@-webkit-keyframes
bounceInDown
{
0
%,
100
%,
60
%,
75
%,
90
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
bounceInDown
{
0
%,
100
%,
60
%,
75
%,
90
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
-webkit-transform
:
none
;
transform
:
none
}
}
/* 掉下来 上下弹两下 */
.bounceInDown
{
-webkit-animation-name
:
bounceInDown
;
animation-name
:
bounceInDown
}
@-webkit-keyframes
bounceInLeft
{
0
%,
100
%,
60
%,
75
%,
90
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
bounceInLeft
{
0
%,
100
%,
60
%,
75
%,
90
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
-webkit-transform
:
none
;
transform
:
none
}
}
.bounceInLeft
{
-webkit-animation-name
:
bounceInLeft
;
animation-name
:
bounceInLeft
}
@-webkit-keyframes
bounceInRight
{
0
%,
100
%,
60
%,
75
%,
90
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
bounceInRight
{
0
%,
100
%,
60
%,
75
%,
90
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
-webkit-transform
:
none
;
transform
:
none
}
}
.bounceInRight
{
-webkit-animation-name
:
bounceInRight
;
animation-name
:
bounceInRight
}
@-webkit-keyframes
bounceInUp
{
0
%,
100
%,
60
%,
75
%,
90
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
)
}
}
@keyframes
bounceInUp
{
0
%,
100
%,
60
%,
75
%,
90
%
{
-webkit-transition-timing-function
:
cubic-bezier
(
0.215
,
.61
,
.355
,
1
);
transition-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
)
}
}
.bounceInUp
{
-webkit-animation-name
:
bounceInUp
;
animation-name
:
bounceInUp
}
@-webkit-keyframes
bounceOut
{
20
%
{
-webkit-transform
:
scale3d
(
.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
)
}
100
%
{
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
)
}
100
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)
}
}
.bounceOut
{
-webkit-animation-name
:
bounceOut
;
animation-name
:
bounceOut
;
-webkit-animation-duration
:
.75s
;
animation-duration
:
.75s
}
@-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
)
}
100
%
{
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
)
}
100
%
{
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
)
}
100
%
{
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
)
}
100
%
{
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
)
}
100
%
{
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
)
}
100
%
{
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
)
}
100
%
{
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
)
}
100
%
{
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
}
100
%
{
opacity
:
1
}
}
@keyframes
fadeIn
{
0
%
{
opacity
:
0
}
100
%
{
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
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
fadeInDown
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
.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
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
fadeInDownBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-2000px
,
0
);
transform
:
translate3d
(
0
,
-2000px
,
0
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
.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
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
fadeInLeft
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
.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
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
fadeInLeftBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-2000px
,
0
,
0
);
transform
:
translate3d
(
-2000px
,
0
,
0
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
.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
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
fadeInRight
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
.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
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
fadeInRightBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
2000px
,
0
,
0
);
transform
:
translate3d
(
2000px
,
0
,
0
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
.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
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
fadeInUp
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
.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
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
fadeInUpBig
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
2000px
,
0
);
transform
:
translate3d
(
0
,
2000px
,
0
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
.fadeInUpBig
{
-webkit-animation-name
:
fadeInUpBig
;
animation-name
:
fadeInUpBig
}
@-webkit-keyframes
fadeOut
{
0
%
{
opacity
:
1
}
100
%
{
opacity
:
0
}
}
@keyframes
fadeOut
{
0
%
{
opacity
:
1
}
100
%
{
opacity
:
0
}
}
.fadeOut
{
-webkit-animation-name
:
fadeOut
;
animation-name
:
fadeOut
}
@-webkit-keyframes
fadeOutDown
{
0
%
{
opacity
:
1
}
100
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
)
}
}
@keyframes
fadeOutDown
{
0
%
{
opacity
:
1
}
100
%
{
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
}
100
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
2000px
,
0
);
transform
:
translate3d
(
0
,
2000px
,
0
)
}
}
@keyframes
fadeOutDownBig
{
0
%
{
opacity
:
1
}
100
%
{
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
}
100
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
)
}
}
@keyframes
fadeOutLeft
{
0
%
{
opacity
:
1
}
100
%
{
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
}
100
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-2000px
,
0
,
0
);
transform
:
translate3d
(
-2000px
,
0
,
0
)
}
}
@keyframes
fadeOutLeftBig
{
0
%
{
opacity
:
1
}
100
%
{
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
}
100
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
)
}
}
@keyframes
fadeOutRight
{
0
%
{
opacity
:
1
}
100
%
{
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
}
100
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
2000px
,
0
,
0
);
transform
:
translate3d
(
2000px
,
0
,
0
)
}
}
@keyframes
fadeOutRightBig
{
0
%
{
opacity
:
1
}
100
%
{
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
}
100
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
)
}
}
@keyframes
fadeOutUp
{
0
%
{
opacity
:
1
}
100
%
{
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
}
100
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-2000px
,
0
);
transform
:
translate3d
(
0
,
-2000px
,
0
)
}
}
@keyframes
fadeOutUpBig
{
0
%
{
opacity
:
1
}
100
%
{
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
)
rotate3d
(
0
,
1
,
0
,
-360deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-360deg
);
-webkit-animation-timing-function
:
ease-out
;
animation-timing-function
:
ease-out
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
translate3d
(
0
,
0
,
150px
)
rotate3d
(
0
,
1
,
0
,
-190deg
);
transform
:
perspective
(
400px
)
translate3d
(
0
,
0
,
150px
)
rotate3d
(
0
,
1
,
0
,
-190deg
);
-webkit-animation-timing-function
:
ease-out
;
animation-timing-function
:
ease-out
}
50
%
{
-webkit-transform
:
perspective
(
400px
)
translate3d
(
0
,
0
,
150px
)
rotate3d
(
0
,
1
,
0
,
-170deg
);
transform
:
perspective
(
400px
)
translate3d
(
0
,
0
,
150px
)
rotate3d
(
0
,
1
,
0
,
-170deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
scale3d
(
.95
,
.95
,
.95
);
transform
:
perspective
(
400px
)
scale3d
(
.95
,
.95
,
.95
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
100
%
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
}
@keyframes
flip
{
0
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-360deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-360deg
);
-webkit-animation-timing-function
:
ease-out
;
animation-timing-function
:
ease-out
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
translate3d
(
0
,
0
,
150px
)
rotate3d
(
0
,
1
,
0
,
-190deg
);
transform
:
perspective
(
400px
)
translate3d
(
0
,
0
,
150px
)
rotate3d
(
0
,
1
,
0
,
-190deg
);
-webkit-animation-timing-function
:
ease-out
;
animation-timing-function
:
ease-out
}
50
%
{
-webkit-transform
:
perspective
(
400px
)
translate3d
(
0
,
0
,
150px
)
rotate3d
(
0
,
1
,
0
,
-170deg
);
transform
:
perspective
(
400px
)
translate3d
(
0
,
0
,
150px
)
rotate3d
(
0
,
1
,
0
,
-170deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
scale3d
(
.95
,
.95
,
.95
);
transform
:
perspective
(
400px
)
scale3d
(
.95
,
.95
,
.95
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
100
%
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
);
-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
)
rotate3d
(
1
,
0
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
-webkit-transition-timing-function
:
ease-in
;
transition-timing-function
:
ease-in
;
opacity
:
0
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
-20deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
-20deg
);
-webkit-transition-timing-function
:
ease-in
;
transition-timing-function
:
ease-in
}
60
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
10deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
10deg
);
opacity
:
1
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
-5deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
-5deg
)
}
100
%
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)
}
}
@keyframes
flipInX
{
0
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
-webkit-transition-timing-function
:
ease-in
;
transition-timing-function
:
ease-in
;
opacity
:
0
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
-20deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
-20deg
);
-webkit-transition-timing-function
:
ease-in
;
transition-timing-function
:
ease-in
}
60
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
10deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
10deg
);
opacity
:
1
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
-5deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
-5deg
)
}
100
%
{
-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
)
rotate3d
(
0
,
1
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
-webkit-transition-timing-function
:
ease-in
;
transition-timing-function
:
ease-in
;
opacity
:
0
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-20deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-20deg
);
-webkit-transition-timing-function
:
ease-in
;
transition-timing-function
:
ease-in
}
60
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
10deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
10deg
);
opacity
:
1
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-5deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-5deg
)
}
100
%
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)
}
}
@keyframes
flipInY
{
0
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
-webkit-transition-timing-function
:
ease-in
;
transition-timing-function
:
ease-in
;
opacity
:
0
}
40
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-20deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-20deg
);
-webkit-transition-timing-function
:
ease-in
;
transition-timing-function
:
ease-in
}
60
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
10deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
10deg
);
opacity
:
1
}
80
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-5deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-5deg
)
}
100
%
{
-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
)
rotate3d
(
1
,
0
,
0
,
-20deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
-20deg
);
opacity
:
1
}
100
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
opacity
:
0
}
}
@keyframes
flipOutX
{
0
%
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)
}
30
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
-20deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
-20deg
);
opacity
:
1
}
100
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
opacity
:
0
}
}
.flipOutX
{
-webkit-animation-name
:
flipOutX
;
animation-name
:
flipOutX
;
-webkit-animation-duration
:
.75s
;
animation-duration
:
.75s
;
-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
)
rotate3d
(
0
,
1
,
0
,
-15deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-15deg
);
opacity
:
1
}
100
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
opacity
:
0
}
}
@keyframes
flipOutY
{
0
%
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
)
}
30
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-15deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
-15deg
);
opacity
:
1
}
100
%
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
opacity
:
0
}
}
.flipOutY
{
-webkit-backface-visibility
:
visible
!important
;
backface-visibility
:
visible
!important
;
-webkit-animation-name
:
flipOutY
;
animation-name
:
flipOutY
;
-webkit-animation-duration
:
.75s
;
animation-duration
:
.75s
}
@-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
);
opacity
:
1
}
100
%
{
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
}
}
@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
);
opacity
:
1
}
100
%
{
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
}
}
.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
}
100
%
{
-webkit-transform
:
translate3d
(
100%
,
0
,
0
)
skewX
(
30deg
);
transform
:
translate3d
(
100%
,
0
,
0
)
skewX
(
30deg
);
opacity
:
0
}
}
@keyframes
lightSpeedOut
{
0
%
{
opacity
:
1
}
100
%
{
-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
:
rotate3d
(
0
,
0
,
1
,
-200deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-200deg
);
opacity
:
0
}
100
%
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
}
}
@keyframes
rotateIn
{
0
%
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-200deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-200deg
);
opacity
:
0
}
100
%
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
none
;
transform
:
none
;
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
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
opacity
:
0
}
100
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
}
}
@keyframes
rotateInDownLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
opacity
:
0
}
100
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
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
:
rotate3d
(
0
,
0
,
1
,
45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
opacity
:
0
}
100
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
}
}
@keyframes
rotateInDownRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
opacity
:
0
}
100
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
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
:
rotate3d
(
0
,
0
,
1
,
45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
opacity
:
0
}
100
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
}
}
@keyframes
rotateInUpLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
opacity
:
0
}
100
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
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
:
rotate3d
(
0
,
0
,
1
,
-90deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-90deg
);
opacity
:
0
}
100
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
}
}
@keyframes
rotateInUpRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-90deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-90deg
);
opacity
:
0
}
100
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
}
}
.rotateInUpRight
{
-webkit-animation-name
:
rotateInUpRight
;
animation-name
:
rotateInUpRight
}
@-webkit-keyframes
rotateOut
{
0
%
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
opacity
:
1
}
100
%
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
200deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
200deg
);
opacity
:
0
}
}
@keyframes
rotateOut
{
0
%
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
opacity
:
1
}
100
%
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
200deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
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
}
100
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
opacity
:
0
}
}
@keyframes
rotateOutDownLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
opacity
:
1
}
100
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
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
}
100
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
opacity
:
0
}
}
@keyframes
rotateOutDownRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
opacity
:
1
}
100
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-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
}
100
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
opacity
:
0
}
}
@keyframes
rotateOutUpLeft
{
0
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
opacity
:
1
}
100
%
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-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
}
100
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
90deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
90deg
);
opacity
:
0
}
}
@keyframes
rotateOutUpRight
{
0
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
opacity
:
1
}
100
%
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
90deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
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
:
rotate3d
(
0
,
0
,
1
,
80deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
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
:
rotate3d
(
0
,
0
,
1
,
60deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
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
}
100
%
{
-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
:
rotate3d
(
0
,
0
,
1
,
80deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
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
:
rotate3d
(
0
,
0
,
1
,
60deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
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
}
100
%
{
-webkit-transform
:
translate3d
(
0
,
700px
,
0
);
transform
:
translate3d
(
0
,
700px
,
0
);
opacity
:
0
}
}
.hinge
{
-webkit-animation-name
:
hinge
;
animation-name
:
hinge
}
@-webkit-keyframes
rollIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-120deg
);
transform
:
translate3d
(
-100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-120deg
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
@keyframes
rollIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-120deg
);
transform
:
translate3d
(
-100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-120deg
)
}
100
%
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
}
}
.rollIn
{
-webkit-animation-name
:
rollIn
;
animation-name
:
rollIn
}
@-webkit-keyframes
rollOut
{
0
%
{
opacity
:
1
}
100
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
120deg
);
transform
:
translate3d
(
100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
120deg
)
}
}
@keyframes
rollOut
{
0
%
{
opacity
:
1
}
100
%
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
120deg
);
transform
:
translate3d
(
100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
opacity
:
0
}
}
@keyframes
zoomOut
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)
}
100
%
{
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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.55
,
.055
,
.675
,
.19
)
}
100
%
{
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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.55
,
.055
,
.675
,
.19
)
}
100
%
{
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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.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
)
}
100
%
{
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
)
}
100
%
{
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
)
}
100
%
{
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
)
}
100
%
{
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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.55
,
.055
,
.675
,
.19
)
}
100
%
{
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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.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
(
0.55
,
.055
,
.675
,
.19
);
animation-timing-function
:
cubic-bezier
(
0.55
,
.055
,
.675
,
.19
)
}
100
%
{
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
(
0.175
,
.885
,
.32
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
.885
,
.32
,
1
)
}
}
.zoomOutUp
{
-webkit-animation-name
:
zoomOutUp
;
animation-name
:
zoomOutUp
}
@-webkit-keyframes
slideInDown
{
0
%
{
-webkit-transform
:
translateY
(
-100%
);
transform
:
translateY
(
-100%
);
visibility
:
visible
}
100
%
{
-webkit-transform
:
translateY
(
0
);
transform
:
translateY
(
0
)
}
}
@keyframes
slideInDown
{
0
%
{
-webkit-transform
:
translateY
(
-100%
);
transform
:
translateY
(
-100%
);
visibility
:
visible
}
100
%
{
-webkit-transform
:
translateY
(
0
);
transform
:
translateY
(
0
)
}
}
.slideInDown
{
-webkit-animation-name
:
slideInDown
;
animation-name
:
slideInDown
}
@-webkit-keyframes
slideInLeft
{
0
%
{
-webkit-transform
:
translateX
(
-100%
);
transform
:
translateX
(
-100%
);
visibility
:
visible
}
100
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
)
}
}
@keyframes
slideInLeft
{
0
%
{
-webkit-transform
:
translateX
(
-100%
);
transform
:
translateX
(
-100%
);
visibility
:
visible
}
100
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
)
}
}
.slideInLeft
{
-webkit-animation-name
:
slideInLeft
;
animation-name
:
slideInLeft
}
@-webkit-keyframes
slideInRight
{
0
%
{
-webkit-transform
:
translateX
(
100%
);
transform
:
translateX
(
100%
);
visibility
:
visible
}
100
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
)
}
}
@keyframes
slideInRight
{
0
%
{
-webkit-transform
:
translateX
(
100%
);
transform
:
translateX
(
100%
);
visibility
:
visible
}
100
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
)
}
}
.slideInRight
{
-webkit-animation-name
:
slideInRight
;
animation-name
:
slideInRight
}
@-webkit-keyframes
slideInUp
{
0
%
{
-webkit-transform
:
translateY
(
100%
);
transform
:
translateY
(
100%
);
visibility
:
visible
}
100
%
{
-webkit-transform
:
translateY
(
0
);
transform
:
translateY
(
0
)
}
}
@keyframes
slideInUp
{
0
%
{
-webkit-transform
:
translateY
(
100%
);
transform
:
translateY
(
100%
);
visibility
:
visible
}
100
%
{
-webkit-transform
:
translateY
(
0
);
transform
:
translateY
(
0
)
}
}
.slideInUp
{
-webkit-animation-name
:
slideInUp
;
animation-name
:
slideInUp
}
@-webkit-keyframes
slideOutDown
{
0
%
{
-webkit-transform
:
translateY
(
0
);
transform
:
translateY
(
0
)
}
100
%
{
visibility
:
hidden
;
-webkit-transform
:
translateY
(
100%
);
transform
:
translateY
(
100%
)
}
}
@keyframes
slideOutDown
{
0
%
{
-webkit-transform
:
translateY
(
0
);
transform
:
translateY
(
0
)
}
100
%
{
visibility
:
hidden
;
-webkit-transform
:
translateY
(
100%
);
transform
:
translateY
(
100%
)
}
}
.slideOutDown
{
-webkit-animation-name
:
slideOutDown
;
animation-name
:
slideOutDown
}
@-webkit-keyframes
slideOutLeft
{
0
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
)
}
100
%
{
visibility
:
hidden
;
-webkit-transform
:
translateX
(
-100%
);
transform
:
translateX
(
-100%
)
}
}
@keyframes
slideOutLeft
{
0
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
)
}
100
%
{
visibility
:
hidden
;
-webkit-transform
:
translateX
(
-100%
);
transform
:
translateX
(
-100%
)
}
}
.slideOutLeft
{
-webkit-animation-name
:
slideOutLeft
;
animation-name
:
slideOutLeft
}
@-webkit-keyframes
slideOutRight
{
0
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
)
}
100
%
{
visibility
:
hidden
;
-webkit-transform
:
translateX
(
100%
);
transform
:
translateX
(
100%
)
}
}
@keyframes
slideOutRight
{
0
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
)
}
100
%
{
visibility
:
hidden
;
-webkit-transform
:
translateX
(
100%
);
transform
:
translateX
(
100%
)
}
}
.slideOutRight
{
-webkit-animation-name
:
slideOutRight
;
animation-name
:
slideOutRight
}
@-webkit-keyframes
slideOutUp
{
0
%
{
-webkit-transform
:
translateY
(
0
);
transform
:
translateY
(
0
)
}
100
%
{
visibility
:
hidden
;
-webkit-transform
:
translateY
(
-100%
);
transform
:
translateY
(
-100%
)
}
}
@keyframes
slideOutUp
{
0
%
{
-webkit-transform
:
translateY
(
0
);
transform
:
translateY
(
0
)
}
100
%
{
visibility
:
hidden
;
-webkit-transform
:
translateY
(
-100%
);
transform
:
translateY
(
-100%
)
}
}
.slideOutUp
{
-webkit-animation-name
:
slideOutUp
;
animation-name
:
slideOutUp
}
.zhuan
{
animation
:
zhuan
5s
infinite
;
-webkit-animation
:
zhuan
5s
infinite
;
/*Safari and Chrome*/
}
@-webkit-keyframes
zhuan
{
0
%
{
-webkit-transform
:
rotate
(
0deg
);
transform
:
rotate
(
0deg
)}
100
%
{
-webkit-transform
:
rotate
(
360deg
);
transform
:
rotate
(
360deg
)}
}
@-moz-keyframes
zhuan
{
0
%
{
-webkit-transform
:
rotate
(
0deg
);
transform
:
rotate
(
0deg
)}
100
%
{
-webkit-transform
:
rotate
(
360deg
);
transform
:
rotate
(
360deg
)}
}
@keyframes
zhuan
{
0
%
{
-webkit-transform
:
rotate
(
0deg
);
transform
:
rotate
(
0deg
)}
100
%
{
-webkit-transform
:
rotate
(
360deg
);
transform
:
rotate
(
360deg
)}
}
html/yearPage.html
0 → 100644
View file @
77a6bb37
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"
/>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<meta
name=
"screen-orientation"
content=
"portrait"
>
</meta>
<meta
name=
"x5-orientation"
content=
"portrait"
>
</meta>
</meta>
<meta
name=
"x5-orientation"
content=
"portrait"
>
</meta>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<style>
.zeze
{
display
:
flex
;
flex-wrap
:
wrap
;
}
.zeze
div
{
width
:
100px
;
height
:
100px
;
background-color
:
#000
;
color
:
white
;
margin
:
100px
;
font-size
:
14px
;
text-align
:
center
;
line-height
:
50px
;
}
</style>
<link
rel=
"shortcut icon"
href=
"../images/favicon.ico"
type=
"image/x-icon"
/>
<link
rel=
"stylesheet"
href=
"../css/cssReset.css"
>
<link
rel=
"stylesheet"
href=
"../css/animate.css"
>
<title>
活动列表
</title>
</head>
<body>
<div
class=
"zeze"
>
<div
class=
"animated shake"
>
左右抖动 shake
</div>
<div
class=
"animated swing"
>
广告牌左右晃动 swing
</div>
<div
class=
"animated pulse"
>
呼吸 放大 pulse
</div>
<div
class=
"animated rubberBand"
>
左右 拉扯 弹弹弹 rubberBand
</div>
<div
class=
"animated flash"
>
闪烁 flash
</div>
<div
class=
"animated bounce"
>
落下跳动 bounce
</div>
<div
class=
"animated tada"
>
放大加抖动 tada
</div>
<div
class=
"animated wobble"
>
有弧度的左右晃动 wobble
</div>
<div
class=
"animated bounceIn"
>
放大加 闪现 bounceIn
</div>
<div
class=
"animated bounceInDown"
>
上边出来 左右弹两下 bounceInDown
</div>
<div
class=
"animated bounceInLeft"
>
左边出来 上下弹两下 bounceInLeft
</div>
<div
class=
"animated bounceInRight"
>
右边出来 上下弹两下 bounceInRight
</div>
<div
class=
"animated bounceInUp"
>
下边出来 上下弹两下 bounceInUp
</div>
<div
class=
"animated bounceOut"
>
闪两下原地消失 bounceOut
</div>
<div
class=
"animated bounceOutDown"
>
闪两下下掉消失 bounceOut
</div>
<div
class=
"animated bounceOutLeft"
>
闪两下左消失 bounceOutLeft
</div>
<div
class=
"animated bounceOutRight"
>
闪两下右消失 bounceOutRight
</div>
<div
class=
"animated bounceOutUp"
>
闪两下上消失 bounceOutUp
</div>
<div
class=
"animated fadeIn"
>
淡入 fadeIn
</div>
<div
class=
"animated fadeInDown"
>
掉下来淡入 fadeInDown
</div>
<div
class=
"animated fadeInDownBig"
>
掉下来淡入快 fadeInDownBig
</div>
<div
class=
"animated fadeInLeft"
>
左边淡入 fadeInLeft
</div>
<div
class=
"animated fadeInLeftBig"
>
左边淡入快 fadeInLeftBig
</div>
<div
class=
"animated fadeInRight"
>
右边淡入 fadeInRight
</div>
<div
class=
"animated fadeInRightBig"
>
右边淡入快 fadeInRightBig
</div>
<div
class=
"animated fadeInUp"
>
上来淡入 fadeInUp
</div>
<div
class=
"animated fadeInUpBig"
>
上来淡入 fadeInUpBig
</div>
<div
class=
"animated fadeOut"
>
淡出 fadeOut
</div>
<div
class=
"animated flipInX"
>
X旋转 flipInX
</div>
<div
class=
"animated flipInY"
>
Y旋转 flipInY
</div>
<div
class=
"animated lightSpeedIn"
>
右边歪头进来 lightSpeedIn
</div>
<div
class=
"animated lightSpeedOut"
>
右边歪头出去 lightSpeedOut
</div>
<div
class=
"animated rotateIn"
>
旋转进来 rotateIn
</div>
<div
class=
"animated rotateInDownLeft"
>
左边旋转进来 rotateInDownLeft
</div>
<div
class=
"animated rotateInDownRight"
>
右边旋转进来 rotateInDownRight
</div>
<div
class=
"animated rotateInUpLeft"
>
下边旋转进来 rotateInUpLeft
</div>
<div
class=
"animated rotateInUpRight"
>
下边旋转进来 rotateInUpRight
</div>
<div
class=
"animated rotateOut"
>
旋转出去 rotateOut
</div>
<div
class=
"animated hinge"
>
吊牌掉了 hinge
</div>
<div
class=
"animated rollIn"
>
左边滚进来 rollIn
</div>
<div
class=
"animated rollOut"
>
滚出去 rollOut
</div>
<div
class=
"animated zoomIn"
>
缩放进来 zoomIn
</div>
<div
class=
"animated zoomInDown"
>
缩放掉进来 zoomInDown
</div>
<div
class=
"animated zoomInLeft"
>
左边缩放掉进来 zoomInLeft
</div>
<div
class=
"animated zoomInRight"
>
右边缩放掉进来 zoomInRight
</div>
<div
class=
"animated zoomInUp"
>
下面缩放掉进来 zoomInUp
</div>
<div
class=
"animated zoomOut"
>
缩出去 zoomOut
</div>
<div
class=
"animated slideInDown"
>
平滑掉下 slideInDown
</div>
<div
class=
"animated slideInLeft"
>
平滑左边进来 slideInLeft
</div>
<div
class=
"animated slideInRight"
>
平滑右边进来 slideInRight
</div>
<div
class=
"animated slideInUp"
>
平滑下面进来 slideInUp
</div>
<div
class=
"animated slideOutDown"
>
平滑出去 slideOutDown
</div>
<div
class=
"zhuan"
>
转
</div>
<div
class=
"animated shakeR"
>
左右一直晃动
</div>
</div>
<script
type=
"text/javascript"
src=
"../js/jquery-1.10.2.js"
></script>
<script
type=
"text/javascript"
src=
"../js/md5.js"
></script>
<script
type=
"text/javascript"
src=
"../js/layer/layer.js"
></script>
<script
type=
"text/javascript"
src=
"../js/mian.js"
></script>
<script
type=
"text/javascript"
src=
"../js/autosize.js"
></script>
<script
type=
"text/javascript"
src=
"../js/leftTime.min.js"
></script>
<script>
$
.
ajax
({
type
:
"POST"
,
url
:
`
${
getApiUrl
().
urlPost
}
`
,
contentType
:
"application/json"
,
data
:
getAjaxData
(
"b2b_get_GetCustomerInfo"
,
{}),
async
:
false
,
success
:
function
(
res
)
{
if
(
res
.
resultCode
===
1
)
{
}
},
error
:
function
(
res
)
{
}
});
</script>
</body>
</html>
\ 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
