css动画实现方式今天写代码需要来实现css动画，那么我就去浅浅了解了下css动画，介绍了几种实现方式，同时介绍了Tra

今天写代码需要来实现css动画，那么我就去浅浅了解了下CSSTransition和CSSAnimation区别

首先，在谈区别之前，我们先了解下 css实现动画的方式

有如下几种：

transition的属性如下：

一般情况下，我们都是写一起的，比如：transition： width 2s ease 1s

其中timing-function的值有如下：

值	描述
`linear`	匀速（等于 `cubic-bezier(0,0,1,1)`）
`ease`	从慢到快再到慢（`cubic-bezier(0.25,0.1,0.25,1)`）
`ease-in`	慢慢变快（等于 `cubic-bezier(0.42,0,1,1)`）
`ease-out`	慢慢变慢（等于 `cubic-bezier(0,0,0.58,1)`）
`ease-in-out`	先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)`），渐显渐隐效果
`cubic-bezier(n,n,n,n)`	在 `cubic-bezier` 函数中定义自己的值。可能的值是 `0` 至 `1` 之间的数值

注意：并不是所有的属性都能使用过渡的，如display:none<->display:block

包含四个常用的功能：

一般配合transition过度使用

注意的是，transform不支持inline元素，使用前把它变成block

一个关键帧动画，最少包含两部分，animation 属性及属性值（动画的名称和运行方式运行时间等）@keyframes（规定动画的具体实现过程）

animation是由 8 个属性的简写，分别如下：

属性	描述	属性值
`animation-duration`	指定动画完成一个周期所需要时间，单位秒（`s`）或毫秒（`ms`），默认是 `0`
`animation-timing-function`	指定动画计时函数，即动画的速度曲线，默认是 "`ease`"	`linear`、`ease`、`ease-in`、`ease-out`、`ease-in-out`
`animation-delay`	指定动画延迟时间，即动画何时开始，默认是 `0`
`animation-iteration-count`	指定动画播放的次数，默认是 `1`。但我们一般用`infinite`，一直播放
`animation-direction` 指定动画播放的方向	默认是 `normal`	`normal`、`reverse`、`alternate`、`alternate-reverse`
`animation-fill-mode`	指定动画填充模式。默认是 `none`	`forwards`、`backwards`、`both`
`animation-play-state`	指定动画播放状态，正在运行或暂停。默认是 `running`	`running`、`pauser`
`animation-name`	指定 `@keyframes` 动画的名称

CSS 动画只需要定义一些关键的帧，而其余的帧，浏览器会根据计时函数插值计算出来，

@keyframes定义关键帧，可以是from->to（等同于0%和100%），也可以是从0%->100%之间任意个的分层设置

因此，如果我们想要让元素旋转一圈，只需要定义开始和结束两帧即可：

@keyframes rotate{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

from 表示最开始的那一帧，to 表示结束时的那一帧

也可以使用百分比刻画生命周期

@keyframes rotate{
  0%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(180deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

定义好了关键帧后，下来就可以直接用它了：

animation: rotate 2s;

属性	含义
`transition（过度）`	用于设置元素的样式过度，和`animation`有着类似的效果，但细节上有很大的不同
`transform（变形）`	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
`translate（移动）`	只是`transform`的一个属性值，即移动
`animation（动画）`	用于设置动画属性，他是一个简写的属性，包含`6`个属性

（1）CSS Transition 是一种在元素从一种状态转换到另一种状态时产生动画效果的方法。它可以用于控制元素的属性在一段时间内平滑地过渡到新的值，比如改变元素的位置、颜色、大小等等。下面是一个例子：

在这个例子中，当鼠标悬停在 .box 元素上时，它的宽度会从 100px 过渡到 200px，过渡时间为 1 秒，过渡效果为先加速后减速。

（2）CSS Animation则是一种更加灵活的动画方式，它可以通过定义关键帧来控制元素的动画效果。关键帧是指在动画过程中的某些时间点上，元素应该处于什么状态。下面是一个例子：

在这个例子中，.box 元素会沿着 X 轴方向来回移动，移动距离为 200px，移动时间为 2 秒，移动效果为先加速后减速，动画会无限循环播放。

css动画实现方式