详解css3中transition过渡属性

Posted 2022-12-16 黯雅悸动

问题？详解css3中transition过渡属性

transition过渡属性是指，当css样式属性发生变化的时候，中间有一个变化的过程，该属性就是为了描述这个过程在呢么变化的。

例子：

	#div1
			width: 200px;
			height: 200px;
			background-color: blue;
			/* transition css3属性，表示的是过渡 ，表示一个元素的样式，变成另外一个样式，有动画的过程,必须写在原来属性中,ease表示不是匀速的。默认是匀速的，延迟0s开始*/
			transition: all 2s ease 0s;
		
	 #div1:hover
			background-color: green;
			width: 0px;
			height: 0px;
			/* border-radius: 50%;
			box-shadow: 2px 2px 2px black; */
			/*transform:旋转属性(度数)
			translateX:移动属性*/
		 

如上例所示，就可以看到css样式变化的过程，而transition这个属性就描述了，相应的例子中也写了它相关的几个条件，分别是CSS属性的名称 ，过渡时间，过渡方式，延迟时间。