Html
    Css
    Js

    
                        
 @keyframes scaleDraw {
	/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0% {
	transform:scale(1);
	/*开始为原始大小*/
}
25% {
	transform:scale(1.1);
	/*放大1.1倍*/
}
50% {
	transform:scale(1);
}
75% {
	transform:scale(1.1);
}
}.demo {
	width:200px;
	height:200px;
	background:url("http://www.jq22.com/img/cs/500x500-1.png");
	background-size:200px 200px;
	-webkit-animation-name:scaleDraw;
	/*关键帧名称*/
            -webkit-animation-timing-function:ease-in-out;
	/*动画的速度曲线*/
            -webkit-animation-iteration-count:infinite;
	/*动画播放的次数*/
            -webkit-animation-duration:5s;
	/*动画所花费的时间*/
}
 

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css animation图片放大缩小动画

更新时间:2019-12-19 00:56:14

0