transition属性用法（transition和transform属性的区别）
本文目录
- transition和transform属性的区别
- 如何指定个别属性进行transition过渡
- css3 transition怎么用
- css中的transition属性的用法，下面的代码为什么看不到效果呢
- Transition的语法
- transition、-moz-transition、-webkit-transition、-o-transition是什么意思怎样用
transition和transform属性的区别
前者强调的是看不见的变化，后者强调的看得见的变化。
transition
英[trænˈzɪʃn] 美[trænˈzɪʃən, -ˈsɪʃ-]
n. 过渡，转变，变迁; [语] 转换; [乐] 变调;
[例句]The French say they favour a transition to democracy.
法国人说他们倾向于向民主过渡。
[其他] 第三人称单数：transitions 复数：transitions 现在分词：transitioning过去式：transitioned 形近词： transiting transitive transitron
transformation
英[ˌtrænsfəˈmeɪʃn] 美[ˌtrænsfərˈmeɪʃn]
n. 变化; 《核》转换; 《语》转换; 《电》变换;
[例句]This extraordinary transformation of the region?
这个地区发生了惊人的变化？
[其他] 复数：transformations 形近词： neoformation reformation malformation
如何指定个别属性进行transition过渡
transition-delay 定义过渡效果何时开始：
transition-property
transition-duration
transition-timing-function
transition-delay
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-timing-function 规定速度效果的速度曲线。
transition-duration 规定完成过渡效果需要多少秒或毫秒，用于设置四个过渡属性transition 属性是一个简写属性
css3 transition怎么用
css3 的transition：允许css属性值在一定的时间区内平滑的过渡。
transition-property：变换延续的时间
transition-duration：在延续时间段
transition-timing-function：变换速度变化
transition-delay：变化延迟时间
a：{all 0.5s ease-in 1s；}这里的四个值分别对应上面的四个属性。
* {margin:0;padding:0;}ul{width:300px;}
ul:after {clear:both;display:block;content:“.“;height:0;visibility:hidden;font-size:0;line-height:0;}
ul li{list-style:none;font-size:12px;color:#069;border:1px solid #CBCBCB;background-color:#E5E5E5;border-radius:3px;box-shadow:1px 1px 0 #96969D;width:280px;height:30px;margin-bottom:20px;}
li a{position:relative;width:230px;height:30px;padding-left:25px;display:block;}
li a img{position:absolute;top:6px;left:5px;border:0 none;display:block;}
li a span, li a strong{position:absolute;top:0;left:25px;opacity:1;
-webkit-transition:all 800ms linear;
-moz-transition:all 800ms linear;
-o-transition:all 800ms linear;line-height:30px;width:240px;}
li a strong{top:30px;opacity:0;}
li a:hover{color:#FF6500;_background-color:#E5E5E5;font-weight:bolder;}
li a:hover strong{top:0;opacity:1;}
li a:hover span{top:-30px;opacity:0;}
《div》
《ul》
《li》《a href=“
css中的transition属性的用法，下面的代码为什么看不到效果呢
你这里只是给《p》元素定义了变形的动画参数，对所有CSS变形都有效（all），但并没有触发一个变形。试着通过JS（或在调试工具里）改变一个CSS属性（例如opacity，假设原值为1，这里改成0），你会发现元素不是一下子消失而是渐隐的；同样如果指定尺寸，会发现元素尺寸是逐渐变化的。
Transition的语法
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
默认值：看每个独立属性
取值：
[ transition-property ]：
检索或设置对象中的参与过渡的属性
[ transition-duration ]：
检索或设置对象过渡的持续时间
[ transition-timing-function ]：
检索或设置对象中过渡的动画类型
[ transition-delay ]：
检索或设置对象延迟过渡的时间
说明：
复合属性。检索或设置对象变换时的过渡。
可以为同一元素的多个属性定义过渡效果。
transition、-moz-transition、-webkit-transition、-o-transition是什么意思怎样用
1、transition代表css3中的过渡，可以使元素从一种样式逐渐改变为另一种的效果。
2、transition: height 2s;表示需要渐变的是元素高度height,渐变时间是2s。transition还有其他参数如下图：
3、-moz-,-webkit-,-o-这三个是厂商前缀，不同浏览的厂商,因为不同浏览器有不同的标准，所以为了兼容性，需要把常用的浏览器对应的厂商前缀加上。所以四个属性代表的是一个意思。
-moz- 是火狐浏览器厂商前缀
-webkit- 是谷歌浏览器厂商前缀
-o- 是opera浏览器厂商前缀
4、div {
width:100px;
height:30px;
background:blue;
transition:width 2s;
-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
这句话的意思是：
1）设置一个div元素，宽度100px，高度30px，背景是蓝色，设置过渡效果2s。
2）当浏览器是火狐、Safari(mac自带浏览器)、谷歌(Chrome)时，触发高度变化时产生2s的渐变效果。
3）当浏览器是除上一句话中的浏览器之外时，触发宽度变化时产生2s的渐变效果。
5、用法：需要一个触发渐变效果的产生的条件。比如：
div:hover {
height:100px
}
这个意思是说，当鼠标悬停在元素div上时，会触发div元素高度渐变2s内会变为100px;但是当鼠标移出时，div的高度同样会在2秒内恢复为30px。
扩展资料：
相关语言标准：
在CSS 2.1规范中，识别符（包括选择符中的元素名、类、ID）只能包含A～Z、a～z、0～9等字符，加上连字符“-”、下划线“_”。识别符不能以数字开头，以连字符和下划线开头也是不允许的。只有属性、属性值、单位、伪类、伪元素和“@”规则可以由连字符“-”开头。同时，其他元素名称、类和ID标识符也不允许用连字符开头。
CSS的识别符也需要用反斜杠“\”规避特殊字符，这些规避字符遵循IS010646规范。特殊字符的规避方法有两种：第一种方法是遇到特殊字符则在这些字符前直接添加反斜杠，例如，“AT&T”变为“AT\&T”；另一种方法为用反斜杠和Unicode或IS010646等值的十六进制数值一起，规避特殊字符，例如，“AT&T”变为“AT\26T”。
更多文章：
2026年10月15日 12:00
windows程序设计第五版（《WINDOWS程序设计》和《WINDOWS核心编程》的区别）
2026年10月15日 11:30
issued retroactively（FORM E上盖“ISSUED RETROACTIVELY”的问题，小女在线等待）
2026年10月15日 10:30
2026年10月15日 10:10
begin和start的区别（start与begin的区别）
2026年10月15日 09:20
vant官网中文（范特365 是韩国化妆品VANT36.5吗）
2026年10月15日 09:10
2026年10月15日 08:10
2026年10月15日 07:30
prison break（越狱（prison break）到底是在讲个什么）
2026年10月15日 06:50
c程序设计第五版教学视频（求C程序设计（第五版）谭浩强教材源代码、视频课件等电子版资料！谢谢大家！）
2026年10月15日 06:40
