【CSS基础】css3 transition过渡属性
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轴位移的动画效果了！
