CSS Transition
1.基本用法:在CSS3引入Transition(过渡)这个概念之前,CSS是没有时间轴的。也就是说,所有的状态变化,都是即时完成。
img{
height:15px;
width:15px;
}
img:hover{
height: 450px;
width: 450px;
}
transition的作用在于,指定状态变化所需要的时间。图片放大的过程需要1秒。
img{
transition: 1s;
}
指定transition适用的属性,比如只适用于height。只有height的变化需要1秒实现,其他变化(主要是width)依然瞬间实现
img{
transition: 1s height;
}
2.transition-delay:
在同一行transition语句中,可以分别指定多个属性。这样一来,height和width的变化是同时进行的,跟不指定它们没有差别。
img{
transition: 1s height, 1s width;
}
让height先发生变化,等结束以后,再让width发生变化。实现这一点很容易,就是为width指定一个delay参数。width在1秒之后,再开始变化,也就是延迟(delay)1秒。
img{
transition: 1s height, 1s 1s width;
}
delay的真正意义在于,它指定了动画发生的顺序,使得多个不同的transition可以连在一起,形成复杂效果。
3.transition-timing-function:
transition的状态变化速度(又称timing function),默认不是匀速的,而是逐渐放慢,这叫做ease
img{
transition: 1s ease;
}
除了ease以外,其他模式还包括
(1)linear:匀速
(2)ease-in:加速
(3)ease-out:减速
(4)cubic-bezier函数:自定义速度模式
cubic-bezier,可以使用工具网站来定制。
img{
transition: 1s height cubic-bezier(.83,.97,.05,1.44);
}
代码会产生一个最后阶段放大过度、然后回缩的效果。
4.transition的各项属性
简写形式
img{
transition: 1s 1s height ease;
}
单独定义成各个属性
img{
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
}
5.transition的使用注意
(1)目前,各大浏览器(包括IE10)都已经支持无前缀的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)等等。
6.transition的局限
transition的优点在于简单易用,但是它有几个很大的局限。
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
- 浏览: 72543 次
- 性别:
最新评论
transition奥秘
- 博客分类:
- html5/css3
相关推荐
transition属性是一个复合属性,用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。其基本语法格式如下: transition:property duration...
ffmpeg-gl-transition
实现Android动画Transition使用方法
Flash transition effect.
transition.js
前端开源库-glsl-transition-vignette-gridglsl transition vignette网格,高效呈现glsl transition vignette网格(缓存 拉入webgl画布)
弹出窗口_Elastic Transition
Animate Transition 能够以 12 种预设方式来切换图片,且该插件使用了硬件加速 CSS 转换,所以性能极好。该插件可用于网站外观设计,导航,甚至是移动应用程序中的页面切换。 代码示例: AnimateTransition({ ...
css3 transition属性鼠标悬停图标按钮动画提示框效果
transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and transition-delay。 语法 transition: property duration timing-function delay; 属性: ...
前端开源库-glsl-transition-fadeglsl transition fade,简单的fade glsl transition对象
Android转场动画-Activity_Transition
ANSI/VITA 46.10 Rear Transition Module for VPX Define a rear transition module (RTM) for VPX applications.
纯css3 transition鼠标悬停图片文字动画显示 纯css3 transition鼠标悬停图片文字动画显示
Introduction to Concurrency Theory- Transition Systems and CCS
纯CSS3 transition属性鼠标经过酷炫按钮动画特效
前端项目-d3-transition,D3选项的动画转换。
div css3 transition过渡属性制作水平图片手风琴 div css3 transition过渡属性制作水平图片手风琴 div css3 transition过渡属性制作水平图片手风琴
Transition X Kotlin DSL for choreographing Android Transitions TransitionManager makes it easy to animate simple changes to layout without needing to explicitly calculate and specify from and to ...
android ApiDemos里的Transition3d翻转修复完善 博文在http://blog.csdn.net/ethan_xue/article/details/8022471