Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
jinli gu
MCMS
Commits
1f093087
Commit
1f093087
authored
Feb 16, 2019
by
sunxin
Browse files
默认模板
parent
178009f4
Changes
154
Show whitespace changes
Inline
Side-by-side
src/main/webapp/templets/1/default/about.htm
0 → 100644
View file @
1f093087
<!DOCTYPE html>
<html>
<head>
<
#include
"
head-file.htm
"
/>
</head>
<body>
<
#include
"
head.htm
"
/>
<div
class=
"ms-banner"
style=
"background:url({ms:global.host/}/{ms:global.style/}images/about_us.jpg) no-repeat center;"
>
<p
class=
"banner_tit_about animated fadeInLeft"
>
关于我们
</p>
<p
class=
"banner_tit_about_des animated fadeInRight"
>
About us
</p>
</div>
<div
class=
"ms-content-about"
>
<div
class=
"ms-content-main"
>
<
#include
"
menu-left.htm
"
/>
<div
class=
"ms-content-right"
>
<div
class=
"ms-content-right-position"
>
<a
href=
"{ms:global.host/}"
>
首页
</a>
<span>
>
</span>
<a
href=
"{ms:field.typelink/}"
>
{ms:field.typetitle/}
</a>
</div>
<div
class=
"ms-content-right-main"
>
<div
class=
"ms-content-right-main-title"
>
{ms:field.title/}
</div>
<div
class=
"ms-content-right-main-content"
>
{ms:field.content/}
</div>
</div>
</div>
</div>
</div>
<
#include
"
footer.htm
"
/>
</body>
</html>
\ No newline at end of file
src/main/webapp/templets/1/default/advice.htm
0 → 100644
View file @
1f093087
<!DOCTYPE html>
<html>
<head>
<
#include
"
head-file.htm
"
/>
</head>
<body>
<
#include
"
head.htm
"
/>
<div
class=
"ms-banner"
style=
"background:url({ms:global.host/}/{ms:global.style/}images/talk_online.jpeg) no-repeat center;"
>
<p
class=
"banner_tit_other animated fadeInLeft"
>
在线留言
</p>
<p
class=
"banner_tit_other_des animated fadeInRight"
>
Talk online
</p>
</div>
<div
class=
"ms-content-advice"
>
<div
class=
"ms-content-form-background"
>
<form
class=
"ms-content-form"
method=
"post"
id=
"postForm"
>
<input
class=
"ms-content-form-name"
type=
"text"
name=
"name"
placeholder=
"姓名"
>
<input
class=
"ms-content-form-phone"
type=
"text"
name=
"phone"
placeholder=
"手机"
>
<textarea
class=
"ms-content-form-message"
name=
"content"
placeholder=
"留言"
></textarea>
<div
class=
"ms-login-button"
>
提交
</div>
</form>
</div>
</div>
<
#include
"
footer.htm
"
/>
</body>
</html>
<script>
/* 表单提交 */
var
flag
=
false
;
$
(
"
.ms-login-button
"
).
click
(
function
()
{
if
(
!
flag
)
{
$
.
ajax
({
type
:
"
POST
"
,
url
:
"
{ms:global.host/}/mdiy/diyForm/f2c131968438246e885e0feed7256dbc.do
"
,
data
:
$
(
"
#postForm
"
).
serialize
(),
success
:
function
(
msg
)
{
flag
=
true
;
alert
(
"
提交成功
"
);
location
.
reload
();
}
});
}
else
{
alert
(
"
您已经提交过了!
"
);
}
})
/* 表单验证 */
function
verification
()
{
if
(
$
(
'
input[name="name"]
'
).
val
().
length
>
0
&&
$
(
'
input[name="phone"]
'
).
val
().
length
>
0
&&
$
(
'
.ms-content-form-message
'
).
val
().
length
>
0
)
{
$
(
'
.ms-login-button
'
).
css
(
"
background-color
"
,
"
#009aff
"
);
$
(
'
.ms-login-button
'
).
css
(
"
pointer-events
"
,
'
visible
'
);
$
(
'
.ms-login-button
'
).
css
(
"
color
"
,
"
#fff
"
);
}
else
{
$
(
'
.ms-login-button
'
).
css
(
"
background-color
"
,
"
#fafafa
"
);
$
(
'
.ms-login-button
'
).
css
(
'
pointer-events
'
,
"
none
"
);
$
(
'
.ms-login-button
'
).
css
(
"
color
"
,
"
#ddd
"
);
}
}
$
(
'
input[name="name"]
'
).
keyup
(
function
()
{
verification
();
})
$
(
'
input[name="phone"]
'
).
keyup
(
function
()
{
verification
();
})
$
(
'
.ms-content-form-message
'
).
keyup
(
function
()
{
verification
();
})
</script>
\ No newline at end of file
src/main/webapp/templets/1/default/case-list.htm
0 → 100644
View file @
1f093087
<!DOCTYPE html>
<html>
<head>
<
#include
"
head-file.htm
"
/>
</head>
<body>
<
#include
"
head.htm
"
/>
<div
class=
"ms-banner"
style=
"background:url({ms:global.host/}/{ms:global.style/}images/00.png) no-repeat center;"
>
<p
class=
"banner_tit_other animated fadeInLeft"
>
案
例
</p>
<p
class=
"banner_tit_other_des animated fadeInRight"
>
Case list
</p>
</div>
<div
class=
"ms-content-case"
>
<div
class=
"ms-content-main"
>
{ms:arclist size=6 ispaging=true}
<div
class=
"ms-content-main-case"
>
<div
class=
"ms-content-main-case-img"
>
<img
src=
"{ms:global.host/}[field.litpic/]"
>
</div>
<div
class=
"ms-content-main-case-explain"
>
<div
class=
"ms-content-main-case-title"
>
[field.title/]
</div>
<div
class=
"ms-content-main-case-content"
>
<p
class=
"ms-content-main-case-written"
>
[field.content/]
</p>
<!-- <p class="ms-content-main-case-QRcode">
<img src="./images/1471918025445.png">
</p> -->
</div>
<div
class=
"ms-content-main-case-click"
>
<a
target=
"_blank"
href=
"[field.source/]"
>
点击查看
</a>
</div>
</div>
</div>
{/ms:arclist}
</div>
</div>
<
#include
"
footer.htm
"
/>
</body>
</html>
<script
type=
"text/javascript"
>
$
(
function
()
{
$
(
'
.ms-content-main-case
'
).
hover
(
function
()
{
$
(
this
).
find
(
'
.ms-content-main-case-explain
'
).
toggle
();
});
});
</script>
\ No newline at end of file
src/main/webapp/templets/1/default/contact.htm
0 → 100644
View file @
1f093087
<!DOCTYPE html>
<html>
<head>
<
#include
"
head-file.htm
"
/>
</head>
<body>
<
#include
"
head.htm
"
/>
<div
class=
"ms-banner"
style=
"background:url({ms:global.host/}/{ms:global.style/}/images/contact_us.jpeg) no-repeat center;"
>
<p
class=
"banner_tit_other animated fadeInLeft"
>
联系我们
</p>
<p
class=
"banner_tit_other_des animated fadeInRight"
>
Contact us
</p>
</div>
<div
class=
"ms-content-about"
>
<div
class=
"ms-content-main"
>
<
#include
"
menu-left.htm
"
/>
<div
class=
"ms-content-right"
>
<div
class=
"ms-content-right-position"
>
<a
href=
"{ms:global.host/}"
>
首页
</a>
<span>
>
</span>
<a
href=
"{ms:field.typelink/}"
>
{ms:field.typetitle/}
</a>
</div>
<div
class=
"ms-content-right-main"
>
<div
class=
"ms-content-right-main-title"
>
联系我们
</div>
<div
class=
"ms-content-right-main-content"
>
<!-- {ms:field.content/} -->
<style
type=
"text/css"
>
.BMap_Marker
img
{
width
:
100%
;
height
:
100%
;
}
html
,
body
{
margin
:
0
;
padding
:
0
;}
.iw_poi_title
{
color
:
#CC5522
;
font-size
:
14px
;
font-weight
:
bold
;
overflow
:
hidden
;
padding-right
:
13px
;
white-space
:
nowrap
}
.iw_poi_content
{
font
:
12px
arial
,
sans-serif
;
overflow
:
visible
;
padding-top
:
4px
;
white-space
:
-moz-pre-wrap
;
word-wrap
:
break-word
}
</style>
<script
type=
"text/javascript"
src=
"http://api.map.baidu.com/api?key=&v=1.1&services=true"
></script>
<body>
<!--百度地图容器-->
<div
style=
"width:100%;height:550px;border:#ccc solid 1px;"
id=
"dituContent"
></div>
</body>
<script
type=
"text/javascript"
>
//创建和初始化地图函数:
function
initMap
(){
createMap
();
//创建地图
setMapEvent
();
//设置地图事件
addMapControl
();
//向地图添加控件
addMarker
();
//向地图中添加marker
}
//创建地图函数:
function
createMap
(){
var
map
=
new
BMap
.
Map
(
"
dituContent
"
);
//在百度地图容器中创建一个地图
var
point
=
new
BMap
.
Point
(
116.737158
,
29.153633
);
//定义一个中心点坐标
map
.
centerAndZoom
(
point
,
9
);
//设定地图的中心点和坐标并将地图显示在地图容器中
window
.
map
=
map
;
//将map变量存储在全局
}
//地图事件设置函数:
function
setMapEvent
(){
map
.
enableDragging
();
//启用地图拖拽事件,默认启用(可不写)
map
.
enableScrollWheelZoom
();
//启用地图滚轮放大缩小
map
.
enableDoubleClickZoom
();
//启用鼠标双击放大,默认启用(可不写)
map
.
enableKeyboard
();
//启用键盘上下左右键移动地图
}
//地图控件添加函数:
function
addMapControl
(){
//向地图中添加缩放控件
var
ctrl_nav
=
new
BMap
.
NavigationControl
({
anchor
:
BMAP_ANCHOR_TOP_LEFT
,
type
:
BMAP_NAVIGATION_CONTROL_LARGE
});
map
.
addControl
(
ctrl_nav
);
//向地图中添加缩略图控件
var
ctrl_ove
=
new
BMap
.
OverviewMapControl
({
anchor
:
BMAP_ANCHOR_BOTTOM_RIGHT
,
isOpen
:
1
});
map
.
addControl
(
ctrl_ove
);
//向地图中添加比例尺控件
var
ctrl_sca
=
new
BMap
.
ScaleControl
({
anchor
:
BMAP_ANCHOR_BOTTOM_LEFT
});
map
.
addControl
(
ctrl_sca
);
}
//标注点数组
var
markerArr
=
[{
title
:
"
铭飞科技(景德镇)有限公司
"
,
content
:
"
江西省景德镇市昌江区 枫林佳苑 15栋A区 三单元 302室
"
,
point
:
"
117.187869|29.282949
"
,
isOpen
:
0
,
icon
:{
w
:
21
,
h
:
21
,
l
:
0
,
t
:
0
,
x
:
6
,
lb
:
5
}}
,{
title
:
"
铭飞科技(南昌)办事处
"
,
content
:
"
江西省南昌市青山湖区创新一路 绿地新都会(西门) 12栋2单元901室
"
,
point
:
"
116.003117|28.683521
"
,
isOpen
:
0
,
icon
:{
w
:
21
,
h
:
21
,
l
:
0
,
t
:
0
,
x
:
6
,
lb
:
5
}}
];
//创建marker
function
addMarker
(){
for
(
var
i
=
0
;
i
<
markerArr
.
length
;
i
++
){
var
json
=
markerArr
[
i
];
var
p0
=
json
.
point
.
split
(
"
|
"
)[
0
];
var
p1
=
json
.
point
.
split
(
"
|
"
)[
1
];
var
point
=
new
BMap
.
Point
(
p0
,
p1
);
var
iconImg
=
createIcon
(
json
.
icon
);
var
marker
=
new
BMap
.
Marker
(
point
,{
icon
:
iconImg
});
var
iw
=
createInfoWindow
(
i
);
var
label
=
new
BMap
.
Label
(
json
.
title
,{
"
offset
"
:
new
BMap
.
Size
(
json
.
icon
.
lb
-
json
.
icon
.
x
+
10
,
-
20
)});
marker
.
setLabel
(
label
);
map
.
addOverlay
(
marker
);
label
.
setStyle
({
borderColor
:
"
#808080
"
,
color
:
"
#333
"
,
cursor
:
"
pointer
"
});
(
function
(){
var
index
=
i
;
var
_iw
=
createInfoWindow
(
i
);
var
_marker
=
marker
;
_marker
.
addEventListener
(
"
click
"
,
function
(){
this
.
openInfoWindow
(
_iw
);
});
_iw
.
addEventListener
(
"
open
"
,
function
(){
_marker
.
getLabel
().
hide
();
})
_iw
.
addEventListener
(
"
close
"
,
function
(){
_marker
.
getLabel
().
show
();
})
label
.
addEventListener
(
"
click
"
,
function
(){
_marker
.
openInfoWindow
(
_iw
);
})
if
(
!!
json
.
isOpen
){
label
.
hide
();
_marker
.
openInfoWindow
(
_iw
);
}
})()
}
}
//创建InfoWindow
function
createInfoWindow
(
i
){
var
json
=
markerArr
[
i
];
var
iw
=
new
BMap
.
InfoWindow
(
"
<b class='iw_poi_title' title='
"
+
json
.
title
+
"
'>
"
+
json
.
title
+
"
</b><div class='iw_poi_content'>
"
+
json
.
content
+
"
</div>
"
);
return
iw
;
}
//创建一个Icon
function
createIcon
(
json
){
var
icon
=
new
BMap
.
Icon
(
"
{ms:global.host/}/{ms:global.style/}/images/img-2.png
"
,
new
BMap
.
Size
(
json
.
w
,
json
.
h
),{
imageOffset
:
new
BMap
.
Size
(
-
json
.
l
,
-
json
.
t
),
infoWindowOffset
:
new
BMap
.
Size
(
json
.
lb
+
5
,
1
),
offset
:
new
BMap
.
Size
(
json
.
x
,
json
.
h
)})
return
icon
;
}
initMap
();
//创建和初始化地图
</script>
</div>
</div>
</div>
</div>
</div>
<
#include
"
footer.htm
"
/>
</body>
</html>
\ No newline at end of file
src/main/webapp/templets/1/default/css/animate.css
0 → 100644
View file @
1f093087
@charset
"UTF-8"
;
/*!
* animate.css -http://daneden.me/animate
* Version - 3.5.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2016 Daniel Eden
*/
.banner_tit
{
margin-top
:
85px
;
}
.banner_tit
,
.banner_des
,
.banner_tit_about
,
.banner_tit_about_des
,
.banner_tit_other
,
.banner_tit_other_des
{
text-align
:
center
;
color
:
#fff
;
font-size
:
68px
;
position
:
relative
;
font-family
:
"Microsoft YaHei"
,
微软雅黑
,
"MicrosoftJhengHei"
,
华文细黑
,
STHeiti
,
MingLiu
;
}
.banner_des
{
font-size
:
35px
;
}
.banner_tit_about
,
.banner_tit_about_des
{
text-align
:
left
;
font-size
:
44px
;
padding-top
:
125px
;
padding-left
:
27%
;
}
.banner_tit_about_des
,
.banner_tit_other_des
{
font-size
:
30px
;
font-family
:
"SimSun"
;
padding-top
:
0px
;
}
.banner_tit_other
{
padding-top
:
125px
;
font-size
:
44px
;
}
.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
;
}
.animated.flipOutX
,
.animated.flipOutY
,
.animated.bounceIn
,
.animated.bounceOut
{
-webkit-animation-duration
:
.75s
;
animation-duration
:
.75s
;
}
@-webkit-keyframes
bounce
{
from
,
20
%,
53
%,
80
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
40
%,
43
%
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.755
,
0.050
,
0.855
,
0.060
);
animation-timing-function
:
cubic-bezier
(
0.755
,
0.050
,
0.855
,
0.060
);
-webkit-transform
:
translate3d
(
0
,
-30px
,
0
);
transform
:
translate3d
(
0
,
-30px
,
0
);
}
70
%
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.755
,
0.050
,
0.855
,
0.060
);
animation-timing-function
:
cubic-bezier
(
0.755
,
0.050
,
0.855
,
0.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
{
from
,
20
%,
53
%,
80
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
40
%,
43
%
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.755
,
0.050
,
0.855
,
0.060
);
animation-timing-function
:
cubic-bezier
(
0.755
,
0.050
,
0.855
,
0.060
);
-webkit-transform
:
translate3d
(
0
,
-30px
,
0
);
transform
:
translate3d
(
0
,
-30px
,
0
);
}
70
%
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.755
,
0.050
,
0.855
,
0.060
);
animation-timing-function
:
cubic-bezier
(
0.755
,
0.050
,
0.855
,
0.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
;
transform-origin
:
center
bottom
;
}
@-webkit-keyframes
flash
{
from
,
50
%,
to
{
opacity
:
1
;
}
25
%,
75
%
{
opacity
:
0
;
}
}
@keyframes
flash
{
from
,
50
%,
to
{
opacity
:
1
;
}
25
%,
75
%
{
opacity
:
0
;
}
}
.flash
{
-webkit-animation-name
:
flash
;
animation-name
:
flash
;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes
pulse
{
from
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
50
%
{
-webkit-transform
:
scale3d
(
1.05
,
1.05
,
1.05
);
transform
:
scale3d
(
1.05
,
1.05
,
1.05
);
}
to
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
}
@keyframes
pulse
{
from
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
50
%
{
-webkit-transform
:
scale3d
(
1.05
,
1.05
,
1.05
);
transform
:
scale3d
(
1.05
,
1.05
,
1.05
);
}
to
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
}
.pulse
{
-webkit-animation-name
:
pulse
;
animation-name
:
pulse
;
}
@-webkit-keyframes
rubberBand
{
from
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
30
%
{
-webkit-transform
:
scale3d
(
1.25
,
0.75
,
1
);
transform
:
scale3d
(
1.25
,
0.75
,
1
);
}
40
%
{
-webkit-transform
:
scale3d
(
0.75
,
1.25
,
1
);
transform
:
scale3d
(
0.75
,
1.25
,
1
);
}
50
%
{
-webkit-transform
:
scale3d
(
1.15
,
0.85
,
1
);
transform
:
scale3d
(
1.15
,
0.85
,
1
);
}
65
%
{
-webkit-transform
:
scale3d
(
.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
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
}
@keyframes
rubberBand
{
from
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
30
%
{
-webkit-transform
:
scale3d
(
1.25
,
0.75
,
1
);
transform
:
scale3d
(
1.25
,
0.75
,
1
);
}
40
%
{
-webkit-transform
:
scale3d
(
0.75
,
1.25
,
1
);
transform
:
scale3d
(
0.75
,
1.25
,
1
);
}
50
%
{
-webkit-transform
:
scale3d
(
1.15
,
0.85
,
1
);
transform
:
scale3d
(
1.15
,
0.85
,
1
);
}
65
%
{
-webkit-transform
:
scale3d
(
.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
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
}
.rubberBand
{
-webkit-animation-name
:
rubberBand
;
animation-name
:
rubberBand
;
}
@-webkit-keyframes
shake
{
from
,
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
10
%,
30
%,
50
%,
70
%,
90
%
{
-webkit-transform
:
translate3d
(
-10px
,
0
,
0
);
transform
:
translate3d
(
-10px
,
0
,
0
);
}
20
%,
40
%,
60
%,
80
%
{
-webkit-transform
:
translate3d
(
10px
,
0
,
0
);
transform
:
translate3d
(
10px
,
0
,
0
);
}
}
@keyframes
shake
{
from
,
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
10
%,
30
%,
50
%,
70
%,
90
%
{
-webkit-transform
:
translate3d
(
-10px
,
0
,
0
);
transform
:
translate3d
(
-10px
,
0
,
0
);
}
20
%,
40
%,
60
%,
80
%
{
-webkit-transform
:
translate3d
(
10px
,
0
,
0
);
transform
:
translate3d
(
10px
,
0
,
0
);
}
}
.shake
{
-webkit-animation-name
:
shake
;
animation-name
:
shake
;
}
@-webkit-keyframes
headShake
{
0
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
);
}
6
.
5
%
{
-webkit-transform
:
translateX
(
-6px
)
rotateY
(
-9deg
);
transform
:
translateX
(
-6px
)
rotateY
(
-9deg
);
}
18
.
5
%
{
-webkit-transform
:
translateX
(
5px
)
rotateY
(
7deg
);
transform
:
translateX
(
5px
)
rotateY
(
7deg
);
}
31
.
5
%
{
-webkit-transform
:
translateX
(
-3px
)
rotateY
(
-5deg
);
transform
:
translateX
(
-3px
)
rotateY
(
-5deg
);
}
43
.
5
%
{
-webkit-transform
:
translateX
(
2px
)
rotateY
(
3deg
);
transform
:
translateX
(
2px
)
rotateY
(
3deg
);
}
50
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
);
}
}
@keyframes
headShake
{
0
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
);
}
6
.
5
%
{
-webkit-transform
:
translateX
(
-6px
)
rotateY
(
-9deg
);
transform
:
translateX
(
-6px
)
rotateY
(
-9deg
);
}
18
.
5
%
{
-webkit-transform
:
translateX
(
5px
)
rotateY
(
7deg
);
transform
:
translateX
(
5px
)
rotateY
(
7deg
);
}
31
.
5
%
{
-webkit-transform
:
translateX
(
-3px
)
rotateY
(
-5deg
);
transform
:
translateX
(
-3px
)
rotateY
(
-5deg
);
}
43
.
5
%
{
-webkit-transform
:
translateX
(
2px
)
rotateY
(
3deg
);
transform
:
translateX
(
2px
)
rotateY
(
3deg
);
}
50
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
);
}
}
.headShake
{
-webkit-animation-timing-function
:
ease-in-out
;
animation-timing-function
:
ease-in-out
;
-webkit-animation-name
:
headShake
;
animation-name
:
headShake
;
}
@-webkit-keyframes
swing
{
20
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
15deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
15deg
);
}
40
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-10deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-10deg
);
}
60
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
5deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
5deg
);
}
80
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-5deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-5deg
);
}
to
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
0deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
0deg
);
}
}
@keyframes
swing
{
20
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
15deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
15deg
);
}
40
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-10deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-10deg
);
}
60
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
5deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
5deg
);
}
80
%
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-5deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-5deg
);
}
to
{
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
0deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
0deg
);
}
}
.swing
{
-webkit-transform-origin
:
top
center
;
transform-origin
:
top
center
;
-webkit-animation-name
:
swing
;
animation-name
:
swing
;
}
@-webkit-keyframes
tada
{
from
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
10
%,
20
%
{
-webkit-transform
:
scale3d
(
.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
);
}
to
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
}
@keyframes
tada
{
from
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
10
%,
20
%
{
-webkit-transform
:
scale3d
(
.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
);
}
to
{
-webkit-transform
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
}
.tada
{
-webkit-animation-name
:
tada
;
animation-name
:
tada
;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes
wobble
{
from
{
-webkit-transform
:
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
);
}
to
{
-webkit-transform
:
none
;
transform
:
none
;
}
}
@keyframes
wobble
{
from
{
-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
);
}
to
{
-webkit-transform
:
none
;
transform
:
none
;
}
}
.wobble
{
-webkit-animation-name
:
wobble
;
animation-name
:
wobble
;
}
@-webkit-keyframes
jello
{
from
,
11
.
1
%,
to
{
-webkit-transform
:
none
;
transform
:
none
;
}
22
.
2
%
{
-webkit-transform
:
skewX
(
-12.5deg
)
skewY
(
-12.5deg
);
transform
:
skewX
(
-12.5deg
)
skewY
(
-12.5deg
);
}
33
.
3
%
{
-webkit-transform
:
skewX
(
6.25deg
)
skewY
(
6.25deg
);
transform
:
skewX
(
6.25deg
)
skewY
(
6.25deg
);
}
44
.
4
%
{
-webkit-transform
:
skewX
(
-3.125deg
)
skewY
(
-3.125deg
);
transform
:
skewX
(
-3.125deg
)
skewY
(
-3.125deg
);
}
55
.
5
%
{
-webkit-transform
:
skewX
(
1.5625deg
)
skewY
(
1.5625deg
);
transform
:
skewX
(
1.5625deg
)
skewY
(
1.5625deg
);
}
66
.
6
%
{
-webkit-transform
:
skewX
(
-0.78125deg
)
skewY
(
-0.78125deg
);
transform
:
skewX
(
-0.78125deg
)
skewY
(
-0.78125deg
);
}
77
.
7
%
{
-webkit-transform
:
skewX
(
0.390625deg
)
skewY
(
0.390625deg
);
transform
:
skewX
(
0.390625deg
)
skewY
(
0.390625deg
);
}
88
.
8
%
{
-webkit-transform
:
skewX
(
-0.1953125deg
)
skewY
(
-0.1953125deg
);
transform
:
skewX
(
-0.1953125deg
)
skewY
(
-0.1953125deg
);
}
}
@keyframes
jello
{
from
,
11
.
1
%,
to
{
-webkit-transform
:
none
;
transform
:
none
;
}
22
.
2
%
{
-webkit-transform
:
skewX
(
-12.5deg
)
skewY
(
-12.5deg
);
transform
:
skewX
(
-12.5deg
)
skewY
(
-12.5deg
);
}
33
.
3
%
{
-webkit-transform
:
skewX
(
6.25deg
)
skewY
(
6.25deg
);
transform
:
skewX
(
6.25deg
)
skewY
(
6.25deg
);
}
44
.
4
%
{
-webkit-transform
:
skewX
(
-3.125deg
)
skewY
(
-3.125deg
);
transform
:
skewX
(
-3.125deg
)
skewY
(
-3.125deg
);
}
55
.
5
%
{
-webkit-transform
:
skewX
(
1.5625deg
)
skewY
(
1.5625deg
);
transform
:
skewX
(
1.5625deg
)
skewY
(
1.5625deg
);
}
66
.
6
%
{
-webkit-transform
:
skewX
(
-0.78125deg
)
skewY
(
-0.78125deg
);
transform
:
skewX
(
-0.78125deg
)
skewY
(
-0.78125deg
);
}
77
.
7
%
{
-webkit-transform
:
skewX
(
0.390625deg
)
skewY
(
0.390625deg
);
transform
:
skewX
(
0.390625deg
)
skewY
(
0.390625deg
);
}
88
.
8
%
{
-webkit-transform
:
skewX
(
-0.1953125deg
)
skewY
(
-0.1953125deg
);
transform
:
skewX
(
-0.1953125deg
)
skewY
(
-0.1953125deg
);
}
}
.jello
{
-webkit-animation-name
:
jello
;
animation-name
:
jello
;
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
}
@-webkit-keyframes
bounceIn
{
from
,
20
%,
40
%,
60
%,
80
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
}
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
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
}
@keyframes
bounceIn
{
from
,
20
%,
40
%,
60
%,
80
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
}
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
:
scale3d
(
1
,
1
,
1
);
transform
:
scale3d
(
1
,
1
,
1
);
}
}
.bounceIn
{
-webkit-animation-name
:
bounceIn
;
animation-name
:
bounceIn
;
}
@-webkit-keyframes
bounceInDown
{
from
,
60
%,
75
%,
90
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
}
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
:
none
;
transform
:
none
;
}
}
@keyframes
bounceInDown
{
from
,
60
%,
75
%,
90
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
}
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
:
none
;
transform
:
none
;
}
}
.bounceInDown
{
-webkit-animation-name
:
bounceInDown
;
animation-name
:
bounceInDown
;
}
@-webkit-keyframes
bounceInLeft
{
from
,
60
%,
75
%,
90
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
}
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
:
none
;
transform
:
none
;
}
}
@keyframes
bounceInLeft
{
from
,
60
%,
75
%,
90
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
}
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
:
none
;
transform
:
none
;
}
}
.bounceInLeft
{
-webkit-animation-name
:
bounceInLeft
;
animation-name
:
bounceInLeft
;
}
@-webkit-keyframes
bounceInRight
{
from
,
60
%,
75
%,
90
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
}
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
3000px
,
0
,
0
);
transform
:
translate3d
(
3000px
,
0
,
0
);
}
60
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
-25px
,
0
,
0
);
transform
:
translate3d
(
-25px
,
0
,
0
);
}
75
%
{
-webkit-transform
:
translate3d
(
10px
,
0
,
0
);
transform
:
translate3d
(
10px
,
0
,
0
);
}
90
%
{
-webkit-transform
:
translate3d
(
-5px
,
0
,
0
);
transform
:
translate3d
(
-5px
,
0
,
0
);
}
to
{
-webkit-transform
:
none
;
transform
:
none
;
}
}
@keyframes
bounceInRight
{
from
,
60
%,
75
%,
90
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
}
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
3000px
,
0
,
0
);
transform
:
translate3d
(
3000px
,
0
,
0
);
}
60
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
-25px
,
0
,
0
);
transform
:
translate3d
(
-25px
,
0
,
0
);
}
75
%
{
-webkit-transform
:
translate3d
(
10px
,
0
,
0
);
transform
:
translate3d
(
10px
,
0
,
0
);
}
90
%
{
-webkit-transform
:
translate3d
(
-5px
,
0
,
0
);
transform
:
translate3d
(
-5px
,
0
,
0
);
}
to
{
-webkit-transform
:
none
;
transform
:
none
;
}
}
.bounceInRight
{
-webkit-animation-name
:
bounceInRight
;
animation-name
:
bounceInRight
;
}
@-webkit-keyframes
bounceInUp
{
from
,
60
%,
75
%,
90
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
}
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
3000px
,
0
);
transform
:
translate3d
(
0
,
3000px
,
0
);
}
60
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
0
,
-20px
,
0
);
transform
:
translate3d
(
0
,
-20px
,
0
);
}
75
%
{
-webkit-transform
:
translate3d
(
0
,
10px
,
0
);
transform
:
translate3d
(
0
,
10px
,
0
);
}
90
%
{
-webkit-transform
:
translate3d
(
0
,
-5px
,
0
);
transform
:
translate3d
(
0
,
-5px
,
0
);
}
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
}
@keyframes
bounceInUp
{
from
,
60
%,
75
%,
90
%,
to
{
-webkit-animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
animation-timing-function
:
cubic-bezier
(
0.215
,
0.610
,
0.355
,
1.000
);
}
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
3000px
,
0
);
transform
:
translate3d
(
0
,
3000px
,
0
);
}
60
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
0
,
-20px
,
0
);
transform
:
translate3d
(
0
,
-20px
,
0
);
}
75
%
{
-webkit-transform
:
translate3d
(
0
,
10px
,
0
);
transform
:
translate3d
(
0
,
10px
,
0
);
}
90
%
{
-webkit-transform
:
translate3d
(
0
,
-5px
,
0
);
transform
:
translate3d
(
0
,
-5px
,
0
);
}
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
}
.bounceInUp
{
-webkit-animation-name
:
bounceInUp
;
animation-name
:
bounceInUp
;
}
@-webkit-keyframes
bounceOut
{
20
%
{
-webkit-transform
:
scale3d
(
.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-name
:
bounceOut
;
animation-name
:
bounceOut
;
}
@-webkit-keyframes
bounceOutDown
{
20
%
{
-webkit-transform
:
translate3d
(
0
,
10px
,
0
);
transform
:
translate3d
(
0
,
10px
,
0
);
}
40
%,
45
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
0
,
-20px
,
0
);
transform
:
translate3d
(
0
,
-20px
,
0
);
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
2000px
,
0
);
transform
:
translate3d
(
0
,
2000px
,
0
);
}
}
@keyframes
bounceOutDown
{
20
%
{
-webkit-transform
:
translate3d
(
0
,
10px
,
0
);
transform
:
translate3d
(
0
,
10px
,
0
);
}
40
%,
45
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
0
,
-20px
,
0
);
transform
:
translate3d
(
0
,
-20px
,
0
);
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
2000px
,
0
);
transform
:
translate3d
(
0
,
2000px
,
0
);
}
}
.bounceOutDown
{
-webkit-animation-name
:
bounceOutDown
;
animation-name
:
bounceOutDown
;
}
@-webkit-keyframes
bounceOutLeft
{
20
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
20px
,
0
,
0
);
transform
:
translate3d
(
20px
,
0
,
0
);
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-2000px
,
0
,
0
);
transform
:
translate3d
(
-2000px
,
0
,
0
);
}
}
@keyframes
bounceOutLeft
{
20
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
20px
,
0
,
0
);
transform
:
translate3d
(
20px
,
0
,
0
);
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-2000px
,
0
,
0
);
transform
:
translate3d
(
-2000px
,
0
,
0
);
}
}
.bounceOutLeft
{
-webkit-animation-name
:
bounceOutLeft
;
animation-name
:
bounceOutLeft
;
}
@-webkit-keyframes
bounceOutRight
{
20
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
-20px
,
0
,
0
);
transform
:
translate3d
(
-20px
,
0
,
0
);
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
2000px
,
0
,
0
);
transform
:
translate3d
(
2000px
,
0
,
0
);
}
}
@keyframes
bounceOutRight
{
20
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
-20px
,
0
,
0
);
transform
:
translate3d
(
-20px
,
0
,
0
);
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
2000px
,
0
,
0
);
transform
:
translate3d
(
2000px
,
0
,
0
);
}
}
.bounceOutRight
{
-webkit-animation-name
:
bounceOutRight
;
animation-name
:
bounceOutRight
;
}
@-webkit-keyframes
bounceOutUp
{
20
%
{
-webkit-transform
:
translate3d
(
0
,
-10px
,
0
);
transform
:
translate3d
(
0
,
-10px
,
0
);
}
40
%,
45
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
0
,
20px
,
0
);
transform
:
translate3d
(
0
,
20px
,
0
);
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-2000px
,
0
);
transform
:
translate3d
(
0
,
-2000px
,
0
);
}
}
@keyframes
bounceOutUp
{
20
%
{
-webkit-transform
:
translate3d
(
0
,
-10px
,
0
);
transform
:
translate3d
(
0
,
-10px
,
0
);
}
40
%,
45
%
{
opacity
:
1
;
-webkit-transform
:
translate3d
(
0
,
20px
,
0
);
transform
:
translate3d
(
0
,
20px
,
0
);
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-2000px
,
0
);
transform
:
translate3d
(
0
,
-2000px
,
0
);
}
}
.bounceOutUp
{
-webkit-animation-name
:
bounceOutUp
;
animation-name
:
bounceOutUp
;
}
@-webkit-keyframes
fadeIn
{
from
{
opacity
:
0
;
}
to
{
opacity
:
1
;
}
}
@keyframes
fadeIn
{
from
{
opacity
:
0
;
}
to
{
opacity
:
1
;
}
}
.fadeIn
{
-webkit-animation-name
:
fadeIn
;
animation-name
:
fadeIn
;
}
@-webkit-keyframes
fadeInDown
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
@keyframes
fadeInDown
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
.fadeInDown
{
-webkit-animation-name
:
fadeInDown
;
animation-name
:
fadeInDown
;
}
@-webkit-keyframes
fadeInDownBig
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-2000px
,
0
);
transform
:
translate3d
(
0
,
-2000px
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
@keyframes
fadeInDownBig
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-2000px
,
0
);
transform
:
translate3d
(
0
,
-2000px
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
.fadeInDownBig
{
-webkit-animation-name
:
fadeInDownBig
;
animation-name
:
fadeInDownBig
;
}
@-webkit-keyframes
fadeInLeft
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
@keyframes
fadeInLeft
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
.fadeInLeft
{
-webkit-animation-name
:
fadeInLeft
;
animation-name
:
fadeInLeft
;
}
@-webkit-keyframes
fadeInLeftBig
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-2000px
,
0
,
0
);
transform
:
translate3d
(
-2000px
,
0
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
@keyframes
fadeInLeftBig
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-2000px
,
0
,
0
);
transform
:
translate3d
(
-2000px
,
0
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
.fadeInLeftBig
{
-webkit-animation-name
:
fadeInLeftBig
;
animation-name
:
fadeInLeftBig
;
}
@-webkit-keyframes
fadeInRight
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
@keyframes
fadeInRight
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
.fadeInRight
{
-webkit-animation-name
:
fadeInRight
;
animation-name
:
fadeInRight
;
}
@-webkit-keyframes
fadeInRightBig
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
2000px
,
0
,
0
);
transform
:
translate3d
(
2000px
,
0
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
@keyframes
fadeInRightBig
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
2000px
,
0
,
0
);
transform
:
translate3d
(
2000px
,
0
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
.fadeInRightBig
{
-webkit-animation-name
:
fadeInRightBig
;
animation-name
:
fadeInRightBig
;
}
@-webkit-keyframes
fadeInUp
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
@keyframes
fadeInUp
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
.fadeInUp
{
-webkit-animation-name
:
fadeInUp
;
animation-name
:
fadeInUp
;
}
@-webkit-keyframes
fadeInUpBig
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
2000px
,
0
);
transform
:
translate3d
(
0
,
2000px
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
@keyframes
fadeInUpBig
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
2000px
,
0
);
transform
:
translate3d
(
0
,
2000px
,
0
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
.fadeInUpBig
{
-webkit-animation-name
:
fadeInUpBig
;
animation-name
:
fadeInUpBig
;
}
@-webkit-keyframes
fadeOut
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
}
}
@keyframes
fadeOut
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
}
}
.fadeOut
{
-webkit-animation-name
:
fadeOut
;
animation-name
:
fadeOut
;
}
@-webkit-keyframes
fadeOutDown
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
);
}
}
@keyframes
fadeOutDown
{
from
{
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
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
2000px
,
0
);
transform
:
translate3d
(
0
,
2000px
,
0
);
}
}
@keyframes
fadeOutDownBig
{
from
{
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
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
);
}
}
@keyframes
fadeOutLeft
{
from
{
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
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-2000px
,
0
,
0
);
transform
:
translate3d
(
-2000px
,
0
,
0
);
}
}
@keyframes
fadeOutLeftBig
{
from
{
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
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
);
}
}
@keyframes
fadeOutRight
{
from
{
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
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
2000px
,
0
,
0
);
transform
:
translate3d
(
2000px
,
0
,
0
);
}
}
@keyframes
fadeOutRightBig
{
from
{
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
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
}
}
@keyframes
fadeOutUp
{
from
{
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
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
0
,
-2000px
,
0
);
transform
:
translate3d
(
0
,
-2000px
,
0
);
}
}
@keyframes
fadeOutUpBig
{
from
{
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
{
from
{
-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
;
}
to
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
);
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
;
}
}
@keyframes
flip
{
from
{
-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
;
}
to
{
-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
{
from
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-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-animation-timing-function
:
ease-in
;
animation-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
);
}
to
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
);
}
}
@keyframes
flipInX
{
from
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-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-animation-timing-function
:
ease-in
;
animation-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
);
}
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
{
from
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-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-animation-timing-function
:
ease-in
;
animation-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
);
}
to
{
-webkit-transform
:
perspective
(
400px
);
transform
:
perspective
(
400px
);
}
}
@keyframes
flipInY
{
from
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
-webkit-animation-timing-function
:
ease-in
;
animation-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-animation-timing-function
:
ease-in
;
animation-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
);
}
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
{
from
{
-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
;
}
to
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
1
,
0
,
0
,
90deg
);
opacity
:
0
;
}
}
@keyframes
flipOutX
{
from
{
-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
;
}
to
{
-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-backface-visibility
:
visible
!important
;
backface-visibility
:
visible
!important
;
}
@-webkit-keyframes
flipOutY
{
from
{
-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
;
}
to
{
-webkit-transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
transform
:
perspective
(
400px
)
rotate3d
(
0
,
1
,
0
,
90deg
);
opacity
:
0
;
}
}
@keyframes
flipOutY
{
from
{
-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
;
}
to
{
-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-keyframes
lightSpeedIn
{
from
{
-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
;
}
to
{
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
;
}
}
@keyframes
lightSpeedIn
{
from
{
-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
;
}
to
{
-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
{
from
{
opacity
:
1
;
}
to
{
-webkit-transform
:
translate3d
(
100%
,
0
,
0
)
skewX
(
30deg
);
transform
:
translate3d
(
100%
,
0
,
0
)
skewX
(
30deg
);
opacity
:
0
;
}
}
@keyframes
lightSpeedOut
{
from
{
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
{
from
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-200deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-200deg
);
opacity
:
0
;
}
to
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
;
}
}
@keyframes
rotateIn
{
from
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-200deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-200deg
);
opacity
:
0
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
opacity
:
0
;
}
to
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
;
}
}
@keyframes
rotateInDownLeft
{
from
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-45deg
);
opacity
:
0
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
opacity
:
0
;
}
to
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
;
}
}
@keyframes
rotateInDownRight
{
from
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
opacity
:
0
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
opacity
:
0
;
}
to
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
;
}
}
@keyframes
rotateInUpLeft
{
from
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
45deg
);
opacity
:
0
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-90deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-90deg
);
opacity
:
0
;
}
to
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
none
;
transform
:
none
;
opacity
:
1
;
}
}
@keyframes
rotateInUpRight
{
from
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
-90deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
-90deg
);
opacity
:
0
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
opacity
:
1
;
}
to
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
-webkit-transform
:
rotate3d
(
0
,
0
,
1
,
200deg
);
transform
:
rotate3d
(
0
,
0
,
1
,
200deg
);
opacity
:
0
;
}
}
@keyframes
rotateOut
{
from
{
-webkit-transform-origin
:
center
;
transform-origin
:
center
;
opacity
:
1
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
opacity
:
1
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
opacity
:
1
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
opacity
:
1
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
opacity
:
1
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
opacity
:
1
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
left
bottom
;
transform-origin
:
left
bottom
;
opacity
:
1
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
opacity
:
1
;
}
to
{
-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
{
from
{
-webkit-transform-origin
:
right
bottom
;
transform-origin
:
right
bottom
;
opacity
:
1
;
}
to
{
-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
;
}
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
:
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
;
}
to
{
-webkit-transform
:
translate3d
(
0
,
700px
,
0
);
transform
:
translate3d
(
0
,
700px
,
0
);
opacity
:
0
;
}
}
.hinge
{
-webkit-animation-name
:
hinge
;
animation-name
:
hinge
;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes
rollIn
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-120deg
);
transform
:
translate3d
(
-100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-120deg
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
@keyframes
rollIn
{
from
{
opacity
:
0
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-120deg
);
transform
:
translate3d
(
-100%
,
0
,
0
)
rotate3d
(
0
,
0
,
1
,
-120deg
);
}
to
{
opacity
:
1
;
-webkit-transform
:
none
;
transform
:
none
;
}
}
.rollIn
{
-webkit-animation-name
:
rollIn
;
animation-name
:
rollIn
;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes
rollOut
{
from
{
opacity
:
1
;
}
to
{
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
{
from
{
opacity
:
1
;
}
to
{
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
{
from
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
);
}
50
%
{
opacity
:
1
;
}
}
@keyframes
zoomIn
{
from
{
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
{
from
{
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.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
1
);
}
}
@keyframes
zoomInDown
{
from
{
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.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
1
);
}
}
.zoomInDown
{
-webkit-animation-name
:
zoomInDown
;
animation-name
:
zoomInDown
;
}
@-webkit-keyframes
zoomInLeft
{
from
{
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.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
1
);
}
}
@keyframes
zoomInLeft
{
from
{
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.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
1
);
}
}
.zoomInLeft
{
-webkit-animation-name
:
zoomInLeft
;
animation-name
:
zoomInLeft
;
}
@-webkit-keyframes
zoomInRight
{
from
{
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.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
1
);
}
}
@keyframes
zoomInRight
{
from
{
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.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
1
);
}
}
.zoomInRight
{
-webkit-animation-name
:
zoomInRight
;
animation-name
:
zoomInRight
;
}
@-webkit-keyframes
zoomInUp
{
from
{
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.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
1
);
}
}
@keyframes
zoomInUp
{
from
{
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.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
1
);
}
}
.zoomInUp
{
-webkit-animation-name
:
zoomInUp
;
animation-name
:
zoomInUp
;
}
@-webkit-keyframes
zoomOut
{
from
{
opacity
:
1
;
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
);
}
to
{
opacity
:
0
;
}
}
@keyframes
zoomOut
{
from
{
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
(
0.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
(
0.175
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
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.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
(
0.175
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
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
(
0.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
(
0.175
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
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.550
,
0.055
,
0.675
,
0.190
);
animation-timing-function
:
cubic-bezier
(
0.550
,
0.055
,
0.675
,
0.190
);
}
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
(
0.175
,
0.885
,
0.320
,
1
);
animation-timing-function
:
cubic-bezier
(
0.175
,
0.885
,
0.320
,
1
);
}
}
.zoomOutUp
{
-webkit-animation-name
:
zoomOutUp
;
animation-name
:
zoomOutUp
;
}
@-webkit-keyframes
slideInDown
{
from
{
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
visibility
:
visible
;
}
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
}
@keyframes
slideInDown
{
from
{
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
visibility
:
visible
;
}
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
}
.slideInDown
{
-webkit-animation-name
:
slideInDown
;
animation-name
:
slideInDown
;
}
@-webkit-keyframes
slideInLeft
{
from
{
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
);
visibility
:
visible
;
}
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
}
@keyframes
slideInLeft
{
from
{
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
);
visibility
:
visible
;
}
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
}
.slideInLeft
{
-webkit-animation-name
:
slideInLeft
;
animation-name
:
slideInLeft
;
}
@-webkit-keyframes
slideInRight
{
from
{
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
);
visibility
:
visible
;
}
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
}
@keyframes
slideInRight
{
from
{
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
);
visibility
:
visible
;
}
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
}
.slideInRight
{
-webkit-animation-name
:
slideInRight
;
animation-name
:
slideInRight
;
}
@-webkit-keyframes
slideInUp
{
from
{
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
);
visibility
:
visible
;
}
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
}
@keyframes
slideInUp
{
from
{
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
);
visibility
:
visible
;
}
to
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
}
.slideInUp
{
-webkit-animation-name
:
slideInUp
;
animation-name
:
slideInUp
;
}
@-webkit-keyframes
slideOutDown
{
from
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
0
,
100%
,
0
);
transform
:
translate3d
(
0
,
100%
,
0
);
}
}
@keyframes
slideOutDown
{
from
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
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
{
from
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
-100%
,
0
,
0
);
transform
:
translate3d
(
-100%
,
0
,
0
);
}
}
@keyframes
slideOutLeft
{
from
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
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
{
from
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
100%
,
0
,
0
);
transform
:
translate3d
(
100%
,
0
,
0
);
}
}
@keyframes
slideOutRight
{
from
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
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
{
from
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
}
}
@keyframes
slideOutUp
{
from
{
-webkit-transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
to
{
visibility
:
hidden
;
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
}
}
.slideOutUp
{
-webkit-animation-name
:
slideOutUp
;
animation-name
:
slideOutUp
;
}
src/main/webapp/templets/1/default/css/jquery.sinaemotion.css
0 → 100644
View file @
1f093087
#emotions
{
left
:
0
;
width
:
395px
;
font-size
:
12px
;
background
:
#fff
;
position
:
absolute
;
border
:
1px
solid
#E8E8E8
;
}
#emotions
a
{
color
:
#9ABBC8
;
padding
:
2px
7px
;
text-decoration
:
none
;
}
#emotions
img
{
border
:
0
;
}
#emotions
div
{
margin
:
5px
10px
;
padding
:
1px
;
overflow
:
hidden
;
}
#emotions
#prev
,
#emotions
#next
{
margin-left
:
3px
;
background
:
#eee
;
}
#emotions
.categorys
{
color
:
#ccc
;
height
:
23px
;
color
:
#9ABBC8
;
overflow
:
hidden
;
}
#emotions
.categorys
a
{
display
:
inline-block
;
}
#emotions
.categorys
a
:hover
{
text-decoration
:
underline
;
}
#emotions
.categorys
a
.current
{
cursor
:
default
;
background
:
#F0F0F0
;
-moz-border-radius
:
3px
;
-webkit-border-radius
:
3px
;
}
#emotions
.container
{
padding
:
1px
;
overflow
:
hidden
;
}
#emotions
.container
a
{
float
:
left
;
width
:
26px
;
height
:
22px
;
text-align
:
center
;
box-sizing
:
content-box
;
padding
:
4px
2px
;
margin
:
-1px
0
0
-1px
;
border
:
1px
solid
#e8e8e8
;
}
#emotions
.container
a
:hover
{
z-index
:
2
;
position
:
relative
;
border
:
1px
solid
#0095cd
;
}
#emotions
.page
{
text-align
:
right
;
}
#emotions
.page
a
.current
{
color
:
#666
;
background-color
:
#fff
;
}
#emotions
.page
a
{
margin-left
:
3px
;
color
:
#0078B6
;
background-color
:
#f3f3f3
;
}
#emotions
.page
a
:hover
{
background-color
:
#e7e7e7
;
}
\ No newline at end of file
src/main/webapp/templets/1/default/footer.htm
0 → 100644
View file @
1f093087
<div
class=
"ms-footer"
>
<div
class=
"ms-footer-content"
>
<div
class=
"ms-footer-left"
>
<div
class=
"ms-footer-left-column"
>
<span
class=
"ms-footer-left-column-about"
>
<a
href=
'{ms:global.url/}/53/index.html'
>
关于我们
</a>
</span>
|
<span
class=
"ms-footer-left-column-course"
>
<a
target=
"_blank"
href=
'http://mingsoft.net/html/1//5527/index.html#faz'
>
发展历程
</a>
</span>
|
<span
class=
"ms-footer-left-column-contact"
>
<a
target=
"_blank"
href=
'http://mingsoft.net/html/1//5527/index.html#lianx'
>
联系我们
</a>
</span>
</div>
<span
class=
"ms-footer-left-copyright"
>
版权所有
©
铭飞科技有限公司2012-2018保留一切权利
</span>
</div>
<div
class=
"ms-footer-right"
>
<img
class=
'ms-footer-right-img-weixin'
src=
"{ms:global.host/}/{ms:global.style/}/images/we-chat.png"
>
<a
target=
"_blank"
href=
'http://tieba.baidu.com/f?kw=%E9%93%AD%E9%A3%9E%E7%A7%91%E6%8A%80&fr=index&fp=0&ie=utf-8'
><img
class=
"ms-footer-right-baidu"
src=
"{ms:global.host/}/{ms:global.style/}/images/baidu.png"
></a>
<a
target=
"_blank"
href=
'http://weibo.com/killfen'
><img
src=
"{ms:global.host/}/{ms:global.style/}/images/micro-blog.png"
></a>
<div
class=
"ms-footer-right-weixin"
>
<p></p>
<img
alt=
""
src=
"{ms:global.host/}/{ms:global.style/}/images/weixin.jpg"
>
</div>
</div>
</div>
</div>
<script>
/*导航下拉*/
$
(
function
(){
$
(
"
.head-menu-list-li
"
).
hover
(
function
(){
$
(
this
).
find
(
"
.head-menu-son-list
"
).
fadeToggle
();
});
$
(
'
.ms-footer-right-img-weixin
'
).
hover
(
function
(){
$
(
'
.ms-footer-right-weixin
'
).
toggle
();
});
});
</script>
\ No newline at end of file
src/main/webapp/templets/1/default/head-file.htm
0 → 100644
View file @
1f093087
<title>
{ms:global.name/}
</title>
<meta
charset=
"utf-8"
>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"http://cdn.mingsoft.net/plugins/iconfont/1.0.0/iconfont.css"
/>
<link
rel=
"stylesheet/less"
type=
"text/css"
href=
"{ms:global.host/}/{ms:global.style/}/less/base.less"
>
<link
rel=
"stylesheet/less"
type=
"text/css"
href=
"{ms:global.host/}/{ms:global.style/}/less/index.less"
>
<link
rel=
"stylesheet/less"
type=
"text/css"
href=
"{ms:global.host/}/{ms:global.style/}/less/advice.less"
>
<link
rel=
"stylesheet/less"
type=
"text/css"
href=
"{ms:global.host/}/{ms:global.style/}/less/case-list.less"
>
<link
rel=
"stylesheet/less"
type=
"text/css"
href=
"{ms:global.host/}/{ms:global.style/}/less/about.less"
>
<link
rel=
"stylesheet/less"
type=
"text/css"
href=
"{ms:global.host/}/{ms:global.style/}/less/news-list.less"
>
<link
rel=
"stylesheet/less"
type=
"text/css"
href=
"{ms:global.host/}/{ms:global.style/}/less/news-show.less"
>
<link
rel=
"stylesheet/less"
type=
"text/css"
href=
"{ms:global.host/}/{ms:global.style/}/less/center.less"
>
<script
src=
"http://cdn.mingsoft.net/plugins/jquery/1.9.1/jquery-1.9.1.js"
></script>
<script
src=
"{ms:global.host/}/{ms:global.style/}/js/slider.js"
></script>
<script
src=
"http://cdn.mingsoft.net/plugins/less/2.5.3/less.min.js"
></script>
<script
src=
"http://cdn.mingsoft.net/plugins/seajs/3.0.0/sea.js"
></script>
<script
src=
"http://cdn.mingsoft.net/model/1.0.0/main.min.js"
></script>
<!--vue-懒加载-表单验证-->
<script
src=
"http://cdn.mingsoft.net/plugins/vue/2.3.3/vue.min.js"
></script>
<script
src=
"http://cdn.mingsoft.net/plugins/validator/5.5.0/validator.min.js"
></script>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"{ms:global.host/}/{ms:global.style/}/css/animate.css"
>
<script>
ms
.
config
({
base
:
"
{ms:global.host/}
"
,
filter
:
{
people
:
{
loginUrl
:
'
{ms:global.host/}
'
}
}
});
</script>
\ No newline at end of file
src/main/webapp/templets/1/default/head.htm
0 → 100644
View file @
1f093087
<div
class=
"ms-head"
>
<div
class=
"head-menu"
>
<div
class=
"head-men-left head-menu-flex-center"
>
<a
href=
"{ms:global.host/}"
>
<img
src=
"http://cdn.mingsoft.net/images/logo.png"
/>
</a>
<ul
class=
"head-menu-list"
>
<li
class=
"head-menu-list-li"
>
走进铭飞
<ul
class=
"head-menu-son-list"
>
<li>
<a
target=
"_blank"
href=
'{ms:global.url/}/53/index.html'
>
关于我们
</a>
</li>
<li>
<a
target=
"_blank"
href=
'{ms:global.url/}/59/index.html'
>
公司动态
</a>
</li>
<li>
<a
target=
"_blank"
href=
'http://mingsoft.net/html/1//5527/index.html#faz'
>
发展历程
</a>
</li>
<li>
<a
target=
"_blank"
href=
'http://mingsoft.net/html/1//5527/index.html#lianx'
>
加入我们
</a>
</li>
<li>
<a
target=
"_blank"
href=
'{ms:global.url/}/19/141/index.html'
>
联系我们
</a>
</li>
</ul>
</li>
<li
class=
"head-menu-list-li"
>
<a
href=
'{ms:global.url/}/149/index.html'
>
案例
</a>
</li>
<li
class=
"head-menu-list-li"
>
<a
target=
"_blank"
href=
'http://mstore.mingsoft.net/mstoreShow.do'
>
插件
&
模板
</a>
<!-- <ul class="head-menu-son-list">
<li><a href='http://mstore.mingsoft.net/mstoreShow.do'>模板</a></li>
<li><a href='http://mstore.mingsoft.net/mstoreShow.do'>插件</a></li>
</ul> -->
</li>
<li
class=
"head-menu-list-li"
>
<a
target=
"_blank"
href=
'{ms:global.url/}/19/142/index.html'
>
在线留言
</a>
</li>
<li
class=
"head-menu-list-li"
>
技术支持
<ul
class=
"head-menu-son-list"
>
<li>
<a
target=
"_blank"
href=
'http://bbs.mingsoft.net/mbbs/main.do'
>
开源社区
</a>
</li>
<li>
<a
target=
"_blank"
href=
'https://gitee.com/mingSoft/MCMS'
>
源码下载
</a>
</li>
<li>
<a
target=
"_blank"
href=
'http://doc.ms.mingsoft.net/plugs-cms/'
>
使用手册
</a>
</li>
</ul>
</li>
</ul>
</div>
<div
class=
"head-men-right head-menu-flex-center"
>
<div
class=
"head-menu-flex-center head-menu-right-search"
>
<form
id=
"searchDataForm"
action=
"{ms:global.host/}/cms/1/search.do"
method=
"post"
>
<input
type=
"text"
class=
'ms-search-input'
name=
"basic_title"
placeholder=
"请输入关键字"
>
<!-- <i class="iconfont ms-search-click"></i> -->
<input
type=
"submit"
value=
""
class=
"ms-search-click"
>
</form>
</div>
<div
class=
"head-menu-right-content"
id=
"ms-login-vue"
>
<span
v-show=
"!isLogin"
style=
"display: none;"
>
<span>
<a
href=
'{ms:global.host/}/login.html'
>
登录
</a>
</span>
|
<span><a
href=
'{ms:global.host/}/register.html'
>
注册
</a></span>
</span>
<div
class=
"topbar-info J_userInfo loginSuccess hide-default"
v-show=
"isLogin"
style=
"display: none;"
>
<a
class=
"user-name"
href=
"{ms:global.host/}/people/center.do"
>
<img
:src=
"'{ms:global.host/}'+ peopleInfo.puIcon"
class=
"loginImg user_icon"
onerror=
"this.src='http://cdn.mingsoft.net/global/images/msheader.png'"
>
<b
class=
"userName ms-userName"
v-text=
"peopleInfo.puNickname"
></b>
</a>
<a
href=
"javascript:;"
class=
"quitLogin"
@
click=
"quitLogin"
>
退出
</a>
</div>
</div>
</div>
</div>
</div>
<script>
var
headVue
=
new
Vue
({
el
:
"
#ms-login-vue
"
,
data
:
{
isLogin
:
undefined
,
//登录状态
peopleInfo
:
""
,
//个人信息
},
mounted
:
function
()
{
//获取个人信息
var
target
=
this
;
$
.
ajax
({
type
:
"
POST
"
,
url
:
"
{ms:global.host/}/checkLoginStatus.do
"
,
success
:
function
(
msg
)
{
target
.
isLogin
=
msg
.
result
;
if
(
msg
.
result
)
{
$
.
ajax
({
type
:
"
POST
"
,
url
:
"
{ms:global.host/}/people/user/info.do
"
,
success
:
function
(
msg
)
{
target
.
peopleInfo
=
msg
;
}
})
}
}
})
},
methods
:
{
//退出登录
quitLogin
:
function
()
{
var
target
=
this
;
$
.
ajax
({
type
:
"
POST
"
,
url
:
"
{ms:global.host/}/people/quit.do
"
,
success
:
function
(
msg
)
{
if
(
msg
.
result
)
{
$
(
"
body
"
).
append
(
"
<form id='msHeadForm' action=''></form>
"
);
$
(
"
#msHeadForm
"
).
attr
(
"
action
"
,
"
{ms:global.host/}
"
).
submit
();
}
}
})
},
},
})
/* $(function(){
var r=location.href;
if(r.match("53")){
$(".head-menu-list-li").removeClass("head-active");
$(".head-menu-list-li").eq(0).addClass("head-active");
}else if(r.match("141")){
$(".head-menu-list-li").removeClass("head-active");
$(".head-menu-list-li").eq(0).addClass("head-active");
}else if(r.match("59")){
$(".head-menu-list-li").removeClass("head-active");
$(".head-menu-list-li").eq(0).addClass("head-active");
}else if(r.match("155")){
$(".head-menu-list-li").removeClass("head-active");
$(".head-menu-list-li").eq(1).addClass("head-active");
}else if(r.match("142")){
$(".head-menu-list-li").removeClass("head-active");
$(".head-menu-list-li").eq(3).addClass("head-active");
}
}) */
</script>
\ No newline at end of file
src/main/webapp/templets/1/default/images/00.png
0 → 100644
View file @
1f093087
520 KB
src/main/webapp/templets/1/default/images/01.jpg
0 → 100644
View file @
1f093087
200 KB
src/main/webapp/templets/1/default/images/02.jpg
0 → 100644
View file @
1f093087
215 KB
src/main/webapp/templets/1/default/images/03.jpg
0 → 100644
View file @
1f093087
159 KB
src/main/webapp/templets/1/default/images/1471918025445.png
0 → 100644
View file @
1f093087
1.49 KB
src/main/webapp/templets/1/default/images/about_us.jpg
0 → 100644
View file @
1f093087
498 KB
src/main/webapp/templets/1/default/images/ad_ctr.png
0 → 100644
View file @
1f093087
3.66 KB
src/main/webapp/templets/1/default/images/alpha.png
0 → 100644
View file @
1f093087
924 Bytes
src/main/webapp/templets/1/default/images/baidu.png
0 → 100644
View file @
1f093087
2 KB
src/main/webapp/templets/1/default/images/banner.jpg
0 → 100644
View file @
1f093087
236 KB
src/main/webapp/templets/1/default/images/case.png
0 → 100644
View file @
1f093087
126 KB
Prev
1
2
3
4
5
…
8
Next
Write
Preview
Supports
Markdown
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