css动画——transition和animation
2016-03-11 09:52
671 查看
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
第一部分:CSS Transition
在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的。也就是说,所有的状态变化,都是即时完成。delay的真正意义在于,它指定了动画发生的顺序,使得多个不同的transition可以连在一起,形成复杂效果。
transition的使用注意
(1)目前,各大浏览器(包括IE 10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀。(2)不是所有的CSS属性都支持transition。
(3)transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height从0px变化到100px,transition可以算出中间状态。但是,transition没法算出0px到auto的中间状态,也就是说,如果开始或结束的设置是height: auto,那么就不会产生动画效果。类似的情况还有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。
transition的局限
transition的优点在于简单易用,但是它有几个很大的局限。(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
第二部分:CSS Animation
首先,CSS Animation需要指定动画一个周期持续的时间,以及动画效果的名称。div:hover { animation: 1s rainbow; }
上面代码表示,当鼠标悬停在div元素上时,会产生名为rainbow的动画效果,持续时间为1秒。为此,我们还需要用keyframes关键字,定义rainbow效果。
@keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }
同transition一样,animation也是一个简写形式。
div:hover { animation: 1s 1s rainbow linear 3 forwards normal; }
这是一个简写形式,可以分解成各个单独的属性。
div:hover { animation-name: rainbow; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3; }
浏览器前缀
目前,IE 10和Firefox(>= 16)支持没有前缀的animation,而chrome不支持,所以必须使用webkit前缀。也就是说,实际运用中,代码必须写成下面的样子。
div:hover {
-webkit-animation: 1s rainbow;
animation: 1s rainbow;
}
@-webkit-keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
@keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }
相关文章推荐
- css后代选择器和属性选择器
- CSS3:nth-child()伪类选择器…
- 使用过的CSS小技巧笔记
- CSS选择器
- css伪类伪元素
- qt样式设置
- vaadin 7 使用gwt 发布js和css
- [FungLeo原创]CSS预编译技术之SASS学习经验小结
- CSS居中效果显示
- 跟燕十八学html第一课,div 布局css
- CSS学习(十一)-CSS文本溢出
- CSS设置背景
- CSS盒子的定位
- CSS中可代替cellpadding和cellspacing的属性
- CSS重新认识(一)
- 【CSS-03】radio+img居中对齐
- CSS3 学习笔记
- 个人对于css sprite的一点点见解
- CSS3实现手机1px边框,细如发丝
- CSS 媒体查询