[分享]css3动画和过渡

CSS3动画和过渡是前端开发中常用的属性之一，它们可以使网站更加生动活泼。过渡是一个元素从一种样式逐渐改变为另一种样式的效果。我们可以使用transition属性来实现过渡效果。 .box { wid...

CSS3动画和过渡是前端开发中常用的属性之一，它们可以使网站更加生动活泼。

过渡是一个元素从一种样式逐渐改变为另一种样式的效果。我们可以使用transition属性来实现过渡效果。

 .box {
	width:100px;
	height:100px;
	background-color:blue;
	transition:all 1s;
}
.box:hover {
	width:200px;
	height:200px;
}

当鼠标悬停在.box元素上时，它的宽度和高度会从100px逐渐增加到200px。过渡效果可以使过渡过程更加平稳自然。

CSS3动画则可以创建令人惊叹的动态效果，比如旋转、缩放、平移等等。我们使用@keyframes关键字创建动画，并通过animation属性将动画应用到元素上。

 .box {
	width:100px;
	height:100px;
	background-color:blue;
	animation:rotate 2s infinite;
}
@keyframes rotate {
	0% {
	transform:rotate(0);
}
100% {
	transform:rotate(360deg);
}
}

在上述代码中，.box元素会不断旋转，直到页面关闭。我们通过@keyframes关键字定义了一个名为rotate的动画，动画的起始状态是0%，结束状态是100%。在动画从0%到100%的过程中，元素将被旋转360度。我们通过animation属性将这个动画应用到了.box元素上。

总的来说，CSS3动画和过渡是前端开发不可或缺的一部分。使用这些属性可以使网站更加生动有趣。