CSS3动画

1.简介

• CSS3动画效果包括三个部分：变形（transform）、过渡（transition）、动画（animation）
• 区别transition、animation
  • transition属性（即CSS3过渡）只能实现一次性的动画效果，而animation属性（即CSS3动画）可以实现连续性的动画效果

2.动画：animation

• 语法：
  • animation：动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向；

animation-name	对哪个CSS属性去进行操作
animation-duration	动画持续时间
animation-timing-function	动画的速率变化方式
animation-delay	动画的延迟时间
animation-iteration-count	动画的播放次数
animation-direction	动画的播放方向，正向还是反向

• 动画方向：animation-direction
  • normal：正向播放（默认值）
  • reverse：反方向播放
  • alternate：播放次数是奇数时，动画正方向播放；播放次数是偶数时，动画反方向播放
• 播放次数（两种取值）
  • 取值为n（正整数），表示多少次
  • 取值为 infinite ，表示“循环播放”
• 使用动画（需要两步）
  • 定义动画
    • @keyframes定义动画

// 语法
@keyframes 动画名（自定义）{
    0% {}
    ...
    100% {}
} // 0%-100%象征着多个过程，也就是区别了transition过渡，且形成了一系列的动画效果

• • 调用动画

// 语法
div:hover{
    animation: 动画名（自定义） ... （省略号就是根据animation的语法来了）
}

• 自动播放动画（不需要用鼠标来移动触发）
  • 把调用动画写在盒子里面就行了，不写在hover里面