重新想,重新看——CSS3变形,过渡与动画③
这一篇主要谈谈CSS3的过渡属性。
过渡属性被设计的十分通俗易懂,属性写法为transition,有四个子属性:
- <transition-property> 表示需要过渡的属性【必须】(本质上,transition对元素的该属性上加了一个监听器,一旦发现属性值变动,则开启'过渡'开关,令该属性的值开始过渡。)其下的值有以下三种类型:
- none
- all 表示该元素所有可过渡属性均监听;
- <single-transition-property> 所需监听的单个属性(如需监听多个属性则需使用逗号隔开);
- <transition-duration> 表示整个过渡所需要的时间【必须】,以s(秒)为单位。
- <transition-timing-function> 该子属性决定了元素过渡时的变化速率,通常常用的值有以下几种:
- ease 默认值,又快到慢,逐渐变慢;
- linear 匀速;
- ease-in 速度逐渐加快(加速效果/渐显效果);
- ease-out 速度逐渐减慢(减速效果/渐隐效果);
- ease-in-out 速度先加速再减速。
- <transition-delay> 决定了过渡属性的延迟时间,必须放在第二个子属性之后。
当然,css3提供了transition的简写的方式,例如:transition:background 1s;便是常用的方式之一。
接下来谈谈transition的触发方式,正如之前提到的“监听器”的思想,我们实际上讨论的是能够改变元素CSS属性值的几种方式:
- 使用伪类通过:hover等伪类在事件满足的一瞬间触发渐变;
- 媒体查询触发 根据@media的方式触发;
- Javascript触发 直接改变CSS值,添加class标签等。
以上基本上讲清了过渡属性的用法与原理,但是这还远远不足够,过渡属性还留下了以下三个问题,我们逐一详谈:
- 浏览器支持:过渡属性目前IE浏览器支持程度并不是很好, IE10以下均不支持该属性。其他浏览器的最新版本都无需添加浏览器私有属性;
- 可过渡属性:并不是所有的元素属性都可以使用CSS3过渡属性进行过渡(例如颜色属性),关于什么属性能够过渡可以参照W3C官网;
- 其他实际的问题:例如如何使用JS操控过渡属性?过渡属性的优先级问题,隐式过渡等等,这些都在将来实际遇到时回来补充。
*_(~_
重新想,重新看——CSS3变形,过渡与动画③的更多相关文章
- 重新想,重新看——CSS3变形,过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
- 重新想,重新看——CSS3变形,过渡与动画④
最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...
- 重新想,重新看——CSS3变形,过渡与动画②
本篇文章主要用来归纳总结CSS3变形属性. CSS3变形属性大致可以分为以下三个部分: 变形控制属性 2D变形函数 3D变形函数 下面将对其一一进行分析: 1.变形控制属性 所谓的变形控制属性主要指“ ...
- css3的过渡、动画、2D、3D效果
浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...
- 前端:css3的过渡与动画
一.css3过渡知识 (一).概述 1.CSS3过渡是元素从一种样式逐渐改变为另一种的效果. 2.实现过渡效果的两个要件: 规定把效果添加到那个css属性上. 规定效果时长 定义 ...
- css3 转换 过渡 及动画
转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...
- css3的过渡和动画的属性介绍
一.过渡 什么是过渡? 过渡是指:某元素的css属性值在一段时间内,平滑过渡到另外一个值,过渡主要观察的是过程和结果. 设置能够过渡的属性: 支持过渡的样式属性,颜色的属性,取值为数值,transfo ...
- CSS3 变形记
CSS3 变形 CSS3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果,每个效果都称为变形函数. transform transform属性向元素应用 2D 或 3D 转换.该属性允许我们对元素 ...
- 常用到用css3实现的转换,过渡和动画
为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
随机推荐
- 元素隐藏 css
参考:http://www.zhangxinxu.com/wordpress/2011/03/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9relativeabsol ...
- Bootstrap初学基础总结
Bootstrap 1>.Web UI 框架 可以帮助菜鸟程序员 ,迅速简便的搭建起专业级界面效果 2>如何快速掌握利用框架 1.框架的整合和搭建,让框架能够正常跑起来 2.通过复制粘贴文 ...
- ctf百度杯十二月场what_the_fuck(一口盐汽水提供的答案)
目录 漏洞利用原理 具体利用步骤 漏洞利用原理 read(, &s, 0x20uLL); if ( strstr(&s, "%p") || strstr(& ...
- python - 用户交互/数据类型/格式化输出/运算符/流程控制单双多分支
python:用户交互: 等用户输入,做反应: username=input("username:")password=input("password:")pr ...
- 三.插入和查找MySQL记录 数据类型
1.插入数据的两种方式 1)INSERT tb1 VALUES('TOM',25,1863.25); 2)INSERT tb1(username,salary) VALUES('John',4500. ...
- CentOS yum 安装node.js
第一步: curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash - 第二步: sudo yum -y i ...
- 20165324《Java程序设计》第四周
学号 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 第五章:子类与继承 子类的定义:class 子类名 extends 父类名 { ... } 子类继承性: ...
- SSH查看Linux系统是32位还是64位?
Linux下如何明确地查看操作系统的位数 如何知晓操作系统是32位还是64位?这里介绍一种简单的方式: [root@localhost mysql-5.1.57]# getconf LONG_BI ...
- 微信小程序组件modal
操作反馈modal:官方文档 Demo Code: Page({ data: { modalHidden: true, modalHidden2: true }, modalTap: function ...
- windows的cmd命令切换磁盘路径