CSS3动画

简介

CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。可通过多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

相较于传统的脚本实现动画技术，使用 CSS 动画有三个主要优点：

• 能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。
• 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。
• 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

动画的基本使用

动画的使用分为两步：

1.先定义动画

2.再使用(调用)动画

定义动画

通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

@keyframes 动画名称 {
            /*定义关键帧*/
            from 或者 0%{
                css-styles:
            }
            
            50%{
                css-styles:
            }
            
            to 或者 100%{
                css-styles:
            }
        }

执行动画

animation的子属性：

• animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间（延迟时间）。
• animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行（往复执行）。
• animation-duration：设置动画一个周期的时长（执行时长）。
• animation-iteration-count：设置动画重复次数，可以指定 infinite 无限次重复动画（执行次数）。
• animation-name：指定由@keyframes描述的关键帧名称（动画名称）。
• animation-play-state：允许暂停和恢复动画（暂停动画）。
• animation-timing-function：设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化（速度曲线）。

animation-name            动画名称
animation-duration        执行时间
animation-timing-function    速度效果
animation-delay            延迟时间
animation-iteration-count    执行次数
animation-direction        

暂停动画

animation-play-state: paused;

案例：

文本滑过浏览器窗口，该例中<p> 元素由浏览器窗口右边滑至左边

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}