css3中transition属性详解


Posted in HTML / CSS onSeptember 02, 2014

transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。

1. transition过渡属性
transition 属性是一个简写属性,用于设置四个过渡属性:
语法
transition: property duration timing-function delay;

值描述transition-property规定设置过渡效果的 CSS 属性的名称。 transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。 transition-delay定义过渡效果何时开始。

all:表示针对所有元素。
none:表示没有元素。
ident:指定CSS属性列表
注:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。transition可以和Transform同时使用。

transition:<过渡属性名称> <过渡时间> <过渡模式>

transition-timing-function 的五种取值

1.ease 逐渐变慢
2.linear 匀速
3.ease-in 缓慢开始(加速)
4.ease-out 缓慢结束(减速)
5.ease-in-out 缓慢开始,缓慢结束(先加速后减速)
6.cubic-bezier 贝塞尔曲线(matthewlein.com/ceaser)

过渡模式比如宽过渡,高过渡和all过渡

看一个实例:

复制代码
代码如下:

<style type="text/css">
.trans1{
-webkit-transition:0.5 ease;
-moz-transition:0.5s ease;
-webkit-transition-property:all;
-moz-transition-property:all;
position:absolute;
left:10px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans2{
-webkit-transition:0.5 ease;
-moz-transition:0.5s ease;
-webkit-transition-property:width;
-moz-transition-property:width;
position:absolute;
left:350px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans3{
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-webkit-transition-property:height;
-moz-transition-property:height;
position:absolute;
left:780px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans1:hover{
width:300px;
height:300px;
}
.trans2:hover{
width:400px;
}
.trans3:hover{
height:500px;
}
</style></p> <p><body>
<div class="trans1">变换所有的属性</div>
<div class="trans2">只变换宽度属性</div>
<div class="trans3">只变换高度属性</div>
</body>
HTML / CSS 相关文章推荐
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 #HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 #HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 #HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 #HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 #HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 #HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 #HTML / CSS
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
python进程和线程用法知识点总结
2019/05/28 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
任命书怎么写
2015/03/02 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
Python闭包的定义和使用方法
2022/04/11 Python