web前端-CSS3动画

动画和过渡的异同

• 相同点
  • 过渡和动画都是给元素添加动画的
  • 过渡和动画都是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 : 动画名称 动画执行时长 运动速度类型 延迟 动画执行的次数 往返动画

动画示例: 无限轮播滚动图

点击此处, animation实现的无限轮播图 Demo