html animation 属性,CSS动画属性animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

方式一:

@keyframes 动画名称 {

from{ 开始样式 }

to{ 结束样式 }

}

方式二:使用百分比

@keyframes 动画名称{

0% {0%时候样式}

25% {25%时候样式}

50% {50%时候样式}

100% {100%时候样式}

}

注意:

animation-iteration-count:infinite; 无限循环播放

animation-play-state:paused; 暂停动画

animation-direction:alternate动画轮流反向播放

案例:

Document

*{

margin: 0;

padding: 0;

}

div{

width: 100px;

height: 100px;

background: red;

/*语法*/

/*animation:动画名称 执行一次完整动画需要花费的时间 运动曲线 延时多久开始执行动画 播放次数 是否反方向执行动画;*/

/*animation: move1 2s ease 2s infinite alternate;*/

/*animation-iteration-count:infinite; 无限循环播放*/

/*animation-play-state:paused; 暂停动画*/

/*animation-direction:alternate动画轮流反向播放*/

animation: move2 2s ease 0s infinite;

}

/*定义动画*/

/*方式一:

@keyframes 动画名称 {

from{ 开始样式 }

to{ 结束样式 }

}*/

@keyframes move1{

from{

}

to{

background:blue;

transform: translateX(1000px) rotate(360deg);

}

}

/* 方式二:使用百分比 可以根据需要写需求的百分比

@keyframes 动画名称{

0% {0%时候样式}

25% {25%时候样式}

50% {50%时候样式}

100% {100%时候样式}

} */

@keyframes move2{

0% {

width: 100px;

height: 100px;

background: red;

}

25% {

transform: translateX(1000px);

background: blue;

}

50% {

transform: translateX(1000px) translateY(500px);

background: yellow;

}

75% {

transform: translateX(0px) translateY(500px);

background: orange;

}

100% {

transform: translateX(0px) translateY(0px);

background: green;

}

}