CSS之动效相关

过渡

• 什么是过渡
  
  • 元素从一个状态到另一个状态的平滑变换的过程
• 过渡属性
  
  • 元素的哪个属性发生变化时要使用过渡效果
  • transition-property: none | all | property
• 过渡时间
  
  • 整个过渡效果在多长的时间内完成, 以s或ms为单位
  • transition-duration: s | ms
  • 过渡时间默认为0, 此时无过渡效果, 若想看到过渡效果, 必须设置该属性
• 过渡函数
  
  • 过渡的速度效果
  • transition-timing-function:
    
    • ease 默认值,慢速开始, 速度变快, 慢速结束
    • linear 匀速开始到结束
    • ease-in 慢速开始,加速效果
    • ease-out 慢速结束,减速效果
    • ease-in-out 以慢速开始和结束, 先加速再减速
• 过渡延迟
  
  • 当过渡被触发后, 等待多长时间后开始执行过渡效果
  • transition-delay: s | ms
• 过渡简写
  
  • transition: transition-property transition-durition transition-timing-function transition-delay
  • transition: prop dur func delay
• 多个过渡效果
  
  • transition-property: prop1, prop2;
  • transition-durition: t1, t2;
  • transition-timing-function: func1, func2;
  • transition-delay: delay1, delay2;

动画

• 什么是动画
  
  • 将元素的多个状态放在一起进行运行(多属性在多个状态间过渡), 从而实现复杂的动态效果
  • 注意: 浏览器兼容性, 书写时需要加内核前缀
  • 实现动画的步骤
    
    • 声明动画
      
      • @keyframes 声明整个动画过程中的不同状态是什么
    • 调用动画
      
      • 通过animation属性, 调用已声明的动画
• 关键帧
  
  • @keyframes规则声明动画
    

@keyframes 动画名称{
/*定义关键帧即不同时间点上的动画状态*/
from | 0% {
/*动画开始的状态*/
}
20% {
/*动画执行到20%的状态*/
}
50% {
…
}
to | 100% {
/*动画结束时的状态*/
}
}

动画属性

• animation-name: 调用动画的名称
• animation-durition: 动画执行的时长, 以s或ms为单位
• animation-timing-function: 动画执行时的速度效果
  
  • 取值为: ease | linear | ease-in | ease-out | ease-in-out
• animation-delay: 延迟时间, 以s或ms为单位
• animation-interation-count: 动画执行的次数, 默认为一次
  
  • 具体数值 | infinite(无限次循环)
• animation-direction: 动画播放的方向
  
  • normal
  • alternate
    
    • 奇数次播放为正向播放
    • 偶数次播放为逆向播放
• 动画属性简写
  
  • animation: name durition func delay count dir;
• animation-fill-mode: 指定动画在播放之前或之后的效果
  
  • none 默认行为
  • forwards: 动画完成后, 保持最后一个状态
  • backwards: 动画显示之前,保持在第一个状态
  • both: 动画完成后, 动画显示前, 都被相应的状态保持着
• animation-play-state: 定义动画播放状态, 配合Javascript使用, 用于播放过程中暂停动画
  
  • 取值: paused | running