一、CSS3样式transition介绍
-
作用：transition在英文中的意思是过渡和转变，顾名思义，在CSS中添加这个样式可以让一些效果的变化产生过渡效果而让人不会感觉突兀；
-
transition属性的值
transition属性有四个常用值；
1.property：属性（设置效果的CSS样式名）；
2.duration：持续时间（设置效果持续的时间）；
3.timing-function：过渡效果的时间线（设置效果的快慢变化）；
该值有五个可选选项：
linear规定以相同速度开始至结束的过渡效果。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in规定以慢速开始的过渡效果。
ease-out规定以慢速结束的过渡效果。
ease-in-out规定以慢速开始和结束的过渡效果。
此外还可以使用cubic-bezier(n,n,n,n)函数对n进行数字设置来控制效果的时间线；
4.delay：过渡效果延迟多少时间再展示（设置过渡效果的触发时机）； -
transition属性的写法（缩写）
transition: property duration timing-function delay;
transition写法
二、小例子展示transition样式的使用
- 使用transition样式的
property和duration使鼠标移动上去后背景色产生淡入淡出的效果
未变化前
变化中
变化完成
-
使用
property，duration和timing-function使div宽度变宽，切变化速度由块到慢；
代码如下（效果无法截图显示，可自行复制展示）：<!DOCTYPE html> <html> <meta charset="uft-8"> <head> <style> div { width: 200px; height: 200px; background: yellow; transition: width 5s ease; } div:hover { width: 1000px; } </style> </head> <body> <div></div> </div> </body> </html>
三、注意点
- 因为transition是CSS3的新样式，所以要考虑兼容性问题，下面是transition在各大浏览器上的兼容性；
transition兼容性
2.transition的property值可使用all来使多种效果同时过渡；
参考链接w3school
网友评论