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 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 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自动注册登录验证机制实现代码
2011/12/20 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python制作小说爬虫实录
2017/08/14 Python
python读写LMDB文件的方法
2018/07/02 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
预备党员入党自我评价范文
2014/03/10 职场文书
主题班会演讲稿
2014/05/22 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
企业财务管理制度范本
2015/08/04 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技
详解MySQL的内连接和外连接
2023/05/08 MySQL