<!
DOCTYPE
html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
style
>
* {
margin:
0;
padding:
0;
}
#box {
height:
100px;
width:
100px;
background:
green;
transition: transform
1s
ease-in
1s;
}
#box:hover {
transform:
rotate(
180deg)
scale(
.5,
.5);
}
/*
transition: property duration timing-function delay;
属性名字 完成动画的时间 动画的曲线 定义的效果何时开始的
transition:需要事件触发,只能定义一个属性的变化,不能涉及多个属性
*/
.box {
height:
100px;
width:
100px;
border:
15px
solid
black;
animation: changebox
1s
ease-in-out
1s
infinite
alternate
running
forwards;
}
.box:hover {
animation-play-state:
paused;
}
@keyframes
changebox {
10% {
background:
red;
}
50% {
width:
80px;
}
70% {
border:
15px
solid
yellow;
}
100% {
width:
180px;
height:
180px;
}
}
/* animation: 名称 动画时间 动画的曲线 动画何时开始 动画的次数 动画的方向*/
<
/
style
>
<!--
animation:动画的叠加
transition:单一动画
transform:缩放
translate:移动
-->
</
head
>
<
body
>
<
div
class=
"box"
></
div
>
</
body
>
</
html
>
<
script
>
<
/
script
>