您的位置：首页 > Web前端 > CSS

【CSS基础】css3 transition过渡属性

2016-12-01 00:37 309 查看

transition 过渡，顾名思义就是说一种变化是循序渐进的走过去，而不是瞬间变化(博主的烂理解)。

请查看mdn的解释： transition

实际上 transition 是简写，它包含4个属性

- transition-property

- transition-duration

- transition-timing-function

- transition-delay

transition-property 指定哪个或哪些 CSS 属性用于过渡，比如你可以设置为width, height,background-color, transform(变形[不是旋转，该属性包含多个效果: rotate_这才是旋转, scale ….]) 等等等…

transition-duration 指定过渡的时间,比如你需要设置一个hover效果，使一个div的宽度从50 到100 所花费的时间

transition-timing-function 你可以理解成物理中的加速度控制器，这个过渡的过程的时间函数，可以由快到慢，由慢到快,默认值是ease 变化弧度是又慢到快然后到慢最后结束，查看其它

transition-delay 过渡动作的开始时间的延时,默认是0，如果你设置成5s 意思就是说5秒过后才开始有这个过渡动作

下面是一个简单的例子:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
padding-top: 20px;
}
.orange {
width: 50px;
height: 50px;
background-color:orange;
margin-bottom:20px;
-webkit-transition: all 2s ease 0s;
margin: 0 auto;
}
.active {
-webkit-transition: all 2s ease 0s;
-moz-transform:rotate(-50deg);
-webkit-transform:rotate(-50deg);
background-color: green;
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>

<div class="orange">

</div>
<input type="button" value="按钮" id="Btn" name="">

<script src="./jquery.js"></script>
<script type="text/javascript">

$('#Btn').on('click', function(){
if($('.orange').hasClass('active')) {
$('.orange').removeClass('active')
}
else {
$('.orange').addClass('active')
}
})
</script>
</body>
</html>

上面这个demo 的transform 只是添加了一个变形效果,也就是rotate(旋转), 我们可以在同一个transform里面添加多个变形效果,

你可以这样

transform: rotate(-50deg) scale(1.5, 1.5) translate(-20%, 30px);

这样过渡效果既有旋转又有按比例放大和根据中心点X Y轴位移的动画效果了！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航