Css3动画属性是哪个

这篇文章主要介绍了Css3动画属性是哪个，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

Transform动画属性

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

rotate3d(x,y,z,angle)x,y,z那个属性1就围绕那个轴转动角度deg

*{

margin:0px;

padding:0px;

}

img{display:block;}

.wrap{

border:1pxsolid#ff0000;

width:380px;

height:565px;

margin:0auto;

position:relative;

top:50px;

-webkit-animation:upDown2slinearinfinite;

}

@-webkit-keyframesupDown{

0%{-webkit-transform:translateY(0);}

50%{-webkit-transform:translateY(20px);}

100%{-webkit-transform:translateY(0px);}

}

@-webkit-keyframesrota_head{

0%{-webkit-transform:rotate(0);}

50%{-webkit-transform:rotate(-5deg);}

100%{-webkit-transform:rotate(0);}

}

.head{

border:1pxsolid#ff0000;

position:absolute;

top:10px;

left:0;

z-index:1;

-webkit-animation:rota_head2slinearinfinite;

}

@-webkit-keyframeseye_open{

0%{opacity:1;}

85%{opacity:1;}

90%{opacity:0;}

100%{opacity:1;}

}

.eye_open{

position:absolute;

top:25px;

left:40px;

-webkit-animation:eye_open2slinearinfinite;

}

@-webkit-keyframeseye_close{

0%{opacity:0;}

85%{opacity:0;}

90%{opacity:1;}

100%{opacity:0;}

}

.eye_close{

position:absolute;

top:37px;

left:40px;

-webkit-animation:eye_close2slinearinfinite;

}

.body{

position:absolute;top:25px;left:8px;

}

.foot{position:absolute;left:8px;bottom:0px;}

感谢你能够认真阅读完这篇文章，希望小编分享的"Css3动画属性是哪个"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!