css3过渡属性transition

阅读() @2019-05-12 11:46:31

css3与之前的css最大的一个区别就是:创建很多新的css属性来完成以前只有javascript才能完成或不能完成的动画,比如我们今天说的这个transition过渡属性,我的这个博客中就有应用。在web前端开发栏目中,有三个二级栏目,分别是html5、css3和javascript,鼠标滑过其中一个的时候,他会以Z轴为中心旋转360度,但是旋转的时候并不是在瞬间发生的,整个过程用了1s的时间,这个时间就是在transition过渡属性中进行设置。

transiton主要有以下几个属性:

transition-property   /*规定设置过渡效果的 CSS 属性的名称。*/

transition-duration	 /*规定完成过渡效果需要多少秒或毫秒。*/

transition-timing-function	   /*规定速度效果的速度曲线。*/

transition-delay	   /*定义过渡效果何时开始。*/

比如下面这个效果:原来的div是宽高都是100px,并且背景是红色,鼠标滑过之后,变成宽1000px,高100px,背景还是红色。

<style type="text/css">
	*{margin:0px;padding:0px}
	.box{
		width:100px;
		height:100px;
		background:red;
		transition-duration:5s;
                -webkit-transition-duration:5s;
                -moz-transition-duration:5s;
                -o-transition-duration:5s;
		transition-delay:2s;
                -webkit-transition-delay:2s;
                -moz-transition-delay:2s;
                -o-transition-delay:2s;
		transition-timing-function:linear;
                -webkit-transition-timing-function:linear;
                -moz-transition-timing-function:linear;
                -o-transition-timing-function:linear
	}
	.box:hover{width:1000px}
</style>

<div class="box"></div>

目前各个版本的旧浏览器还不能完全支持所有的css3属性,所以需要写上向下兼容的代码!

微信二维码