CSS - 过渡 - transtions

介绍

实验中的功能。 可动画属性列表

是一个 CSS 模块，定义了如何创建一个平滑地变换 CSS 属性值的方法。它不仅允许创建变换方法，同时也允许通过定时函数来控制变换方法。

比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。

隐式过渡

通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定。

 
 

属性

  • transition：简写属性。包含如下属性：

    • transition-delay：指定延迟，即属性开始变化时与过渡开始发生时之间的时长。

    • transition-duration：指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。

    • transition-property：指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。

    • transition-timing-function：指定一个函数，定义属性值怎么变化。

 
 

属性 transition

过渡/动画 都可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active或者通过 JavaScript 实现的状态变化。

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

语法：
transition = 
  <single-transition>#  

<single-transition> = 
  [ none | <single-transition-property> ]  ||
  <time>                                   ||
  <easing-function>                        ||
  <time>                                   

<single-transition-property> = 
  all             |
  <custom-ident>  

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                                |
  step-end                                  |
  steps( <integer> [, <step-position> ]? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}
语法示例：
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

  • 零或一个值，表示转换应适用的属性。这可能是以下任何一种：

    • 关键字none
    • 关键字all
    • 命名 CSS 属性的 <custom-ident>。

  • 零或一个 <single-transition-timing-function> 值表示要使用的过渡函数。

  • 零，一或两个 <time>值。
    当有一个值时，第一个值被分配给 transition-duration。
    当有两个值时，第一个值被分配给 transition-duration，第二个值被分配给transition-delay。

 
 

属性 transition-property

实验中的功能

语法：
transition-property = 
  none                           |
  <single-transition-property>#  

<single-transition-property> = 
  all             |
  <custom-ident>

  • none：没有过渡动画。

  • all：所有可被动画的属性都表现出过渡动画。

  • IDENT：属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。

 
 

属性 transition-duration

实验中的功能，可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。

语法：
transition-duration = 
  <time [0s,∞]>#
  • <time>：表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。

 
 

属性 transition-timing-function

实验中的功能

语法：
transition-timing-function = 
  <easing-function>#  

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                                |
  step-end                                  |
  steps( <integer> [, <step-position> ]? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}

 
 

属性 transition-delay

实验中的功能

语法：
transition-duration = 
  <time [0s,∞]>#
  • <time>：表明动画效果属性生效之前需要等待的时间。

 
 

应用

示例1：颜色的变化
CSS
.d2{
    display: flex;
    flex-flow: row; 
    width: 300px;
    justify-content: space-evenly;
}
.trans,
.trans1{
    width: 100px;
    height: 100px;
    background-color: green;
}
.trans1{
    transition: background-color 2s ease-in;
}
.trans:hover{
    animation: 2s "ani1" 1 ease-in  alternate;
}
.trans1:hover{
    background-color: red;
}

@keyframes ani1 {
    from{
        background-color: green;
    }
    100%{
        background-color: red;
    }
}

效果：
示例2：颜色、大小的变化
CSS
.d2{
    display: flex;
    flex-flow: row; 
    width: 300px;
    justify-content: space-evenly;
}
.trans,
.trans1{
    width: 100px;
    height: 100px;
    background-color: green;
}
.trans1{
    transition: background-color 2s ease-in, width 2s ease, height 2s ease;
}
.trans:hover{
    animation: 2s "ani1" 2 ease-in  alternate;
}
.trans1:hover{
    background-color: red;
    width: 150px;
    height: 150px;
}

@keyframes ani1 {
    from{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    100%{
        width: 150px;
        height: 150px;
        background-color: red;
    }
}

效果：
示例3：与JS一起使用
CSS:
p {
  padding-left: 60px;
}
.foo{
    position: absolute;
    top: 0;
    left: 0;
}
#foo1 {
    border-radius: 50px;
    width: 50px;
    height: 50px;
    background: #c00;
    
    transition:  all 1s;
}
#foo2 {
    border-radius: 30px;
    width: 30px;
    height: 30px;
    background: green;
}
JS:
<script>
    var f1 = document.getElementById('foo1');
    var f2 = document.getElementById('foo2');
    document.addEventListener('click', function(ev){
        f1.style.left = (ev.clientX-25)+'px';
        f1.style.top = (ev.clientY-25)+'px';
        
        f2.style.left = (ev.clientX-25)+'px';
        f2.style.top = (ev.clientY-25)+'px';
    },false);
</script>
HTML:
<p>随便点击某处来移动球</p>
<div id="foo1" class="foo"></div>
<div id="foo2" class="foo"></div>

效果：

 
 

检测过渡是否完成

当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是transitionend，在 WebKit 下是webkitTransitionEnd。

transitionend 事件提供两个属性:

  • propertyName：字符串，指示已完成过渡的属性。

  • elapsedTime：浮点数，指示当触发这个事件时过渡已运行的时间（秒）。这个值不受 transition-delay。

可以用 element.addEventListener() 方法来监听这个事件：

示例：
CSS:
.trans1{
    transition: background-color 2s ease-in;
}
JS:
var el = document.getElementById("tra1");
el.addEventListener("transitionend",listener);
el.addEventListener("transitionstart",listener);
el.addEventListener("transitionrun",listener);
el.addEventListener("transitioncancel",listener);

var ul = document.getElementById("ul");

function listener(event){
    var li = document.createElement("li");
    switch (event.type){
        case "transitionstart":
            li.innerHTML = "时间：" + event.elapsedTime + ", 属性：" + event.propertyName + "开始了";
            break;
        case "transitionend":
            li.innerHTML = "时间：" + event.elapsedTime + ", 属性：" + event.propertyName + "结束了";
            break;
        case "transitionrun":
            li.innerHTML = "时间：" + event.elapsedTime + ", 属性：" + event.propertyName + "正在运行,";
            break;
        case "transitioncancel":
            li.innerHTML ="时间：" +  event.elapsedTime + ", 属性：" + event.propertyName + "取消了,";
            break;
        default:
            break;
    }
    ul.appendChild(li);
}

完整的过渡效果：

不完整的过渡效果：

 
 

当transition-property与transition-duration不一致

示例：
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

等价：

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容