transition过度属性

transition：用于设置DOM元素在不同状态之间切换的时候应用不同的过度效果，以前如果要想实现一个非生硬的状态切换需要写很多的js来实现，现在使用transition变可以轻松的实现。

1、transition-property：

property：表示属性的意思，这里用来设置元素要过度的css属性名。

基本语法：
transition: none | all | property;

none：表示没有任何过度效果。
all：初始值，表示所有的能过度属性都有过度效果。
property：指定一个或多个属性名称执行过度效果，多个css属性名之间用逗号分隔开。

例如：

transition-property: width;
transition-property: window, height, background-color, opacity;
transition-property: all;

兼容性：

查看兼容性详情

查看案例Demo

能够支持过度的css属性查看1，查看2

2、transition-duration

transition-duration：表示过渡动画在多长时间内执行完毕。值以秒（s）或毫秒（ms）为单位不接受负值。可以指定多个值，每个值之间用逗号分开并且分别应用到 transition-property 指定的对应属性上。

基本语法：
transition-duration: time;

time：指定动画执行时长。

例如：

transition-duration: 10s;
transition-duration: .5s, 10ms, .9ms, 0.5s, 10.05s; /*如果是小数点左边只有一个0的话，前边的 0可以省略。*/

兼容性：

查看兼容性详情

查看案例Demo

3、transition-timing-function

transition-timing-function：指定一个函数，定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。多数 timing functions 由四点定义一个 bezier 曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。

ease：慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in：慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out：慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out：慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
linear：以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
steps(4, end)：四次运动到结束执行过度效果。
cubic-bezier(x1, y1, x2, y2)：以贝塞尔函数算法执行过度效果。生成贝塞尔曲线网站：website1、website2、website

查看案例Demo

4、transition-delay

transition-delay：延迟指定时间后执行过度效果。值以秒（s）或毫秒（ms）为单位。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。可以指定多个延迟时间，每个延迟用逗号分开，分别作用于你所指定的相符合的css属性transition-property;

基本语法：
transition: time | inherit | initial | unset

time：指定的时间，格式：10s | 10ms | 0.5s (.5s) | -10ms | -5s (-.5s)
inherit：

查看案例Demo

5、transition

transition：它是transition-property、transition-duration、transition-timin-function、transition-delay 的缩写形式，能够更方面的设置过渡效果，一般在开发中使用这种方式写过渡效果。

基本语法：
transition: property duration timing-function delay | none

none：没有过渡效果。

基本写法：

/*两个值，属性名，过渡持续时间*/
transition: margin-right 4s;
/*三个值，属性名，过渡持续时间，延迟开始过渡时间*/
transition: margin-right 4s 1s;
/*三个值，属性名，过渡持续时间，过渡动画效果*/
transition: margin-right 4s ease-in-out;
/*四个值，属性名，过渡持续时间，过渡动画效果，延迟开始过渡时间*/
transition: margin-right 4s ease-in-out 1s;/*可以同时写多个过渡属性，每个过渡之间用逗号分开*/
transition: margin-right 4s, color 1s;/*也可以使用all表示全部属性*/
transition: all 0.5s ease-out;transition: inherit;
transition: initial;
transition: unset;

transition过度相关推荐

效果过度transition:all
22. 效果过度1.(transition过度)all:所有的全部 transition:all : 给所有过度效果(单位s) transition:all ease:(默认效果慢快慢)transit ...
CSS3详解：transform、transition
CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
HTML——CSS的基础语法2
一.盒模型 1-1.什么是盒模型? HTML5盒模型包括:内容(content).填充(padding.也叫做内边距).边框(border).边界(margin,也叫做外边距). 这些属性我们可以用日 ...
总结之前做项目中要注意的一些书写规范
通过这次的<小巨蛋项目>网站的实战中,最主要的还是代码的书写规范吧,可能在这次的网站的实战中代码不是写的很好,没有好好的去规划规划再做,导致了给人的感觉就是有点乱的感觉,所以要求以后的项目 ...
css动画改变高度有过渡效果,css3-形变、过渡、动画
一.2D形变平移 transform:translate(x,y) 相对当前位置,向左移动x像素,像下移动y像素 transform:translateX(num) 相对当前位置,向左移动num像素 ...
JavaScript css3模拟简单的视频弹幕功能
最近相对比较空闲,想写一些东西写着玩.就尝试写了一个demo模拟了最简单的视频弹幕功能~~. 思路: 设置一个<div>和所播放的video的大小一致,把这个div标签蒙在video上面用 ...
从0开始html前端页面开发_CSS实现图像获取鼠标焦点逐渐变大动画效果
用CSS实现非常简单只需要在style样式里添加transition过度样式即可在hover状态里使用transform变换样式即可 transform:scale//比例 <style ty ...
唯芸星童鞋的第一个博客。
我是一个新入行的IT学员,学习了半个月it了,让我来分享一下这半个月学到的知识吧!!! 1 基本头部标签: 1 head: HEAD里面主要放一些有关网页设置的相关语句--> 2编码格式: 设 ...
2d运用 - 3d 视距
transition transition过度属性添加到需要过度的元素上时间为必写属性 all默认值 ease由快到慢默认值 linear 匀速 delay 过度的延迟 2d平移 transfor ...
css有哪些动画效果怎么实现的
css常见的动画效果:平移,缩放,旋转 css实现动画主要有三种方式: transition实现渐变动画 transform实现缩放平移效果动画 animation实现自定义动画 transition ...

transition过度

transition过度属性

1、transition-property：

2、transition-duration

3、transition-timing-function

4、transition-delay

5、transition

transition过度相关推荐

最新文章

热门文章