1.       transition-property

默认值为 all，表示所有可被动画的属性都表现出过渡动

可以指定多个 property

属性值：
none
没有过渡动画。
all
所有可被动画的属性都表现出过渡动画。
IDENT
属性名称 （可以指定多个）

                transition-property: width,height;

                transition-duration: 9s,1s;

2       transition-duration

属性以秒或毫秒为单位指定过渡动画所需的时间。
默认值为 0s ，表示不出现过渡动画。

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

属性值
以毫秒或秒为单位的数值
<time> 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。一定要加单位(不能写0 一定要写0s 1s,0s,1s)！

transition-property:width,background;
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>transition-property</title>

<style type="text/css">

*{

    margin: ;

    padding: ;

}

div {

    width: 200px;

    height: 200px;

    margin: auto;

    background: pink;

    transition-property:width,background;

    transition-duration:3s;

}

div:hover {

    cursor: pointer;

    width: 600px;

    height: 600px;

    background: deeppink;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

transition

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #test{

                width: 200px;

                height: 200px;

                border-radius:%;

                border:3px solid red;

                background: pink;

                text-align: center;

                font: 50px/200px "微软雅黑" ;

                position: absolute;

                left: ;

                right: ;

                bottom: ;

                top: ;

                margin: auto;

                transition:3s;

            }

            html{

                height: %;

            }

            html body{

                  height: %;

                  border: 3px solid yellow;

                  margin-top: 100px;

            }

            body:hover #test{

                width: 100px;

                height: 100px;

                font: 30px/100px "微软雅黑";

            }

        </style>

    </head>

    <body>

        <div id="test">

            主页

        </div>

    </body>

</html>

3    transition-delay

transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
默认值：0s

你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变

属性值
值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

transition-delay:1s;
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #test{

                width: 200px;

                height: 200px;

                border:3px solid red;

                background: pink;

                text-align: center;

                font: 50px/200px "微软雅黑" ;

                position: absolute;

                left: ;

                right: ;

                bottom: ;

                top: ;

                margin: auto;

                transition-property: width,height;

                transition-duration: 9s,1s;

                 transition-delay:1s;

            }

            html{

                height: %;

            }

            html body{

                  height: %;

                  border: 3px solid yellow;

                  margin-top: 100px;

            }

            body:hover #test{

                width: 100px;

                height: 100px;

                font: 30px/100px "微软雅黑";

            }

        </style>

    </head>

    <body>

        <div id="test">

            主页

        </div>

    </body>

</html>

transition-delay

4   transition-timing-function:过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变

默认值：ease

1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier： 贝塞尔曲线
7、step-start：等同于steps(1,start)
step-end：等同于steps(1,end)
steps(<integer>,[,[start|end]]?)
第一个参数：必须为正整数，指定函数的步数
第二个参数：指定每一步的值发生变化的时间点（默认值end）

 transition-timing-function: inherit;
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #test{

                width: 200px;

                height: 200px;

                border:3px solid red;

                background: pink;

                text-align: center;

                font: 50px/200px "微软雅黑" ;

                position: absolute;

                left: ;

                right: ;

                bottom: ;

                top: ;

                margin: auto;

                transition-property: width,height;

                transition-duration: 9s,1s;

                 transition-timing-function: inherit;

            }

            html{

                height: %;

            }

            html body{

                  height: %;

                  border: 3px solid yellow;

                  margin-top: 100px;

            }

            body:hover #test{

                width: 100px;

                height: 100px;

                font: 30px/100px "微软雅黑";

            }

        </style>

    </head>

    <body>

        <div id="test">

        </div>

    </body>

</html>

属性值列表长度不一致时：

超出的情况下是会被全部截掉的
不够的时候，关于时间的会重复列表，transition-timing-function的时候使用的是默认值ease

检测过渡是否完成：

当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd
（每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件）

在transition完成前设置 display: none，事件同样不会被触发

支持属性                  https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

css---8 过渡属性刨析的更多相关文章

  1. 【CSS】过渡、动画和变换

    1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE ht ...

  2. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  3. Orchard 刨析：Logging

    最近事情比较多,有预研的,有目前正在研发的,都是很需要时间的工作,所以导致这周只写了两篇Orchard系列的文章,这边不能保证后期会很频繁的更新该系列,但我会写完这整个系列,包括后面会把正在研发的东西 ...

  4. Orchard 刨析：导航篇

    之前承诺过针对Orchard Framework写一个系列.本应该在昨天写下这篇导航篇,不过昨天比较累偷懒的去玩了两盘单机游戏哈哈.下面进入正题. 写在前面 面向读者 之前和本文一再以Orchard ...

  5. CSS transition 过渡 详解

    transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...

  6. 动画--过渡属性 transition-property

    早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更 ...

  7. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  8. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  9. css3-transition过渡属性

    transition主要是用于一个元素的一种状态到另一种状态的一个过渡的过程,不能够主动触发,必须依赖于事件,例如hover伪类选择器. 一,transition简写 transition:要过渡的属 ...

随机推荐

  1. Java中有趣的String、StringBuffer与StringBuilder

    String介绍 String类属于java.lang包中,String类是不可变类,任何对String的改变都会引发新的String对象的生成. 创建String的两种方式: 1.通过构造器创建:S ...

  2. Spring IOC源码分析（一）：ApplicationContext体系结构设计之自底向上分析

    spring-context包1. ApplicationContext接口 public interface ApplicationContext extends EnvironmentCapabl ...

  3. Flask数据库的基本操作

    Flask操作数据库基本操作   常用的SQLAlchemy字段类型 类型名 python中类型 说明 Integer int 普通整数,一般是32位 SmallInteger int 取值范围小的整 ...

  4. 天道神诀--IPSAN(iscsi配置)

    数据存储技术 DSA(Direct Attacted Storage 直接附加存储)本地硬盘 NAS(Network Attacted Storage 网络附加存储)网络服务共享:文件夹 SAN(St ...

  5. 如何让contenteditable元素只能输入纯文本

    本文出自张旭鑫博客,要知详情,请戳右侧地址:http://www.zhangxinxu.com/wordpress/?p=5120 一.温故而知新 很多年以前,稍等,让我搜一下contentedita ...

  6. mongo数组修改器—$push、$ne、$addtoset、$pop、$pull

    这几个方法也很有意思 $push 像已有的数组末尾加入一个元素,要是元素不存在,就会创建一个新的元素,如果元素存在了,就会再添加一个一模一样的元素,会造成元素的重复,所以在使用的时候,要确保该元素不存 ...

  7. css3条纹进度条

    新建div,取名progress,如下 <div class="progress"></div> 在里面插入条纹进度条,以及进度显示文本进度: <di ...

  8. 【第二次个人作业】结对作业Core第一组：四则运算生成PB16061082+PB16120517

    [整体概况] 1.描述最终的代码的实现思路以及关键代码. 2.结对作业两个人配合的过程和两个人分工. 3.API接口文档和两个组的对接. 4.效能分析,优化分析和心得体会. [代码实现] 一. 实现功 ...

  9. 从零开始搭搭建系统3.1——顶级pom制定

    从零开始搭搭建系统3.1——顶级pom制定

  10. BCZM: Chapter 1

    1.1 CPU 占用率 https://www.cnblogs.com/TenosDoIt/p/3242910.html 1.2 中国象棋将帅 https://blog.csdn.net/kabini ...