css3动画

一、动画
1.1 基本使用
1.2 @keyframes(关键帧) 定义动画
1.3 初步使用
1.4 绕圈
二、动画的常见属性
2.1 解析 aniamtion-direction
2.2 解析 animation-fill-mode
2.3 解析 animation-timing-function
一、动画
动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动插放等效果。

1.1 基本使用
制作动画分为两步：

定义动画 @keyframes
使用(调用)
1.2 @keyframes(关键帧) 定义动画
@keyframes animation{
    0%{
    ...
    }
    100%{
    ...
    }
}
①0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
②在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
③动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
④请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%
1.3 初步使用
页面一打开，一个DIV将从左移至右。

@keyframes move {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(1400px);
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: teal;
  animation-name: move;
  animation-duration: 3s;
}

1.4 绕圈

@keyframes move {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(1000px);
  }
  50% {
    transform: translate(1000px, 500px);
  }
  75% {
    transform: translate(0px, 500px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: teal;
  animation-name: move;
  animation-duration: 3s;
}
二、动画的常见属性
属性    描述
@keyframes    规定动画
animation    所有动画属性的简写属性，除了 animation-play-state属性
animation-name    制定需要使用的动画（ 必须的 ）
animation-duration    规定动画完成一个周期所花费的秒或毫秒( 必须的 )
animation-timing-function    规定动画的速度曲线，默认是"ease"”。
aniamtion-delay    规定动画何时开始，默认是0.
animation-iteration-count    规定动画被播放的次数，默认是1,还有 infinite
animation-direction    规定动画是否在下一周期逆向播放，默认是" normal" alternate逆播放
animation-play-state    规定动画是否正在运行或暂停。默认是" running" 还有’ paused 暂停.
animation-fill-mode    规定动画结束后状态，保持 forwards 回到起始 backwards
暂停动画： animation-play-state: pulsed;经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来： animation- direction: alternate
盒子动画结束后，停在结東位置： animation- fill-mode: forwards
2.1 解析 aniamtion-direction
动画是否逆向播放

aniamtion-direction: norma | reverse | alternate | alternate-reverse
normal 默认的
reverse 从终点运动向起点 终点=>起点
alternate 到达终点后是否原路返回( 起点=>终点=>起点 ) 当 animation-iteration-count < 2 时无效
alternate-reverse 终点=>起点=>终点 animation-iteration-count < 2 时无效
2.2 解析 animation-fill-mode
动画结束后状态

aniamtion-fill-mode:forwards | backwards
forwards 保持当前位置
backwards 回到初始位置
2.3 解析 animation-timing-function
animation-timing- function:规定动画的速度曲线，默认是 ease、

值    描述
linear    动画从头到尾的速度是相同的。匀速
ease    默认。动画以低東开始，然后加快，在结束前变慢。
ease-in    动画以低速开始。
ease-out    动画以低速结束。
ease-in-out    动画以低速开始和结束。
steps    指定了时间函数中的间隔数量（步长）
steps 理解为动画从头到尾，需要多少步来完成。