html图片旋转动画,用CSS3动画 animation实现图片旋转

利用animation的动画过渡效果制作一个图片旋转的动画。

随便取了一个图片素材

HTML代码：

旋转

CSS代码：

body

{

margin: 0;

padding: 0;

}

div

{

width: 50px;

height: 25px;

margin: 100px auto;

padding: 150px;

background: url("../IMG/001.jpg") no-repeat;

position: relative;

animation:myfirst 1s infinite ;

}

@keyframes myfirst

{

100%{width: 300px;height: 150px;transform: rotate(360deg);}

}

动画效果：

标签：CSS3,动画,myfirst,height,width,animation,150px

来源： https://www.cnblogs.com/zhangcheng001/p/10949191.html