动画和过渡的异同

  • 相同点
    • 过渡和动画都是给元素添加动画的
    • 过渡和动画都是CSS3新增的属性
    • 过渡和动画都需要满足三要素才能有动画效果
  • 不同点
    • 过渡(transition) 必须要触发才能执行
    • 动画(animation) 则不用触发也可以执行

创建一个CSS3动画

  • 声明动画名称:animation-name:lyj; css div{ width: 300px; height: 300px; background-color: #f00; animation-name: lyj; }
  • 创建名称为lyj的动画 css @keyframes lyj{ from{ width: 300px;/*宽从300-100的变化*/ } to{ width: 100px; } }
  • 规定动画执行的时间:animation-duration:2s; css 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-play-state动画播放状态
    • running:正在执行中
    • paused: 暂停

声明一个动画的简写方式

animation : 动画名称 动画执行时长 运动速度类型 延迟 动画执行的次数 往返动画


361 0 0