可以给transition一个速记法
- 1
- 1
属性详解
transition-property
不是所有属性都能过渡,只有属性具有一个中间点值才具备过渡效果。完整列表,见这个列表 ,具体效果,见 这个页面。
transition-duration
指定从一个属性到另一个属性过渡所要花费的时间。默认值为0,为0时,表示变化是瞬时的,看不到过渡效果。
transiton-timing-function
过渡函数,有如下几种:
liner :匀速
ease-in:减速
ease-out:加速
ease-in-out:先加速再减速
cubic-bezier:三次贝塞尔曲线,可以定制 点击这里
触发过渡
单纯的代码不会触发任何过渡操作,需要通过用户的行为(如点击,悬浮等)触发,可触发的方式有:
:hoever :focus :checked 媒体查询触发 JavaScript触发
局限性
transition的优点在于简单易用,但是它有几个很大的局限。
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
CSS3的animation属性可以像Flash制作动画一样,通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成:
1)通过类似Flash动画中的帧来声明一个动画;
2)在animation属性中调用关键帧声明的动画。
Note:animation属性到目前位置得到了大多数浏览器的支持,但是,需要添加浏览器前缀哦!需要添加浏览器前缀哦!需要添加浏览器前缀哦!
animation动画属性
还是先列表格来说明属性,自己感觉会比较清晰: