<!

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

>