CSS3动画

一、动画

动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动插放等效果。

1.1 基本使用

制作动画分为两步：

1. 定义动画 @keyframes
2. 使用(调用)

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: paused;经常和鼠标经过等其他配合使用
• 想要动画走回来，而不是直接跳回来： 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 理解为动画从头到尾，需要多少步来完成。

示例：

div {
  width: 0;
  height: 30px;
  background-color: teal;
  /* animation: move 4s linear  forwards; */
  /* steps 就是分几步来完成动画，有了 steps 不要写ease linear了 */
  animation: move 4s steps(10) forwards;
}

@keyframes move {
  0% {}
  100% {
    width: 200px;
  }
}

以此推断做一个打字机效果。

2.4 打字机效果

注意：1ch 等于一个 0 的宽度！宽度！宽度！

ch还有另一个规则：

• 1ch = 1个英文 = 1个数字
• 2ch = 1个中文

<style>
  div {
    font-size: 46px;
    font-family: monospace;
    /* 1ch 代表0的宽度  */
    width: 0ch;
    white-space: nowrap;
    /* animation: move 4s linear  forwards; */
    /* steps 就是分几步来完成动画，有了 steps 不要写ease linear了 */
    animation: move 4s steps(9) forwards;
    overflow: hidden;
  }

  @keyframes move {
    0% {}
    100% {
      width: 18ch;
    }
  }
</style>

<div>我不知道你在想什么</div>

三、动画简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状太;

示例：
animation:move 1s ease 2s 3 alertnate fowwards

@keyframes move {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(1000px, 0);
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: teal;
  /* 动画名称 */
  /* animation-name: move; */
  /* 持续时间 */
  /* animation-duration: 2s; */
  /* 速度曲线 */
  /* animation-timing-function: ease-in; */
  /* 何时开始:延迟一秒 */
  /* animation-delay: 1s; */
  /* 重复次数 */
  /* animation-iteration-count: 2; */
  /* 是否逆向播放 */
  /* animation-direction: alternate-reverse; */
  /* 结束后状态 */
  /* animation-fill-mode: forwards; */

  animation: move 2s linear 0s infinite alternate forwards;
}
/* 鼠标经过暂停动画 */
div:hover{
  animation-play-state: paused;
}

• 简写属性里面不包含 animation- play-state