动画

动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。

CSS动画

与动画相似，给元素一个start位置和一个end位置，将中间移动的过程展现出来，肉眼产生错觉，误以为画面活动。

一般我们使用Transform和Animation属性来使的画面活动起来

Transform

CSStransform属性可以完成旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

注意只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。

下面介绍几种常用的属性

translate位移

允许你单独指定 transforms 中的平移，并独立于 transform 属性。

transform: translateX();
transform: translateX();
transform: translateX();
transform: translate(length/percentage);

scale缩放函数

用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。(事实上我们需要给父级元素上加perspective来展现scale缩放函数中z轴的缩放；)

  <div id="normal"></div>
    <div class="scale"></div>

.scale{
  transform: scaleX(2)
}

.scale{
  transform: scaleY(2)
}

.scale{
  transform: scale(2)
}

rotate旋转

函数定义了一种将元素围绕一个定点（由transform-origin属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。

 <div id="normal"></div>
   <div class="roate"></div>

.scale {
 transform: rotate(45deg)
}

skew倾斜

 <div id="normal"></div>
   <div class="roate"></div>

.scale{
  transform: skewX(45deg)
}

.scale{
  transform: skewY(45deg)
}

.scale{
  transform: skew(15deg ,15deg)
}

但是transform标签只是给元素一个最终的样子，无法展现出过程，通常我们需要配合transition过渡标签配合使用；

Animation

Animation属性用来指定一组或多组动画，每组之间用逗号相隔。下面介绍集中常见属性

animationg: 0.5s/*时间，也可简写为.5s*/ 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名

方向：reverse:与原方向逆向; alternate: 循环重复；alternate-reverse：
过渡方式：line：线性；eare：
延迟：多长时间后开始；
填充模式：none：无；forwards：最后一步停止不返回原位置;
是否暂停：paused;running;
infonite：持续不断重复；

示例：

<div id="little"></div>

#little {
  margin: 100px;
  transform: scale(1.2);
  animation: .5s little infinite alternate-reverse;
}
@keyframes little{
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}
#little {
  width: 100px;
  height: 100px;
  background: red;
  border: 1px solid red;
}

这里我们要提到一个命令关键帧@keyframes

@keyframes

关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。和转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

@keyframes slidein {
  from {
    transform: translateX(0%); 
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes slidein {
  0% {
    transform: translateX(0%); 
  }

  50% {
    transform: translateX(50%);
  }
   100% {
    transform: translateX(100%);
  }
}

以上就是我们制作css动画常用的两种方式：transform和animation;两种方式各有特点，transform制作动画相对来讲命令较多且比较繁琐，输入过程显示很清楚而animation虽然命令简单但却要细心搞清楚自己需要的一个动画效果，过程命令输入不是很明显，主要强调一个最终所需的样式。

CSS 动画的两种做法（transition 和 animation）

动画

CSS动画

Transform

下面介绍几种常用的属性

Animation

@keyframes