其实css透明度属性transition的问题并不复杂，但是又很多的朋友都不太了解css transition属性的定义和用法，因此呢，今天小编就来为大家分享css透明度属性transition的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
一、html5新增了哪些标签css3新增了哪些属性
1、h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。
2、video表示一段视频并提供播放的用户界面
3、source为video和audio提供数据源
4、datalist提供给其他控件的预定义选项
5、css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面
6、border-radius、box-shadow、border-image、
7、background-size：规定背景图片的尺寸
8、background-origin：规定背景图片的定位区域
9、background-clip：规定背景的绘制区域
10、css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
11、animation、animation-name、animation-duration等
12、：target这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
二、css3新增的属性有哪些
1、RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中 RGB值分别表示红色、绿色、蓝色，而 alpha取值则为 0到 1（小数位一位）。
2、background-image：设置元素的背景图像。
3、background-origin：规定背景图片的定位区域。
4、background-size：规定背景图片的尺寸。
5、background-repeat：设置是否及如何重复背景图像。
6、word-wrap属性允许长单词或 URL地址换行到下一行。
7、注：所有主流浏览器都支持 word-wrap属性。
8、text-shadow属性：向文本设置阴影。
9、参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；
10、在新的@font-face规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
11、border-radius属性：是一个简写属性，用于设置四个 border-*-radius属性。
12、注：该属性允许您为元素添加圆角边框！
13、border-image：将图片规定为包围 div元素的边框
14、box-shadow属性：向框添加一个或多个阴影。（盒阴影）
15、媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性。
三、css3怎么让动画匀速变换 linear
1、transition-timing-function。和transition动画一样，animation动画也是CSS3动画的一种，这类动画可以理解为是一种关键帧动画，它可以预先为动画设置多个节点，在每个节点中含有不同的状态属性，通过使用animation动画我们可以得到更为复杂的动画效果。
2、注意：transition是为页面元素设置某个需要产生动画效果的属性，如宽度（width）、高度（height）、透明度（opacity），甚至3D旋转等，并使得这些属性的值在发生变化时产生相应的过渡效果。我们常常在制作类似按钮鼠标经过和移出效果时使用transition。
3、通俗地说，transition是简化版的CSS3动画，而animation则是强化版的CSS3动画。在日常开发中transition的使用频率更高一些，我们往往只有在遇到transition无法解决的问题时，才会转而使用animation。
四、css height为auto的transition过渡设置
1、需求是有一些动态内容折叠起来的，点击后弹开
2、 js定时器的动画过渡暂不考虑，于是就想到transition过渡
3、一开始就想着用trasition动画过渡就搞定啦，试了一下后，发现有问题
4、折叠的元素的高度height必须得设置一个值才可以有过渡的效果，要不就过渡不了
5、折中一下，就用js动态获取子元素的高度，然后给值到折叠的元素上实现过渡了
6、不过需要注意的是，内容的元素，虽然平常是不显示，但是还是暂据文本流的空间，所以缩起来后，要设置{visibility:hidden}.
7、打开时再设置{visibility:visible}
五、js连续改变css属性时,transitoin失效了
1、你不应该这样处理！！这里不是失效,而是js执行时间很短的时候,浏览器还没有渲染HTML元素,js已经执行完了。当前就不会出现渐变效果,而如果你弹出alert的时候把js中断了,然后先渲染一遍HTML了，等执行完js的时候再来渲染HTML就有了所谓的渐变效果。
2、一般我们修改css都是在事件回调的时候处理的。在触发某个事件的时候必然已经渲染HTML了，事件的触发有一个过程，所以就会有渐变。
如果你还想了解更多这方面的信息，记得收藏关注本站。
