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. centos7下jenkins升级

    systemctl stop jenkins cd cd /usr/lib/jenkins/ mv jenkins.war jenkins.war.bac rz #上传下载好的最新jinkens.wa ...

  2. Samcompu Loves Water

    题目背景 Samcompu拥有大量的"水"资源!! 题目描述 Samcompu需要制定一个水计划.这个计划的主要目的就是为了避开老师监视的时间来水. 老师在中途会离开机房T次,第i ...

  3. Flatty Shadow图标自动产生器——在线生成各种扁平化 ICON

    在扁平化风格越来越流行的今天,网页.软件界面和图标的设计大都采用了扁平化风格.特别是扁平化图标的设计,摒弃了一切3D元素的设计,阴影.纹理.透视神马的统统不要,让图标简洁高效,富有现代感. 今天给大家 ...

  4. 提供免费可商用的优秀背景视频素材——COVERR

    现在经常看到很多网站都是贴近更现代化的设计,首页都会放置跟网站内容相关的视频短片作为背景,不用按下播放按钮,就有动态显示效果,跟以往静态图片相较下更动态.更有活力,对网站的视觉体验有一定的提升作用.但 ...

  5. Flink开发-IDEA scala开发环境搭建

    现在大数据相关服务,越来越倾向于使用scala语言,scala函数式编程的优势我不多赘述.最明显的一个优点,代码简洁.看个WordCount实现对比: Java版WordCount Execution ...

  6. shell脚本将命令的结果赋值给变量的2种写法

    Shell 也支持将命令的执行结果赋值给变量,常见的有以下两种方式: variable=`command`variable=$(command) 第一种方式把命令用反引号` `(位于 Esc 键的下方 ...

  7. js实现canvas保存图片为png格式并下载到本地

    canvas 保存图片 下载到本地 function base64Img2Blob(code){ var parts = code.split(';base64,'); var contentType ...

  8. electron-vue中关闭烦人的es语法检查

    本项目环境是 electron-vue搭建的项目,项目结构根vue-cli创建的项目结构稍微有所不同 主要修改的地方有3个 把这3个文件里面的以下代码全部删掉 { test: /\.(js)$/, e ...

  9. Codeforces768B-Code For 1-类似线段树-枚举+单点更新or区间更新

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:Portal传送门  原题目描述在最下面.  每次把\(n\ ...

  10. LeetCode 1037. Valid Boomerang (有效的回旋镖)

    题目标签:Math 题目给了我们三个点,让我们判断这三个点是否在一条直线上. 利用斜率 k = (y1 - y0) / (x1 - x0) 来判断,如果 三个点 abc, ab 的斜率 = bc 的斜 ...