动画--过渡延迟时间 transition-delay
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的更多相关文章
- CSS-弹性布局-动画-过渡
1.弹性布局 1.项目的属性 该组属性只能设置在某项目元素上,只控制一个项目,是不影响容器以及其他项目的效果. 1.order 作用:定义项目的排列顺序,值越小,越靠近起点,默认值是0 取值:整数数字 ...
- CSS3之边框样式(动画过渡)
简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...
- CSS3特效之转化(transform)和过渡(transition)
CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...
- vue-learning:33 - component - 内置组件 - 过渡组件transition
vue内置过渡组件transition 目录 什么是过渡 基本过渡或动画实现的语法 css过渡动画:transition / animation js过渡:特定事件钩子函数 各种情形下的过渡实现,使用 ...
- CSS动画 animation与transition
一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...
- css动画过渡
css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...
- 监测c3动画过渡完成的事件
监测css3动画完成的事件 transitionend 用法: let element = document.getElementById("slidingMenu"); elem ...
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡
动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...
随机推荐
- http协议(转)
主要还是为了存放状态码··· 剖析 HTTP 协议 目录 HTTP 概述 HTTP 消息结构 HTTP 请求 HTTP 响应 HTTP 状态码 参考 回到顶部 HTTP 概述 HTTP 是什么? ...
- WPF自定义RoutedEvent事件示例代码
************************* 引用网友,便于查找所用..... 创建自定义路由事件和应用分为6个步骤: (1)自定义路由事件参数对象 (2)声明并注册路由事件 (3)为路由事件添 ...
- .net加载到vb 进程
.net加载到vb 进程时,总是不能加载进去,什么原因呢? 要尝试三个步骤, 首先调试vb ,没有问题,代码能够调试 然后注册.net的dll,生成tlb文件,生成解决方案,调整附加到进程时的选项. ...
- sql 主外键
alter table Orders add CONSTRAINT fk_PerOrders FOREIGN KEY(id) REFERENCES Persons(Id) 以上SQL中,Persons ...
- imx6 framebuffer 分析
分析imx6 framebuffer设备和驱动的注册过程. Tony Liu, 2016-8-31, Shenzhen 相关文件: arch/arm/mach-mx6/board-mx6q_sabre ...
- HBASE架构解析(一)
http://www.blogjava.net/DLevin/archive/2015/08/22/426877.html 前记 公司内部使用的是MapR版本的Hadoop生态系统,因而从MapR的官 ...
- oracle视图V$BH && X$BH的使用列子
1创建一个测试表,test,并且插入10000行数据: SQL> create table test (id int); SQL> begin 2 for i in 1 ...
- WHERE谓词对索引使用的影响
本篇博文只测试WHERE谓词对multi-column index使用的影响,主要篇幅是SQL代码+截图.详细内容请参考<Inside the SQL Server Query Optimize ...
- pymongo使用总结
0. 何为pymongo pymongo是操作MongoDB的python模块 1.安装pymongo # easy_install pymongo 2.连接mongodb >>> ...
- 使用Redis来实现LBS的应用
原文地址 微信.陌陌 架构方案分析 近两年.手机应用,莫过于微信.陌陌之类最受欢迎:但实现原理,分享文章甚少. 故,提出两种方案,供分享:不对之处,敬请留言学习. 目标 查找附近的某某某,由近到远返回 ...