css3 动画 Transition
CSS Transition
1.1 基本用法
在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的。也就是说,所有的状态变化,都是即时完成。
上面是一个演示,当鼠标放置于缩略图之上,缩略图会迅速变大。注意,缩略图的变大是瞬间实现的。下面是代码,相当简单。
img{
height:15px;
width:15px;
} img:hover{
height: 450px;
width: 450px;
}
transition的作用在于,指定状态变化所需要的时间。
img{
transition: 1s;
}
上面代码指定,图片放大的过程需要1秒,效果如下。
我们还可以指定transition适用的属性,比如只适用于height。
img{
transition: 1s height;
}
这样一来,只有height的变化需要1秒实现,其他变化(主要是width)依然瞬间实现,效果如下。
1.2 transition-delay
在同一行transition语句中,可以分别指定多个属性。
img{
transition: 1s height, 1s width;
}
但是,这样一来,height和width的变化是同时进行的,跟不指定它们没有差别,效果如下。
我们希望,让height先发生变化,等结束以后,再让width发生变化。实现这一点很容易,就是为width指定一个delay参数。
img{
transition: 1s height, 1s 1s width;
}
上面代码指定,width在1秒之后,再开始变化,也就是延迟(delay)1秒,效果如下。
delay的真正意义在于,它指定了动画发生的顺序,使得多个不同的transition可以连在一起,形成复杂效果。
1.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);
}
上面的代码会产生一个最后阶段放大过度、然后回缩的效果。
1.4 transition的各项属性
transition的完整写法如下。
img{
transition: 1s 1s height ease;
}
这其实是一个简写形式,可以单独定义成各个属性。
img{
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
}
1.5 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)等等。
1.6 transition的局限
transition的优点在于简单易用,但是它有几个很大的局限。
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
最新文章
- node(ActiveMq)
- Linux 常用操作命令
- 使用Visual Studio扩展插件Visual assist X给代码插入注释模板
- Android 手机卫士4--设置中心显示
- 使用maven多模块来构建系统时,spring初始化报错的问题
- RegexOne
- 让jquery easyui datagrid列支持绑定嵌套对象
- Html5笔记之小结
- Ubuntu远程登陆、SSH图形界面、WOL远程唤醒
- 【翻译】Flume 1.8.0 User Guide(用户指南) source
- 极简】如何在服务器上安装SSL证书?
- bzoj1597/luogu2900 土地购买 (斜率优化dp)
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- Activiti随着Spring启动自动部署开关
- 【树状数组套主席树】带修改区间K大数
- AdaBoost原理详解
- 解决webstom failed to change read-only files
- View类的XML属性、相关方法及说明
- Kinect v2 记录
- bzoj千题计划157:bzoj1220:[HNOI2002]跳蚤
热门文章
- chrome flash 自动暂停问题
- python-笔记(六)模块操作以及常用模块简介
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_08 转换流_5_InputStreamReader介绍&;代码实现
- unique()与nunique()
- Matlab入门基础
- It's strange. I felt less lonely when I didnt know you.
- 使用MarkDown的编辑器
- ElasticSearch 基础 2
- Hibernate异常:MappingException
- vue—两个数组,去重相同项