transition-delay属性transition-duration属性极其类似,不同的是transition-duration是用来设置过渡动画的持续时间,而transition-delay主要用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行。

有时我们想改变两个或者多个css属性的transition效果时,只要把几个transition的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点:第一个时间的值为 transition-duration,第二个为transition-delay。

例如:a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

示例演示:

通过transition属性将一个200px *200px的橙色容器,在鼠标悬浮状态时,过渡到一个300px * 300px的红色容器。而且整个过渡0.1s后触发,并且整个过渡持续0.28s。

HTML代码:

<div class="wrapper">
<div>鼠标放到我的身上来</div>
</div>

CSS代码:

.wrapper {
width: 400px;
height: 400px;
margin: 20px auto;
border: 2px dotted red;
}
.wrapper div {
width: 200px;
height: 200px;
background-color: orange;
-webkit-transition: all .28s ease-in .1s;
transition: all .28s ease-in .1s;
}
.wrapper div:hover {
width: 300px;
height: 300px;
background-color: red;
}

演示结果

鼠标移入:

鼠标移出:

动画--过渡延迟时间 transition-delay的更多相关文章

  1. CSS-弹性布局-动画-过渡

    1.弹性布局 1.项目的属性 该组属性只能设置在某项目元素上,只控制一个项目,是不影响容器以及其他项目的效果. 1.order 作用:定义项目的排列顺序,值越小,越靠近起点,默认值是0 取值:整数数字 ...

  2. CSS3之边框样式(动画过渡)

    简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...

  3. CSS3特效之转化(transform)和过渡(transition)

    CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...

  4. vue-learning:33 - component - 内置组件 - 过渡组件transition

    vue内置过渡组件transition 目录 什么是过渡 基本过渡或动画实现的语法 css过渡动画:transition / animation js过渡:特定事件钩子函数 各种情形下的过渡实现,使用 ...

  5. CSS动画 animation与transition

    一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...

  6. css动画过渡

    css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...

  7. 监测c3动画过渡完成的事件

    监测css3动画完成的事件 transitionend 用法: let element = document.getElementById("slidingMenu"); elem ...

  8. CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

  9. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

随机推荐

  1. ubuntu下c/c++开发环境配置

    刚转好的UBUNTU14.04.01 TLS . 试了一下GCC,结果如下不能编译 gcc -o hello hello.cpp gcc: error trying to exec 'cc1plus' ...

  2. linux configure

    Linux环境下的软件安装,并不是一件容易的事情;如果通过源代码编译后在安装,当然事情就更为复杂一些;现在安装各种软件的教程都非常普遍;但万变不离其中,对基础知识的扎实掌握,安装各种软件的问题就迎刃而 ...

  3. Android项目框架之图片加载框架的选择

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 从Android爆发以后,自定义的控件如EditTextWithDelete.ActionBar.P ...

  4. php练习:给指定商品添加特殊效果

    老板说: 我只要在文本框填1|3 ,那第1和第3个商品都要标注! 思考过程: 有了重要信息1和3,而循环商品时$key按顺序自动递增,那么只要key和信息匹配的话,就判断商品添加标注,这个可以把位置信 ...

  5. 文件操作_菜单<代码>

    info文件中的内容为: { "河北省": {"石家庄": {"无极县":"", "高邑县":&qu ...

  6. Codeforces Round #376 (Div. 2) C. Socks---并查集+贪心

    题目链接:http://codeforces.com/problemset/problem/731/C 题意:有n只袜子,每只都有一个颜色,现在他的妈妈要去出差m天,然后让他每天穿第 L 和第 R 只 ...

  7. Subway---poj2502(最短路)

    题目链接:http://poj.org/problem?id=2502 人走路的速度是10km/h,地铁的速度是40km/h题目给出一个起点,一个终点,以及几条地铁线路运行的站点.题目给的点的做坐标单 ...

  8. JS-007-富文本域操作

    在日常 web 编写过程中,富文本域几乎成为了一个网站不可页面元素,同时,其也有着各种各样的实现方式,网络上也存在着各种各样的集成插件可供引用.此文以 js 获取.修改 163 邮箱写邮件时的邮件内容 ...

  9. ORACLE十进制与十六进制的转换

    十进制与十六进制的转换 十进制-->十六进制 select to_char(100,'XX') from dual; 十六进制-->十进制select to_number('7D','XX ...

  10. stasm+三角剖分