CSS3 Transition 过渡动画用法介绍

时间 2019-12-16

标签 css3 css transition 过渡动画用法介绍栏目 CSS 繁體版

原文原文链接

1、 `transition`过渡动画介绍

一般，当一个元素的样式属性值发生变化时，咱们会当即看到页面元素发生变化，也就是页面元素从旧的属性值当即变成新的属性值的效果。css属性transition能让页面元素不是当即的、而是慢慢的从一种状态变成另一种状态，从而表现出一种动画过程。javascript

2、 `transition`属性语法介绍

属性	介绍
`transition-property`	元素的哪个属性将用过渡表现。例如, `opacity`,`color`。默认值是`all`。
`transition-duration`	元素过渡过程持续时间。例如，`1s`。默认值是`0s`。
`transition-timing-function`	元素过渡时的速率函数。例如, `linear`、 `ease-in`、`steps`动画分段函数或自定义的 `cubic-bezier` 函数)。默认值是`ease`，中间快，两头慢。
`transition-delay`	元素过渡延迟的时间。例如，`1s`。默认值是`0s`。

transition-property、transition-duration、transition-delay这三个transition属性中的每一个属性都支持多个参数值，参数值之间用逗号分隔，这样可以用一个样式规则制定多种CSS属性的变化。须要注意的是，每一个transition属性中的多个参数值的顺序必定要一致。css

例如：html

div {
  transition-property: opacity, left;
  transition-duration: 2s, 4s;
  transition-delay: 1s, 0s;
}
复制代码

2.一、 `transition-property`

容许值: none | all | <属性名>java

初始值: allgit

描述: 指明什么属性将触发过渡动画效果。none值表示没有变化。all值表示全部能够动画演示的属性均可以触发动画效果。不然，只有指定的属性值方式变化才能触发动画效果。github

下面是一段实例：web

<style>
   * { padding: 0;margin: 0;box-sizing: border-box;}

    .t-demo { width: 600px;margin: 20px; outline: 2px dashed; }

    .t-demo pre { transition: 2s;position: relative;left: 0;width: 100px;height: 100px;margin: 20px 0;
      border-radius: 50%;font-size: 18px;text-align: center;line-height: 100px;background: #82B600;color:#fff; }
      
    .t-demo:hover pre { left: 500px;color: red;}

    .t-demo pre:nth-child(1) { transition-property: none;}

    .t-demo pre:nth-child(2) { transition-property: all; }

    .t-demo pre:nth-child(3) { transition-property: left; }

    .t-demo pre:nth-child(4) { transition-property: left, color;line-height: 30px;padding: 20px 0; }
  </style>
  <div class="t-demo">
    <pre>none</pre>
    <pre>all</pre>
    <pre>left</pre>
    <pre>left,<br>color</pre>
  </div>

复制代码

2.二、 `transition-duration`

容许值: <时间>segmentfault

初始值: 0bash

描述: 指明元素过渡持续的时间长度。函数

.t-demo pre:nth-child(1) { transition-duration: 0s;}

.t-demo pre:nth-child(2) { transition-duration: 1s;}

.t-demo pre:nth-child(3) { transition-duration: 2s; }

.t-demo pre:nth-child(4) { transition-duration: 3s;}

复制代码

2.三、 `transition-timing-function`

初始值: ease

描述:

transition-timing-function属性描述了动画随着时间运动的速度-时间函数。能够使用几种常见的元素过渡时的速率函数，也能够使用贝塞尔(cubic-bezier)函数加控制点来自定义动画的变换速度方式。
step-start等同于 steps(1, start),过渡效果分一步完成，在步的起始开始，即直接过渡到效果。
step-end 等同于 steps(1,end)，过渡效果分一步完成，在步的结束开始，即transition-duration以后完成过渡效果。
steps动画分段函数。steps有两个参数。第一个参数表示把动画分割成几回。第二个参数能够取 start 或 end 二者其一。

下面是一段实例：

.t-demo pre:nth-child(1) { transition-timing-function: ease;}

.t-demo pre:nth-child(2) { transition-timing-function: linear;}

.t-demo pre:nth-child(3) { transition-timing-function: ease-out; }

.t-demo pre:nth-child(4) { transition-timing-function: cubic-bezier(0.8,0,0,0.8);}

.t-demo pre:nth-child(5) { transition-timing-function: steps(3,start);}

<div class="t-demo">
    <pre>ease</pre>
    <pre>linear</pre>
    <pre>ease-out</pre>
    <pre>cubic-bezier</pre>
    <pre>steps(3,start)</pre>
</div>

复制代码

2.四、 `transition-delay`

容许值: <时间>

初始值: 0

描述: 元素过渡动画开始延迟的时间。

2.五、 `transition`属性简写

下面transition是的简写形式对应的单独的属性定义：

div {
    
    /*  
        transition-property:left;
        transition-duration: 2s;
        transition-timing-function: ease;
        transition-delay: 1s;
     */
    transition: left 2s ease 1s;
    
    /*  
        transition-property:left;
        transition-timing-function: ease;
        transition-duration: 2s;
     */
    transition: color 2s;
    
     /*  
        transition-property:all;
        transition-duration: 2s;
        transition-timing-function: ease;
        transition-delay: 0s;
     */
     transition: 2s;
}

复制代码

2.六、 `transition`的使用注意事项

transition须要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。好比，height从0px变化到100px，transition能够算出中间状态。可是，transition无法算出0px到auto的中间状态，也就是说，若是开始或结束的设置是height: auto，那么就不会产生动画效果。相似的状况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。