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实现走马灯效果
Dec 26 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
php表单处理操作
2017/11/16 PHP
PHP调用其他文件中的类
2018/04/02 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
python实现泊松图像融合
2018/07/26 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
opencv实现简单人脸识别
2021/02/19 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
美国折扣网站:jClub
2017/08/07 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
最新创业融资计划书
2014/01/19 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis