Shulou(Shulou.com)06/01 Report--

This article mainly introduces which Css3 animation attribute is, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Transform Animation Properties

The transform attribute applies a 2D or 3D transformation to the element. This attribute allows us to rotate, scale, move, or tilt the element.

The attribute 1 of rotate3d (x _ ()) x _ () _ x _ () _ deg.

Untitled document

* {

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;}

Thank you for reading this article carefully. I hope the article "which is the attribute of Css3 animation" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.