黑马程序员技术交流社区

标题: css3中的动画效果 [打印本页]

---

作者: 如此深情    时间: 2019-4-9 14:30
标题: css3中的动画效果
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
1. 用keyframes 定义动画（类似定义类选择器）
.先定义动画（动画序列，各个状态时的样式） 然后在需要的元素里调用动画
代码格式参考：
@keyframes 动画名称 {
   0%{
        width:100px;
   }
   100%{
        width:200px;
   }
}                        


动画常用属性{控制动画执行}：（！必须属性：动画名称，动画执行时间）

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了animation-play-state属性。
animation-name	规定@keyframes动画的名称。（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function	规定动画的速度曲线，默认是“ease”。
animation-delay	规定动画何时开始，默认是0。
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"paused"。
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

调用动画代码简写：animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态（！必须属性：动画名称，动画执行时间）

---

作者: 晴阳暴打远灯狗    时间: 2019-4-9 14:53
666666666666

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2