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图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 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中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
理解Javascript闭包
2013/11/01 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
商场消防演习方案
2014/02/12 职场文书
关于爱国的标语
2014/06/24 职场文书
商场父亲节活动方案
2014/08/27 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
班级联欢会主持词
2015/07/03 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
详解MindSpore自定义模型损失函数
2021/06/30 Python
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers