transform、transition 和 animation的详细讲解

港控/mmm° 2021-09-15 10:46 502阅读 0赞

转载：https://segmentfault.com/a/1190000004460780

> ### 关于CSS3制作动画的几个属性： ###
> 
> ### 变形(transform)，移动、缩放、旋转（0.2毛特效） ###
> 
> ### 转换(transition)，需要事件触发，只能一次（0.5毛特效） ###
> 
> ### 动画(animation)，动画，可一直执行（1毛特效） ###

## 一、transform ##

属性：

旋转`rotate`（中心为原点）  
扭曲、倾斜`skew`（skew(x,y), skewX(x), skewY(y)）  
缩放`scale`（scale(x,y), scaleX(x), scaleY(y)）  
移动`translate`（translateX,translateY）  
矩阵变形`matrix`。

各个属性的用法：

*  `transform:rotate()`：旋转；其中“10deg”表示“10度”。

transform: rotate(10deg);

*  `transform:skew()`：倾斜；

transform: skew(20deg);

*  `transform:scale()`：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

transform: scale(1.5);

*  `transform:translate()`：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

transform: translate(120px,0);

*  综合在一起：(效果是动态)

.demo{     -webkit-transition:all 1s ease-in-out;    -moz-transition:all 1s ease-in-out} .demo:hover{     -webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);    -moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

## 二、transition ##

> css的transition允许css的`属性值`在`一定的时间区间`内`平滑地`过渡。

四个属性：

1.  transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。
2.  transition-duration是用来指定元素,转换过程的持续时间
3.  transition-timing-function:
4.  transition-delay\[延迟\] ：是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果

综上所述，相对应的一个示例代码：

a {
        transition: background 0.5s ease-in,color 0.3s ease-out;
        transition：transform .4s ease-in-out;
      }

所支持的属性

1.  `color`: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-`color,border-color`,`color`,`outline-color`等css属性；
2.  `length`: 真实的数字 如：`word-spacing`,`width`,`vertical-align`,`top`,`right`,`bottom`,`left`,`padding`,`outline-width`,`margin`,`min-width`,`min-height`,`max-width`,`max-height`,`line-height`,`height`,`border-width`,`border-spacing`,`background-position`等属性；
3.  `percentage`:真实的数字 如：`word-spacing`,`width`,`vertical-align`,`top`,`right`,`bottom`,`left`,`padding`,`outline-width`,`margin`,`min-width`,`min-height`,`max-width`,`max-height`,`line-height`,`height`,`border-width`,`border-spacing`,`background-position`等属性；
4.  `integer`离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：`outline-offset`,`z-index`等属性；
5.  `number`真实的（浮点型）数值，如：`zoom`,`opacity`,`font-weight`,等属性；
6.  `transform` list
7.  `rectangle`:通过x, y, width 和 height（转为数值）变换，如：`crop`
8.  `visibility`: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：`visibility`
9.  `shadow`: 作用于color, x, y 和 blur（模糊）属性,如：`text-shadow`
10. `gradient`: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画,如：`background-image`
11. paint server (SVG): 只支持下面的情况：从`gradient`到`gradient`以及`color`到`color`，然后工作与上面类似
12. space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化
13. a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化

**三、animation（@keyframes规则）**

> CSS3中添加的新属性`animation`是用来为元素实现动画效果的，但是`animation`无法单独担当起实现动画的效果。承载动画的另一个属性——`@keyframes`。使用的时候为了兼容可加上`-webkit-、-o-、-ms-、-moz-、-khtml-`等前缀以适应不同的浏览器。

*  创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
 *  通过 @keyframes 规则，您能够创建动画。
 *  @keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。
 *  @keyframes 它定义的动画并不直接执行，需要借助animation来运转。
 *  在动画过程中，您能够多次改变这套 CSS 样式。
 *  以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
    
        百分比是指动画完成一遍的时间长度的的百分比 ，0% 是动画的开始时间，50%是动画完成一半的时间，100% 动画的结束时间。百分比后面的花括号写：在动画执行过程中的某时间点要完成的变化。
 *  为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

--------------------

语法

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

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

例子1：

> 名字为`gif`的`@keyframes` ，动画完成需要的总时长为`1.4s`,刚开始的时候图片旋转为0度，动画完成的时候图片旋转360度

.load-border {
        width: 120px;
        height: 120px;
        background: url(../images/loading_icon.png) no-repeat center center;
        -webkit-animation: gif 1.4s infinite linear;
        animation: gif 1.4s infinite linear; 
    }
    @keyframes gif {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

例子2：

> 名字为`mymove`的`@keyframes` ，动画完成需要的总时长为`1s`,刚开始的时候图片距顶部距离为`0px`，`0.25s`后图片距顶部距离为`200px`，`0.5s`后图片距顶部的距离为`100px`，以此类推

.img {
        width: 120px;
        height: 120px;
        background: url(../images/icon.png) no-repeat center center;
        -webkit-animation: gif 1.4s infinite linear;
        animation: mymove 1s infinite linear;
    }
    @keyframes mymove
    {
        0%   {top:0px;}
        25%  {top:200px;}
        50%  {top:100px;}
        75%  {top:200px;}
        100% {top:0px;}
    }

例子3：

> 在一个动画中改变多个 CSS 样式：

@keyframes mymove
    {
        0%   {top:0px; background:red; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
    }