CSS3使用transition属性实现过渡效果


Posted in HTML / CSS onApril 18, 2018

属性详解

transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现。它是一个合并属性,是由以下四个属性组合而成:

  • transition-property:设置应用过渡的CSS属性,如background。
  • transition-duration:设置过渡效果花费的时间。默认是 0。
  • transition-timing-function:设置过渡效果的时间曲线。默认是 "ease"。
  • transition-delay:规定过渡效果何时开始。默认是 0。

示例:

button{
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
 }

定义transition属性时,transition-property和transition-duration是必选,其他两个为可选。

transition-property和transition-duration

transition-property用来指定应用过渡效果的CSS属性,这些属性包括(可能不全):

  • width
  • height
  • color
  • background (color, image, position)
  • transform (in the next post)
  • border (color, width)
  • position (top, bottom, left, right )
  • text (size, weight, shadow, word-spacing)
  • margin
  • padding
  • opacity
  • visibility
  • z-index
  • all

transition-duration属性用来设置指定属性的过渡效果花费时间,可以是秒(s)或者毫秒(ms)。

transition-delay和transition-timing-function

transition-delay用来设置过渡效果开始的时间,默认为0,可以是秒(s)或者毫秒(ms)。如果transition-delay是负数,表示过渡效果提前开始。

transition-timing-function用来设置过渡的效果,这些效果包括:

  • ease - 开始慢,中间快,结束慢
  • ease-in - 渐入效果,慢入快出
  • ease-out - 渐出效果,快入慢出.
  • ease-in-out - 开始慢和结束慢
  • cubic-bezier(n,n,n,n) - 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

示例:

button{
   transition: background 1s ease-in-out 2s;
   -webkit-transition: background 1s ease-in-out 2s; /* Safari */
 }

多属性

对于多个属性,各个属性的效果以逗号隔开:

button{
     transition: background 1s ease-in-out 2s, width 2s linear;
     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
   }

兼容性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

触发

需要注意的是,过渡效果是需要之前已经定义好了属性,过渡效果通过触发来应用,比如:hover, :focus, and :active等。

总结

以上所述是小编给大家介绍的CSS3使用transition属性实现过渡效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 #HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 #HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 #HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 #HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 #HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 #HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 #HTML / CSS
You might like
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
python调用Delphi写的Dll代码示例
2017/12/05 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python3监控疫情的完整代码
2020/02/20 Python
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
银行求职推荐信范文
2013/11/30 职场文书
餐饮主管岗位职责
2013/12/10 职场文书
中秋手机店促销方案
2014/06/16 职场文书
设计专业自荐信
2014/06/19 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
离婚上诉状范文
2015/05/23 职场文书
保护动物的宣传语
2015/07/13 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL