transition什么意思
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; -webkit-transition:height 2s; -o-transition:width 2s; }这句话的意思是：
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”变为“AT26T”。
已赞过已踩过<你对这个回答的评价是？评论收起IEIOA2019-02-13·TA获得超过2.1万个赞知道答主回答量：1采纳率：0%帮助的人：368我也去答题访问个人页关注展开全部transition、-moz-transition、-webkit-transition、-o-transition具体的意思就是让 css3的效果兼容其他浏览器：
1、-moz-transition:height 2s; （兼容 老版本火狐 浏览器）
2、-webkit-transition:height 2s; （兼容 Safari Chrome 浏览器）
3、-o-transition:width 2s; （兼容 Opera浏览器）
例子：参数 写的话 就 对应你css3，比如你写的transition:width 2s。
1、兼容老版本火狐：就在前面写上-moz-transition:width 2s;
2、兼容Safari：Chrome 就在前面写上-webkit-transition:width 2s;
3、兼容 Opera：就在前面写上-o-transition:width 2s。
兼容是计算机术语，相对于软件，一种是指某个软件能稳定地工作在某 *** 作系统之中，就说这个软件对这个 *** 作系统是兼容的。再就是在多任务 *** 作系统中，几个同时运行的软件之间，如果能稳定地工作，不出经常性的错误，就说它们之间的兼容性好，否则就是兼容性不好。
扩展资料：
相关语言标准：
在CSS 2.1规范中，识别符（包括选择符中的元素名、类、ID）只能包含A～Z、a～z、0～9等字符，加上连字符“-”、下划线“_”。识别符不能以数字开头，以连字符和下划线开头也是不允许的。只有属性、属性值、单位、伪类、伪元素和“@”规则可以由连字符“-”开头。同时，其他元素名称、类和ID标识符也不允许用连字符开头。
CSS的识别符也需要用反斜杠“”规避特殊字符，这些规避字符遵循IS010646规范。特殊字符的规避方法有两种：第一种方法是遇到特殊字符则在这些字符前直接添加反斜杠，例如，“AT&T”变为“AT&T”；另一种方法为用反斜杠和Unicode或IS010646等值的十六进制数值一起，规避特殊字符，例如，“AT&T”变为“AT26T”。
本回答被网友采纳
已赞过已踩过<你对这个回答的评价是？评论收起 ._4m59a3r{padding:30px 0 20px 42px;border:0;background-color:#fff;position:relative;zoom:1;margin-bottom:10px}._4m59a3r.ec-1841{padding:20px 0}._4m59a3r.ec-2246{padding:20px 0 10px}.ec-1841 ._44pkrw8{font-size:16px;margin-bottom:-5px}._44pkrw8{position:relative;overflow:hidden;line-height:25px;height:25px;color:#7a8f9a}._44pkrw8 h2{margin:0;padding:0}._44pkrw8:after{content:" ";display:block;height:0;clear:both;visibility:hidden}a._53wjrpp{float:right;color:#666;text-decoration:none;font-size:12px;margin-left:8px}._3sjgky6{font-size:13px;line-height:normal;color:#666;line-height:20px;margin-top:10px}._5qv9qjj{position:relative;margin-top:15px}._5qv9qjj h3{padding:0;font-weight:400}._5qv9qjj a{text-decoration:none}._5qv9qjj em{color:#d81419;font-style:normal}.ec-2246 ._5qv9qjj{margin-top:20px}._2md3yaj{margin-top:10px}._8tzhv8k{margin-top:24px}._2n9tg5c{display:block;width:auto;overflow:hidden}._2pgsygz,._3e8y5sz,._3qq8arb,._3snc425,._4r71dp9,._6hxazj8,._7n8mzey,._7wu6jbr,._25ypd8e,._58qg8g6,._78q33t7{position:relative;min-height:1px;float:left;box-sizing:border-box}._6hxazj8{width:8.33333333%}._78q33t7{width:16.6666666%}._4r71dp9{width:25%}._25ypd8e{width:33.33333333%}._58qg8g6{width:50%}._3snc425{width:58.3333333%}._7wu6jbr{width:66.66666667%}._3qq8arb{width:75%}._3e8y5sz{width:83.3333333%}._7n8mzey{width:91.66666667%}._2pgsygz{width:100%}._4xt2t91{float:right}body a._8r3sgmj,body div._8r3sgmj{font-family:Arial,Helvetica,sans-serif;text-decoration:none;color:#333;font-size:14px!important;line-height:19px;margin-bottom:10px;display:block}a._8r3sgmj:hover{color:#34b458;text-decoration:underline}a._8r3sgmj font{color:#34b458}a._8r3sgmj div{word-break:break-all}._2vp72m4{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}._37n8ad5{-webkit-line-clamp:2}._5waejsg,._37n8ad5{display:-webkit-box;word-break:break-all;word-wrap:break-word;-webkit-box-orient:vertical;overflow:hidden}._5waejsg{-webkit-line-clamp:3}._2htasef{display:-webkit-box;-webkit-line-clamp:4;word-break:break-all;word-wrap:break-word;-webkit-box-orient:vertical;overflow:hidden}body .ds4ghcq{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:22px;transform:translateY(.4666666667em);padding-top:0;color:#7a8f9a;position:relative}body .ds4ghcq:before{content:"";margin-top:-10px;display:block;height:0}body .ds4ghcq a{color:#7a8f9a;display:block}body .ds4ghcq a ._36v43n5{color:#666}body .ds4ghcq button{float:right;color:#38f;font-size:12px;background:#fff;border:1px solid;padding:7px 13px;border-radius:3px;line-height:12px;position:absolute;right:0;bottom:0}body .ds4ghcq ._2n4a8n5{margin-left:5px}body .ds4ghcq ._5pyvpnv{display:inline-block;width:22px;height:22px;line-height:0;vertical-align:middle;margin-right:7px;margin-top:-2px;border:1px solid #eee;border-radius:50%}._86c1h4n{position:absolute;right:0}.ds4ghcq .ec-showurl-line:hover{text-decoration:underline}.ds4ghcq .ec-showurl-line{color:#9eacb6}body .tqf6eu9{font-size:12px;line-height:22px;transform:translateY(.4166666667em);padding-top:0}body .tqf6eu9:before{content:"";margin-top:-10px;display:block;height:0}body .tqf6eu9 a,body .tqf6eu9 div{color:#333}body .tqf6eu9 ._5cts8sp{font-size:15px;color:#999;line-height:25px}body .tqf6eu9 ._7rt4vyd{margin-right:5px}.tqf6eu9 font{color:#34b458}.ec-2246 .tqf6eu9 font{color:#c60a00}.ec-2246 .tqf6eu9{font-size:16px}.ec-2246 ._2cp3m46{position:relative}.ec-2246 ._2cp3m46:after{position:absolute;bottom:0;right:0;display:inline-block;padding-left:10px;padding-right:0;content:"70B951FB67E5770B8BE660C5";color:#34b458;background-color:#fff}.ec-2246 ._2cp3m46:before{position:absolute;bottom:0;right:90px;width:47px;height:29px;content:"";background-image:linear-gradient(270deg,#fff,hsla(0,0%,100%,0))}body ._29wz5ed{overflow:hidden;font-size:0;display:flex}body ._5cd6n94{min-width:35px;max-width:35px;margin-right:8px;vertical-align:top}body ._2nu45h5{width:100%;height:100%;background:url(//nv00.cdn.bcebos.com/nv01/static/ecom/img/pc/head-img-535c333798.png) no-repeat 50%;background-size:100% 100%}body ._2uvtfb6{height:35px;min-width:0}body .s1gjn5b{font-size:16px;color:#000;line-height:1;margin-bottom:8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}body ._8vzghvm{color:#999;font-size:12px;line-height:1}body ._29wz5ed ._2msvcy6 img{width:100%}body ._29wz5ed ._4qfz8fz{margin-right:15px}body ._5cd6n94{min-width:40px;max-width:40px;border-radius:50%;overflow:hidden}body .s1gjn5b{margin-bottom:0;font-size:14px;color:#333;line-height:20px;font-weight:700}body ._8vzghvm{margin-top:3px;color:#9eacb6;line-height:17px} 热心网友广告2021-11-28web腾讯企业安全为您提供一站式 Web安全防护解决方案s.tencent.comhmliakop推荐于2019-10-04·TA获得超过1662个赞知道答主回答量：1采纳率：0%帮助的人：1057我也去答题访问个人页关注展开全部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; -webkit-transition:height 2s; -o-transition:width 2s; }这句话的意思是：
1）设置一个div元素，宽度100px，高度30px，背景是蓝色，设置过渡效果2s。
2）当浏览器是火狐、Safari(mac自带浏览器)、谷歌(Chrome)时，触发高度变化时产生2s的渐变效果。
3）当浏览器是除上一句话中的浏览器之外时，触发宽度变化时产生2s的渐变效果。
5、用法：需要一个触发渐变效果的产生的条件。比如：div:hover {height:100px}这个意思是说，当鼠标悬停在元素div上时，会触发div元素高度渐变2s内会变为100px;但是当鼠标移出时，div的高度同样会在2秒内恢复为30px。
扩展资料：
transition渐变属性值可设置多个。如width 2s, height 2s, transform 2s;例子：效果是当鼠标hover到div上时，高度变为200px，宽度变为200px，同时div元素旋转180度。
<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;background: yellow;transition: width 2s, height 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s, -o-transform 2s;}
div:hover {width: 200px;height: 200px;transform: rotate(180deg);-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);}</style></head>
<body><div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div><p><b>注释：</b>本例在 Internet Explorer 中无效。</p></body></html>
整体使用代码如下：
效果如下：
参考资料：
MDN技术文档-使用 CSS transitions
本回答被网友采纳已赞过已踩过<你对这个回答的评价是？评论收起硕哥笑呵呵推荐于2017-05-27·TA获得超过262个赞知道小有建树答主回答量：71采纳率：100%帮助的人：31.6万我也去答题访问个人页关注展开全部具体的意思 就是 让 css3的效果 兼容 其他浏览器-moz-transition:height 2s; -webkit-transition:height 2s; -o-transition:width 2s; 分别是兼容 老版本火狐 浏览器兼容 Safari Chrome 浏览器兼容 Opera浏览器参数 写的话 就 对应你css3比如你写的transition:width 2s;让他兼容老版本火狐 就在前面写上-moz-transition:width 2s;让他兼容Safari Chrome 就在前面写上-webkit-transition:width 2s;让他兼容 Opera 就在前面写上-o-transition:width 2s;
微信扫一扫
支付宝扫一扫
评论列表（0条）