动画
动画
动画是使元素从一种样式逐渐变化另一种样式的效果
你可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%
0%是动画的开始,100%是动画的完成.
@keyframes创建动画
使用@keyframes规则,你可以创建动画
@keyframes name{
from|0% {
css样式
}
percent{
css样式
}
to|100%{
css样式
}
}
name:动画名称,开发人员自己命名;
percent:为百分比值,可以添加多个百分比值.
animation执行动画
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
|---|---|
| name | 设置动画的名称 |
| duration | 设置动画的持续时间 |
| timing-function | 设置动画效果的速率(如下) |
| delay | 设置动画的开始时间(延时执行) |
| iteration-count | 设置动画循环的次数，infinite为无限次数的循环 |
| direction | 设置动画播放的方向(如下) |
| animation-play-state | 控制动画的播放状态:running代表播放，而paused代表停止播放 |
| timing-function值 | 描述 |
|---|---|
| ease | 逐渐变慢(默认) |
| linear | 匀速 |
| ease-in | 加速 |
| ease-out | 减速 |
| ease-in-out | 先加速后减速 |
| direction值 | 描述 |
|---|---|
| normal | 默认值为normal表示向前播放 |
| alternate | 动画播放在第偶数次向前播放，第奇数次向反方向播放 |
<style>
.animation{
width: 300px;
height: 300px;
background-color: red;
animation:anima 5S linear 5s infinite ;
}
.animation:hover{
animation-play-state: running;
}
@keyframes anima {
0%{
background-color: red;
}
50%{
background-color: green;
}
100%{
background-color: blueviolet;
}
}
</style>
<body>
<div class="animation"></div>
</body>
