小編給大家分享一下CSS3動畫@keyframes圖片變大變小顏色變化的示例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供廣陵企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設(shè)、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為廣陵眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

html：

原理是這樣的：body相對定位，.change絕對定位到.color上面，大小和.color一樣，第一次刷新先顯示.color，然后.change的透明度逐漸改變，與此同時，他們兩個的大小也同時在改變

CSS

body{
	position: relative;
}
.color{width:308px;height: 174px;background-color: lightskyblue;}
.change{
	position: absolute;
	top: 0;
	left: 0;
	animation-name: mychange;			/*動畫的名字*/
	animation-duration: 1000ms;		/*定義動畫完成一個周期所需要的時間，以秒或毫秒計*/
	animation-iteration-count: infinite;		/*定義動畫的播放次數(shù)，這里是無限播放*/
	animation-direction: alternate;			/*定義是否應(yīng)該輪流反向播放動畫，這里是動畫輪流播放*/
}
.color{
	animation-name: mycolor;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes mychange{　　　　/*mychange是動畫的名字上面有用到*/
	0% {
		opacity: .2;
		width: 308px;
		height: 174px;
	}
	100% {
		opacity: 1;
		width: 358px;
		height: 202px;
	}
}
@keyframes mycolor{
	0% {
		width: 308px;
		height: 174px;
	}
	100% {
		width: 358px;
		height: 202px;
	}
}

.color和.change的大小都是從寬：308px，高202px  -->變化到寬358px，高174px。

看完了這篇文章，相信你對“CSS3動畫@keyframes圖片變大變小顏色變化的示例”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！