博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3 Transition 过渡
阅读量:5865 次
发布时间:2019-06-19

本文共 2165 字,大约阅读时间需要 7 分钟。

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;

Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键贞。开始,结束。

 

w3school在线文档说明

浏览器支持

div{transition: width 2s;-moz-transition: width 2s;	/* Firefox 4 */-webkit-transition: width 2s;	/* Safari 和 Chrome */-o-transition: width 2s;	/* Opera */}

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。

注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。

transition 属性

下面的表格列出了所有的转换属性:

属性 描述 CSS
简写属性,用于在一个属性中设置四个过渡属性。 3
规定应用过渡的 CSS 属性的名称。 3
定义过渡效果花费的时间。默认是 0。 3
规定过渡效果的时间曲线。默认是 "ease"。 3
规定过渡效果何时开始。默认是 0。 3

transition

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

注释:请始终设置  属性,否则时长为 0,就不会产生过渡效果。

transition: property duration timing-function delay;

transition-property

transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。

提示:过渡效果通常在用户将鼠标指针浮动到元素上时发生。

注释:请始终设置  属性,否则时长为 0,就不会产生过渡效果。

transition-property: none|all|property;
描述
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。
div{transition-property:width;-moz-transition-property: width; /* Firefox 4 */-webkit-transition-property:width; /* Safari 和 Chrome */-o-transition-property:width; /* Opera */}

transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。

transition-duration: time;
div{transition-duration: 5s;-moz-transition-duration: 5s; /* Firefox 4 */-webkit-transition-duration: 5s; /* Safari 和 Chrome */-o-transition-duration: 5s; /* Opera */}

transition-timing-function

transition-timing-function 属性规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
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))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay

transition-delay 属性规定过渡效果何时开始。

transition-delay 值以秒或毫秒计。

transition-delay: time;

 

转载地址:http://ndynx.baihongyu.com/

你可能感兴趣的文章
PgSQL · 源码分析 · PG中的无锁算法和原子操作应用一则
查看>>
C++实践参考:小玩文件
查看>>
Oracle Parallel相关参数设置不当引起的系统故障
查看>>
为什么说全栈工程师是未来?
查看>>
Scala入门到精通——第二十七节 Scala操纵XML
查看>>
JavaScript 事件
查看>>
写在1/3学期:我们的学习问题分析
查看>>
D3数据连接:进入
查看>>
云栖大会 · 南京峰会 | 通往智能之路上的新技术
查看>>
Netstat命令详解
查看>>
《C++语言基础》实践参考——图书馆的书
查看>>
Why Apache Beam? A data Artisans perspective
查看>>
PgSQL · 功能分析 · Listen/Notify 功能
查看>>
死磕Spring系列之二,bean标签的解析和BeanDefinition的注册
查看>>
【干货】ModSecurity - 针对中小站长高效、免费waf组件
查看>>
AD域的Java开发操作
查看>>
Android群英传笔记——第六章:Android绘图机制与处理技巧
查看>>
js的面向对象编程
查看>>
Android实训案例(六)——四大组件之一BroadcastReceiver的基本使用,拨号,短信,SD卡,开机,应用安装卸载监听...
查看>>
log备份压缩以及获取指定内容到新文件
查看>>