CSS3的动画属性

迈不过友情╰ 2022-06-01 22:35 263阅读 0赞

> transition、animation和transform是CSS3中三个制作动画的重要属性，本篇文章主要对其进行学习了解。

## 一、transition ##

`transition`允许css的属性值在一定的时间区间内平滑地**过渡**。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition ：transition-property || transition-duration || transition-timing-function || transition-delay;

`transition`主要包含四个属性值：执行变换的属性：`transition-property`，变换延续的时间：`transition-duration`，在延续时间段，变换的速率变化：`transition-timing-function`，变换延迟时间：`transition-delay`。

### 1. transition-property ###

transition-property: none || all || property;

`transition-property`是用来指定当元素其中一个属性改变时执行`transition`效果。

none: 没有属性会获得过渡效果；

all: 所有属性都将获得过渡效果,**也是其默认值**；

property: 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

### 2. transition-duration ###

transition-duration: time;

`transition-duration`是用来指定元素 转换过程的持续时间，取值time为数值，单位为s（秒）或者ms(毫秒)，其默认值是0，也就是变换时是即时的。

### 3. transition-timing-function ###

transition-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-
    bezier(n,n,n,n);

以上具体取值含义如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>linear</td> 
   <td>规定以相同速度开始至结束的过渡效果。</td> 
  </tr> 
  <tr> 
   <td>ease</td> 
   <td>规定慢速开始，然后变快，然后慢速结束的过渡效果。</td> 
  </tr> 
  <tr> 
   <td>ease-in</td> 
   <td>规定以慢速开始的过渡效果。</td> 
  </tr> 
  <tr> 
   <td>ease-out</td> 
   <td>规定以慢速结束的过渡效果。</td> 
  </tr> 
  <tr> 
   <td>ease-in-out</td> 
   <td>规定以慢速开始和结束的过渡效果。</td> 
  </tr> 
  <tr> 
   <td>cubic-bezier(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td> 
   <td>在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td> 
  </tr> 
 </tbody> 
</table>

### 4. transition-delay ###

transition-delay: time;

`transition-delay`是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行`transition`效果，其取值time为数值，单位为s（秒）或者ms(毫秒)， 默认大小是”0”，也就是变换立即执行，没有延迟。

### 5. 示例 ###

html代码

css代码

.one { width: 100px; height: 100px; margin: 200px auto; background-color: #cd4a48; -webkit-transition: width, height 2s ease; -moz-transition: width, height 2s ease; -ms-transition: width, height 2s ease; -o-transition: width, height 2s ease; transition: width, height 2s ease; }
    
        .one:hover { width: 300px; height: 300px; }

效果：

![1240][]

### 6. 注意事项 ###

*  不是所有的CSS属性都支持`transition`，完整的列表查看[这里][Link 1]，以及具体的[效果][Link 2]。
 *  `transition`需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，`transition`可以算出中间状态。但是，`transition`没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。
 *  `transition`需要事件触发，所以没法在网页加载时自动发生。
 *  `transition`是一次性的，不能重复发生，除非一再触发。

## 二、animation ##

不同于`transition`只能定义首尾两个状态，`animation`可以定义任意多的关键帧，因而能实现更复杂的动画效果。

animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction

`animation`主要包含六个属性，具体含义如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><em>animation-name</em></td> 
   <td>规定需要绑定到选择器的 keyframe 名称。。</td> 
  </tr> 
  <tr> 
   <td><em>animation-duration</em></td> 
   <td>规定完成动画所花费的时间，以秒或毫秒计。</td> 
  </tr> 
  <tr> 
   <td><em>animation-timing-function</em></td> 
   <td>规定动画的速度曲线。</td> 
  </tr> 
  <tr> 
   <td><em>animation-delay</em></td> 
   <td>规定在动画开始之前的延迟，默认值为0。</td> 
  </tr> 
  <tr> 
   <td><em>animation-iteration-count</em></td> 
   <td>规定动画应该播放的次数，默认值为1。</td> 
  </tr> 
  <tr> 
   <td><em>animation-direction</em></td> 
   <td>规定是否应该轮流反向播放动画，默认值是正向。</td> 
  </tr> 
 </tbody> 
</table>

### 1. keyframe ###

在介绍`animation`具体使用之前，要先介绍keyframe。

`@keyframes` 让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。

要使用关键帧, 先创建一个带名称的`@keyframes`规则，以便后续使用 `animation-name`这个属性来调用指定的`@keyframes`. 每个`@keyframes` 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

关键帧的编写顺序没有要求，最后只会根据百分比按由小到大的顺序触发。

@keyframes animationname {keyframes-selector {css-styles;}}

具体含义如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><em>animationname</em></td> 
   <td>必需。定义动画的名称。</td> 
  </tr> 
  <tr> 
   <td><em>keyframes-selector</em></td> 
   <td>必需。动画时长的百分比。合法的值：0-100%from（与 0% 相同）to（与 100% 相同）</td> 
  </tr> 
  <tr> 
   <td><em>css-styles</em></td> 
   <td>必需。一个或多个合法的 CSS 样式属性。</td> 
  </tr> 
 </tbody> 
</table>

示例：

@keyframes identifier {
      0% { top: 0; left: 0px}
      50% { top: 30px; left: 20px; }
      100% { top: 0; left: 30px;}
    }

### 2. 示例 ###

html代码

css代码

.one { width: 100px; height: 100px; margin: 200px auto; background-color: #cd4a48; position: relative; animation: moveHover 5s ease-in-out 0.2s; }
    
    
        @keyframes moveHover {
            0% { top: 0px; left: 0px; background: #cd4a48; }
            50% { top: 200px; left: 200px; background:#A48992; }
            100% { top: 350px; left:350px; background: #FFB89A; }
        }

效果：

![1240 1][]

### 3. 其他属性 ###

除了上述主要用到的六个属性外，还要额外介绍两个属性。

**animation-fill-mode**

动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用`animation-fill-mode`属性。

animation-fill-mode: none || backwards || both

*  none：默认值，回到动画没开始时的状态。
 *  forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
 *  backwards：在 `animation-delay`所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
 *  both: 根据`animation-direction`轮流应用forwards和backwards规则。

**animation-play-state**

有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。

如果想让动画保持突然终止时的状态，就要使用`animation-play-state`属性。

animation-play-state:running || paused

`animation-play-state`主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。通过paused将正在播放的动画停下了，通过running将暂停的动画重新播放，这个属性目前很少内核支持。

## 三、transform ##

`transform`就是变形，主要包括**旋转rotate**、**扭曲skew**、**缩放scale**和**移动translate**以及**矩阵变形matrix**。

transform: none || transform-functions

none:表示不进么变换；transform-function表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种。

主要的transform-function变换函数如下：

### 1. translate ###

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>translate(<em>x</em>,<em>y</em>)</td> 
   <td>定义 2D 转换。</td> 
  </tr> 
  <tr> 
   <td>translate3d(<em>x</em>,<em>y</em>,<em>z</em>)</td> 
   <td>定义 3D 转换。</td> 
  </tr> 
  <tr> 
   <td>translateX(<em>x</em>)</td> 
   <td>定义转换，只是用 X 轴的值。</td> 
  </tr> 
  <tr> 
   <td>translateY(<em>y</em>)</td> 
   <td>定义转换，只是用 Y 轴的值。</td> 
  </tr> 
  <tr> 
   <td>translateZ(<em>z</em>)</td> 
   <td>定义 3D 转换，只是用 Z 轴的值。</td> 
  </tr> 
 </tbody> 
</table>

### 2. scale ###

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scale(<em>x</em>,<em>y</em>)</td> 
   <td>定义 2D 缩放转换。</td> 
  </tr> 
  <tr> 
   <td>scale3d(<em>x</em>,<em>y</em>,<em>z</em>)</td> 
   <td>定义 3D 缩放转换。</td> 
  </tr> 
  <tr> 
   <td>scaleX(<em>x</em>)</td> 
   <td>通过设置 X 轴的值来定义缩放转换。</td> 
  </tr> 
  <tr> 
   <td>scaleY(<em>y</em>)</td> 
   <td>通过设置 Y 轴的值来定义缩放转换。</td> 
  </tr> 
  <tr> 
   <td>scaleZ(<em>z</em>)</td> 
   <td>通过设置 Z 轴的值来定义 3D 缩放转换。</td> 
  </tr> 
 </tbody> 
</table>

### 3. rotate ###

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>rotate(<em>angle</em>)</td> 
   <td>定义 2D 旋转，在参数中规定角度。</td> 
  </tr> 
  <tr> 
   <td>rotate3d(<em>x</em>,<em>y</em>,<em>z</em>,<em>angle</em>)</td> 
   <td>定义 3D 旋转。</td> 
  </tr> 
  <tr> 
   <td>rotateX(<em>angle</em>)</td> 
   <td>定义沿着 X 轴的 3D 旋转。</td> 
  </tr> 
  <tr> 
   <td>rotateY(<em>angle</em>)</td> 
   <td>定义沿着 Y 轴的 3D 旋转。</td> 
  </tr> 
  <tr> 
   <td>rotateZ(<em>angle</em>)</td> 
   <td>定义沿着 Z 轴的 3D 旋转。</td> 
  </tr> 
 </tbody> 
</table>

### 4. skew ###

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>skew(<em>x-angle</em>,<em>y-angle</em>)</td> 
   <td>定义沿着 X 和 Y 轴的 2D 倾斜转换。</td> 
  </tr> 
  <tr> 
   <td>skewX(<em>angle</em>)</td> 
   <td>定义沿着 X 轴的 2D 倾斜转换。</td> 
  </tr> 
  <tr> 
   <td>skewY(<em>angle</em>)</td> 
   <td>定义沿着 Y 轴的 2D 倾斜转换。</td> 
  </tr> 
 </tbody> 
</table>

### 5. transform-origin ###

以上变化的默认参照点是元素的中心点，不过可以通过`transform-origin`设置元素的参照点。

transform-origin: X || Y || Z

其中X，Y，Z对应三维坐标，X，Y，Z的值可以是em，px。此外，X，Y可以是百分值，其中X也可以是字符参数值left，center，right。Y和X一样除了百分值外还可以设置字符值top，center，bottom。

具体示例就不再写了，情况比较多，实现起来也比较简单。

## 四、总结 ##

以上是关于CSS3中制作动画的三个属性，内容比较基础，不过却很实用。仅仅只需要CSS，即可实现一些较为简单的动画效果，省去了复杂的js代码。

[1240]: /images/20220602/b9503a71b980486588f8b79eb74eafbb.png
[Link 1]: http://oli.jp/2010/css-animatable-properties/
[Link 2]: http://leaverou.github.io/animatable/
[1240 1]: /images/20220602/aefabf33f30c4e4bb4ec42e5476f4406.png