transition(动画属性)
CSS 过渡(transition)是通过定义元素从起点的状态和结束点的状态,在一定的时间区间内实现元素平滑地过渡或变化的一种补间动画机制。你可以让属性的改变过程持续一段时间,而不是立即生效。
通过transition你可以决定哪个属性发生动画效果 (可以通过明确地列出这些属性),何时开始动画 (通过设置delay), 动画持续多久 (通过设置duration), 以及如何动画 (通过定义timing函数,比如线性地或开始快结尾慢)。
如何定义transition(过渡)
Transition又包含了四个子属性,分别为:
- transition-property,变换延续的时间。
- transition-duration,在延续时间段。
- transition-timing-function,变换的速率变化。
- transition-delay:变换延迟时间。
定义也非常灵活,先介绍一下这4个子属性:
transition-property(过渡属性)
- 可以单独指定元素哪些属性改变时执行过渡(transition),可以触发浏览器reflow或repaint的属性那些CSS属性可以应用动画。
- 可以指定为
all
,元素任何可过渡(transition)属性值变化时都将执行过渡(transition)效果。 - 可以指定为
none
时,动画立即停止。 - 初始默认值为
all。
语法:
- transition-property: none | all | [ <IDENT> ] [, <IDENT> ]*
例如:
- transition-property: all;
- transition-property: none;
- transition-property: background-color;
- transition-property: background-color, height, width;
transition-duration(过渡持续时间)
- 用来指定元素过度过程的持续时间,时间值,1s(秒),4000ms(毫秒)。
- 其默认值是0s,也可以理解为无过渡(transition)效果。
语法:
- transition-duration: <time> [, <time>]*
例如:
- transition-duration: 2s;
- transition-duration: 4000ms;
- transition-duration: 1s, 800ms;
transition-timing-function(过渡时间函数)
指定CSS属性的变换速率,预设的有:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2),默认值时easy:
- ease:(逐渐变慢)默认值,等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
- linear:(匀速),等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
- ease-in:(加速),等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
- ease-out:(减速),等同于贝塞尔曲线(0, 0, 0.58, 1.0).
- ease-in-out:(加速然后减速),等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。w3c文档中表述是所有值需在[0, 1]区域内,否则无效。但是在一些浏览器(Chrome,Firefox,Opera,IE11 预览版)下对P1(x1, y1)和P2(x2, y2)的坐标中的y1和y2并没有这个限制,曲线可以是负值,也可以取大于1的值。如果x1和x2是负数,或者大于1的值那么直接应用最终样式没有过渡效 果。而一些老版本的浏览器曲线值仍需在[0, 1]区域内,否则直接应用最终样式,比如Opera 12,和老版本的webkit浏览器,其他没测试。
transition-delay(过渡延迟函数)
指定一个动画开始执行的时间,即当改变元素属性值后多长时间开始执行“转换效果”,初始默认值为0;
语法:
- transition-delay: <time> [, <time>]*
例如:
- transition-delay: 5s;
- transition-delay: 4000ms, 8000ms;
- transition-delay: -5s;
transition的简写
过渡可以简写。
语法:
- transition: <transition> [, <transition>]*
- <transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
例如:
- transition: background-color 3s linear 1s;
- transition:width 2s ease-in 2000ms,border 2s linear,height 5s, background-color 2s, transform 2s;
- transition: 4s ease-in-out;
- transition: 5s;
其他情况:当属性值列表长度不一致时
以 transition-property
的值列表长度为标准,如果某个属性值列表长度短于它的,则重复值以长度一致, 例如:
- div {
- transition-property: opacity, left, top, height;
- transition-duration: 3s, 5s;
- }
将按下面这样处理:
- div {
- transition-property: opacity, left, top, height;
- transition-duration: 3s, 5s, 3s, 5s;
- }
类似地,如果某个属性的值列表长于 transition-property
的,将被截短。 例如:
- div {
- transition-property: opacity, left;
- transition-duration: 3s, 5s, 2s, 1s;
- }
将按下面这样处理:
- div {
- transition-property: opacity, left;
- transition-duration: 3s, 5s;
- }
如何执行动画效果?
css3动画一般通过鼠标事件或者鼠标状态定义动画,通常我们可以用CSS中伪类、使用js修改元素的样式属性或追加删除样式来执行定义的动画。CSS中伪类执行动画包括:
动态伪类 | 起作用的元素 | 描述 |
:link | 只有链接 | 未访问的链接 |
:visited | 只有链接 | 访问过的链接 |
:hover | 所有元素 | 鼠标经过元素 |
:active | 所有元素 | 鼠标点击元素 |
:focus | 所有可被选中的元素 | 元素被选中 |
上面的例子就是使用CSS中伪类执行动画的。 使用js修改元素的样式属性或追加删除样式来执行动画: 一般是鼠标事件操作和定时操作(window.setTimeout(),window.setInterval());
还应注意当一个元素使用过渡(transition)后,立即使用.appendChild()
将其加入到DOM中或删除其display: none;
。这被视为如果初始状态从来没有存在过那么元素总是在它的最终状态。克服这个限制最简单的办法是使用极少毫米数的window.setTimeout()。
关于:transitionend事件
transitionend
事件会在 CSS transition 过渡完成时触发. 当transition完成前被移除或者取消,比如移除css的transition-property
属性,此事件将不会被触发。哥浏览器下事件的支持情况。
Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|
1.0 开始webkitTransitionEnd |
4.0 (2.0) 开始transitionend |
10开始transitionend |
10.5 开始oTransitionEnd 12 开始otransitionend 12.10 开始transitionend
|
3.2 开始webkitTransitionEnd |
transitionend
事件会在 每个过渡属性完成时都触发该事件,而且浏览器下还有不一致的地方,比如border过渡的时候,webkit下只触发一次,输出:
过渡属性: border; 时间:2
而firefox输出:
过渡属性: border-left-color; 时间:2
过渡属性: border-bottom-color; 时间:2
过渡属性: border-right-color; 时间:2
过渡属性: border-top-color; 时间:2
过渡属性: border-left-width; 时间:2
过渡属性: border-bottom-width; 时间:2
过渡属性: border-right-width; 时间:2
过渡属性: border-top-width; 时间:2
建议在使用的时候判断是否所有的属性是否已经过渡完成,或者判断特定的属性名在执行该事件。
transition和animation的区别:
- transition完成后会保留过渡后的状态,而animation会跳至默认状态
- 后者更精细,具体到每一祯都可以控制,而前者是平滑过渡。
transition(动画属性)的更多相关文章
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- CSS3的transition动画功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- CSS动画属性性能详细介绍
CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...
- CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画
---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...
- 解决transition动画与display冲突的几种方法
如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...
随机推荐
- (数据科学学习手札09)系统聚类算法Python与R的比较
上一篇笔者以自己编写代码的方式实现了重心法下的系统聚类(又称层次聚类)算法,通过与Scipy和R中各自自带的系统聚类方法进行比较,显然这些权威的快捷方法更为高效,那么本篇就系统地介绍一下Python与 ...
- kafka topic 完全删除
kafka topic 完全删除 1.自动删除脚本(得配置server.properties 中 delete.topic.enable=true) ./kafka-topics.sh --zoo ...
- Android开发——告诉你Adapter应该写在Activity里面还是外面
0. 前言 本文转载自AItsuki的博客. 首先说明一下为什么要写这么一篇博客:最近看了一些其他人的项目,发现很多项目的做法是建立一个专门存放Adapter类的Package包,也有的项目干脆直接都 ...
- 5.hbase表新增数据同步之add_peer
一.前提主从集群之间能互相通讯: 二.在cluster1上(源集群): 1.查看集群已开启的peers hbase(main):011:0> list_peers PEER_ID CLUSTE ...
- Android ANR 分析
首先贴一下trace 文件 Process: com.oppo.reader PID: 20358 Time: 2933175644_1545041895232 Flags: 0x38d83e44 P ...
- js解决img标签加载失败显示默认图片
问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...
- url解读
我刚刚学习的时候,我抓到包不知道哪个是协议.哪个是是服务器地址.哪个是端口号...不知道有没有老铁遇到跟我一样的. 接口:http://172.168.12.0:8888/old/login.do 解 ...
- Gated Recurrent Unit (GRU)
Gated Recurrent Unit (GRU) Outline Backgr ...
- NHibernate3.3.3 学习笔记1
前言 昨天在园友的介绍下,我找了一本学习NHibernate的书:<NHibernate 3 Beginner’s Guide>. 第一章我直接跳过了,因为是英文版的看起来很吃力,且第一章 ...
- Python-爬取"我去图书馆"座位编码
原文地址:http://fanjiajia.cn/2018/11/22/Python-%E7%88%AC%E5%8F%96%E2%80%9D%E6%88%91%E5%8E%BB%E5%9B%BE%E4 ...