动画和过渡的异同
- 相同点
- 过渡和动画都是给元素添加动画的
- 过渡和动画都是CSS3新增的属性
- 过渡和动画都需要满足三要素才能有动画效果
- 不同点
-
过渡(transition)必须要触发才能执行 -
动画(animation)则不用触发也可以执行
-
创建一个CSS3动画
- 声明动画名称:
animation-name:lyj;
div{
width: 300px;
height: 300px;
background-color: #f00;
animation-name: lyj;
}
- 创建名称为
lyj的动画
@keyframes lyj{
from{
width: 300px;/*宽从300-100的变化*/
}
to{
width: 100px;
}
}
- 规定动画执行的时间:
animation-duration:2s;
div{
width: 300px;
height: 300px;
background-color: #f00;
animation-name: lyj;
animation-duration: 2s;
}
动画的其他属性
-
animation-delay: 1s动画延迟 -
animation-timing-function: 动画的运动速度, 和过渡效果的取值一样 -
animation-iteration-count: 动画运动的次数 -
animation-direction:是否是往返动画, 取值如下-
normal: 默认值 -
alternate: 往返动画 -
reverse: 动画由尾到头运行 -
alternate-reverse: 动画由尾到头运动的往返动画
-
-
animation-fill-mode-
none:默认值 -
forwards: 动画结束状态保持动画最后一帧的样子 -
backwards: 动画开始状态保持动画第一帧的样子 -
both: 就是forwards和backwards两个取值的结合
-
声明一个动画的简写方式
animation : 动画名称 动画执行时长 运动速度类型 延迟 动画执行的次数 往返动画
动画示例: 无限轮播滚动图
