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. day08

      软件系统体系结构   常见软件系统体系结构B/S.C/S 1.1 C/S C/S结构即客户端/服务器(Client/Server),例如QQ: 需要编写服务器端程序,以及客户端程序,例如我们安装的 ...

  2. CC254x(cc2540/cc2541)的微信AirSync调试笔记

    一.前言 本尊自诩为IOT小能手,一直没涉足蓝牙实在说不过去.刚好上个月底的时候计划做个BLE设备,这阵子利用业余时间自学了BLE协议栈,了解了GATT,磕磕绊绊完成CC254x(cc2540/cc2 ...

  3. WIN 8.1使用常见问题及解决

      WIN 8.1正式版64位(cn_windows_8_1_pro_vl_x64_dvd_2971907)使用问题及解决 一.IE11的输入框会变蓝: 如在百度中搜索时,搜索框和按钮均变成蓝色背景, ...

  4. Java多线程 - 线程状态

    转自: http://www.cnblogs.com/lwbqqyumidi/p/3804883.html 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的 ...

  5. margin负值

    一列li并排的时候,需要一些间距的时候,又不需要最右边或者最左边有间距. <!DOCTYPE html> <html lang="zh-CN"> <h ...

  6. OO之美3

    面向对象和基于对象 基于对象:所以基于对象,就是一种对数据类型的抽象,封装一个结构包含了数据和函数,然后以对象为目标进行操作.构建的基础是对象,但是操作对象并不体现出面向对象的继承性,也就是基于对象局 ...

  7. Swift-11-委托模式

    委托是一种设计模式,它允许类或者结构体将一些需要它们负责的功能交由(或委托)给其他的类型的实例.委托模式很简单:定义协议来封装那些需要被委托的函数和方法,使其遵循者拥有这些被委托的函数和方法.委托模式 ...

  8. Java Main Differences between HashMap and HashTable

    转自这篇帖子:http://www.importnew.com/7010.html HashMap和Hashtable的比较是Java面试中的常见问题,用来考验程序员是否能够正确使用集合类以及是否可以 ...

  9. day01-基础内容

    day01-基础内容 1.Linux:  1)开源的操作系统.免费的    主要用于服务器端,而Java主要是服务器端开发  2)Linux与Windows目录结构的区别:    2.1)文件系统不同 ...

  10. HTML5所有标签汇总按功能

    基础 格式 表单 框架 图像 音频/视频 链接 列表 表格 样式/节 元信息 编程1. 基础(9个)<!DOCTYPE><html><title><body& ...