css3的过度,transition
transition
版本:CSS3
transitionCSS属性是
示例/* apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* apply to 2 properties */
transition: margin-right 4s, color 1s;
/* apply to all changed properties */
transition: all 0.5s ease-out;
/* global values */
transition: inherit;
transition: initial;
transition: unset;
浏览器支持
IE10以上浏览器都支持transition
语法transition:[,]*
取值:
transition属性可以被指定为一个或多个 CSS 属性的过渡效果,多个属性之间用逗号进行分隔。
每个单属性转换都描述了应该应用于单个属性的转换(或特殊值none)。这包括:零或一个值,表示转换应适用的属性。这可能是以下任何一种:关键字none、关键字all、命名 CSS 属性的。
零或一个值表示要使用的过渡函数
零,一或两个
当transition属性的值个数超过可以接收的值的个数时该如何处理。简而言之,当transition属性的值个数超过可以接收的值的个数时,多余的值都会被忽略掉,不再进行解析。
说明:
复合属性。检索或设置对象变换时的过渡。
=[ none| ] ||||||注意:如果只提供一个参数,则为参数,则第一个为
可以为同一元素的多个属性定义过渡效果。示例:
缩写方式:transition: border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
拆分方式:transition-property: border-color, background-color, color;
transition-duration:.5s,.5s,.5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay:.1s,.1s,.1s;
如果定义了多个过渡的属性,而其他属性只有一个参数值,则表明所有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行缩写:
拆分方式:transition-property: border-color, background-color, color;
transition-duration:.5s;
transition-timing-function: ease-in;
transition-delay:.1s;
如果需要定义多个过渡属性且不想指定具体是哪些属性过渡,同时其他属性只有一个参数值,据此可以对上面的例子进行缩写:
缩写方式:transition: all .5s ease-in .1s;
拆分方式:transition-property:all;
transition-duration:.5s;
transition-timing-function: ease-in;
transition-delay:.1s;
对应的脚本特性为transition。默认值看每个独立属性
适用于所有元素,包含伪对象:after和:before
继承性无
动画性否
计算值看每个独立属性
实例transition: margin-right 2s;
transition: margin-right 2s .5s;
transition: margin-right 2s ease-in-out;
transition: margin-right 2s ease-in-out .5s;
transition: margin-right 2s, color 1s;
transition: all 1s ease-out;div{
width:100px;
transition:width2s;
-webkit-transition:width2s; /*safari*/
}
div:hover{width:300px;}
css3的过度,transition相关推荐
- [css] CSS3中的transition是否可以过渡opacity和display?
[css] CSS3中的transition是否可以过渡opacity和display? transition过渡display是有一个前提条件: 浏览器渲染是在每一帧的最后,每一帧都会执行以下操作: ...
- html5 过渡时间,CSS3 对过渡(transition)进行调速以及延时
1,使用调速函数控制过渡效果的速度曲线(加速,减速等) 使用调速函数可以设置过渡效果的速度曲线,从而实现过渡效果随着时间来改变其速度.比如:开始很慢然后加速或者开始很快然后减速. (1)CSS3定义了 ...
- html中transition默认,CSS3中的Transition详解
W3C标准中对css3的transition这是样描述的:"css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改 ...
- css3透明度过度,CSS透明半透明与transition过渡效果
一.CSS透明与半透明 1.CSS3 整体透明 opacity : 1 ; 透明度 filter : alpha( opacity = 100 ); 老旧浏览器 IE8 - 2.CSS3 颜色透明 # ...
- 总结CSS3新特性(Transition篇)
CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率. 可以让属性的变化过程持续一段时间,而不是立即生效.比如,将元素的颜色从白色改为黑色,通常这个改 ...
- css 字体颜色阶梯过渡,CSS3——过渡(transition)
一.概述 CSS属性的值从一个值变成另一个值的过程叫做渐变,重点突出变化的过程.CSS3 transition系列属性可控制这个变化过程,使得属性值变化过程更加平滑.一个过渡应包含这几个属性: A:哪 ...
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...
- CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
- 效果过度transition:all
22. 效果过度1.(transition过度)all:所有的全部 transition:all : 给所有过度效果(单位s) transition:all ease:(默认效果慢快慢)transit ...
- CSS3中的transition和transform属性
一.前言 开门见山的说,transition.transform和translate这三者经常有人搞混,先把这三者做一个简单解释: transform是 转换,指的是改变所在元素的外观,它有很多种手段 ...
最新文章
- HDLBits 系列(5)让三元条件运算符(?:)在你的设计中发挥作用
- 下载anaconda前需要卸载python吗_anaconda安装与卸载
- Xmind笔记之HTML5+CSS
- java 子类强转父类 父类强转子类
- linux 字符串加入中括号,方括号及其在命令行中的不同用法介绍
- 缴纳满15年养老保险退休金每月1200块钱左右,值得缴吗?
- Unparsed aapt error(s)! Check the console for output
- 数据绑定和第一个AngularJS 应用
- 查看回调函数执行在那个线程中的方法
- Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css
- 武汉月薪1万5,感到焦虑怎么办?
- 解决区块链“去匿名化”的四大方法论!| 原力计划
- 这个可能是比你女朋友陪你时间都要久的本子
- 上线 5 天获得 100 万用户,可为什么我开发的 App 最终却倒闭了?
- ezd格式文件怎么打开_EPLAN Electric P8 中的 EDZ 文件格式
- 镄囩 php编码,GBK 编码
- 三星k3梅林没有软件中心_斐讯K3梅林软件中心版刷机包 修正WAN口 修正2.4G 自动息屏 完美混血...
- 【BAT】win10 命令行工具cmd乱码解决方案及cmd非常用命令chcp介绍
- Linux下fat32文件系统变为只读
- Win11如何查看硬盘型号?Win11查看硬盘型号步骤