动画--过渡延迟时间 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框架默认给各个组件提供了基本动画的过渡 ...
随机推荐
- day08
软件系统体系结构 常见软件系统体系结构B/S.C/S 1.1 C/S C/S结构即客户端/服务器(Client/Server),例如QQ: 需要编写服务器端程序,以及客户端程序,例如我们安装的 ...
- CC254x(cc2540/cc2541)的微信AirSync调试笔记
一.前言 本尊自诩为IOT小能手,一直没涉足蓝牙实在说不过去.刚好上个月底的时候计划做个BLE设备,这阵子利用业余时间自学了BLE协议栈,了解了GATT,磕磕绊绊完成CC254x(cc2540/cc2 ...
- WIN 8.1使用常见问题及解决
WIN 8.1正式版64位(cn_windows_8_1_pro_vl_x64_dvd_2971907)使用问题及解决 一.IE11的输入框会变蓝: 如在百度中搜索时,搜索框和按钮均变成蓝色背景, ...
- Java多线程 - 线程状态
转自: http://www.cnblogs.com/lwbqqyumidi/p/3804883.html 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的 ...
- margin负值
一列li并排的时候,需要一些间距的时候,又不需要最右边或者最左边有间距. <!DOCTYPE html> <html lang="zh-CN"> <h ...
- OO之美3
面向对象和基于对象 基于对象:所以基于对象,就是一种对数据类型的抽象,封装一个结构包含了数据和函数,然后以对象为目标进行操作.构建的基础是对象,但是操作对象并不体现出面向对象的继承性,也就是基于对象局 ...
- Swift-11-委托模式
委托是一种设计模式,它允许类或者结构体将一些需要它们负责的功能交由(或委托)给其他的类型的实例.委托模式很简单:定义协议来封装那些需要被委托的函数和方法,使其遵循者拥有这些被委托的函数和方法.委托模式 ...
- Java Main Differences between HashMap and HashTable
转自这篇帖子:http://www.importnew.com/7010.html HashMap和Hashtable的比较是Java面试中的常见问题,用来考验程序员是否能够正确使用集合类以及是否可以 ...
- day01-基础内容
day01-基础内容 1.Linux: 1)开源的操作系统.免费的 主要用于服务器端,而Java主要是服务器端开发 2)Linux与Windows目录结构的区别: 2.1)文件系统不同 ...
- HTML5所有标签汇总按功能
基础 格式 表单 框架 图像 音频/视频 链接 列表 表格 样式/节 元信息 编程1. 基础(9个)<!DOCTYPE><html><title><body& ...