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实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
python字典DICT类型合并详解
2017/08/17 Python
django反向解析和正向解析的方式
2018/06/05 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
python分数表示方式和写法
2019/06/26 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
C语言笔试集
2012/07/24 面试题
ASP.NET中的身份验证有那些
2012/07/13 面试题
后勤工作职责
2013/12/22 职场文书
企业项目策划书
2014/01/11 职场文书
优秀干部获奖感言
2014/01/31 职场文书
规范化管理年活动总结
2014/08/29 职场文书
七年级语文教学反思
2016/03/03 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL