CSS transition

CSS transition-property 属性

transition-duration transition-timing-function

实例

把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果：

div { transition-property: width; }

亲自试一试

CSS 语法

transition-property: none|all|property;

属性值

值 描述 none 没有属性会获得过渡效果。 all 所有属性都将获得过渡效果。 property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

技术细节

默认值： all 继承性： no 版本： CSS3 JavaScript 语法： object.style.transitionProperty="width,height"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。

Chrome IE / Edge Firefox Safari Opera 26.0
4.0 -webkit- 10.0 16.0
4.0 -moz- 6.1
3.1 -webkit- 12.1
10.5 -o- transition-duration transition-timing-function

相关知识

css书写顺序
关于CSS书写规范、顺序和命名规则
CSS花边001：无衬线字体和有衬线字体
前端开发综合指南：HTML、CSS和JavaScript详解
CSS 禅意花园: CSS 设计之美
CSS 字体
CSS
花店CSS网页模板
小白从零开始学习CSS
Css中路径data用法

原文链接: CSS transition https://www.huajiangbk.com/newsview1885604.html

上一篇: (#74) 北宋 登封窰白釉珍珠...

下一篇: CSS3 transition