css3中transition特性详解

日期:2021-03-06 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

transform展现的是1种形变結果,而Transation展现的是1种过渡,通俗化点说便是1种动漫变换全过程,如渐显、渐弱、动漫快慢等。transition和transform是两种不一样的动漫实体模型。

1. transition过渡特性
transition 特性是1个简写特性,用于设定4个过渡特性:
英语的语法
transition: property duration timing-function delay;

值叙述transition-property要求设定过渡实际效果的 CSS 特性的名字。 transition-duration要求进行过渡实际效果必须是多少秒或毫秒。
transition-timing-function要求速率实际效果的速率曲线图。 transition-delay界定过渡实际效果什么时候刚开始。

all:表明对于全部元素。
none:表明沒有元素。
ident:特定CSS特性目录
注:请自始至终设定 transition-duration 特性,不然时长为 0,就不容易造成过渡实际效果。transition能够和Transform另外应用。

transition:<过渡特性名字> <过渡時间> <过渡方式>

transition-timing-function 的5种赋值

1.ease 慢慢变慢
2.linear 匀速
3.ease-in 迟缓刚开始(加快)
4.ease-out 迟缓完毕(减速)
5.ease-in-out 迟缓刚开始,迟缓完毕(先加快后减速)
6.cubic-bezier 贝塞尔曲线图(matthewlein.com/ceaser)

过渡方式例如宽过渡,高过渡和all过渡

看1个案例:


拷贝编码
编码以下:

<style type="text/css">
.trans1{
-webkit-transition:0.5 ease;
-moz-transition:0.5s ease;
-webkit-transition-property:all;
-moz-transition-property:all;
position:absolute;
left:10px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans2{
-webkit-transition:0.5 ease;
-moz-transition:0.5s ease;
-webkit-transition-property:width;
-moz-transition-property:width;
position:absolute;
left:350px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans3{
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-webkit-transition-property:height;
-moz-transition-property:height;
position:absolute;
left:780px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans1:hover{
width:300px;
height:300px;
}
.trans2:hover{
width:400px;
}
.trans3:hover{
height:500px;
}
</style></p> <p><body>
<div class="trans1">转换全部的特性</div>
<div class="trans2">只转换宽度特性</div>
<div class="trans3">只转换高宽比特性</div>
</body>

上一篇:全篇查找检索結果 返回下一篇:没有了