动画的原理:
- 视觉暂留作用
- 画面逐渐变化
动画的作用
- 增强用户体验
- 引起用户注意、
- 对操作进行反馈
- 掩饰(loading图)
动画的类型
- transition 补间动画
- keyframe 关键帧动画
- 逐帧动画
transition 补间动画
可以监测的内容
- 平移
- 旋转
- 缩放
- 透明度
- 其他的线性变化
transition: property 1s , all 3s ;/*设置监听的属性和动画时常*/
transition-delay :1s ;/*设置延迟时间*/
transition-timing-function: ease-in-out; /*设置动画进度曲线*/
keyframe 关键帧动画
相当于多个补间动画,可以与元素状态的变化无关
定义更加灵活
.container{
width: 100px;
height: 100px;
background: red;
animation: run 1s linear;
/* animation-direction: reverse; *//*指定动画方向*/
/* animation-fill-mode: forwards; *//*保留最终状态*/
animation-iteration-count: infinite;/*循环次数*/
/* animation-play-state: paused; *//*暂停*/
}
@keyframes run{
0%{
width: 100px;
}
50%{
width: 800px;
}
100%{
width: 100px;
}
}
逐帧动画
适用于无法补间计算的动画,需要很多图片
仍然是使用关键帧的技术实现的
使用steps(1)//关键帧之间的间隔是1帧,不要补间
tips:box-shadow 中的动画性能很差