0506CSS3 (2D, 3D) animations

|-Change   transform
|--2d
|----rotate (deg) plane rotation deg angle
|----Translate (landscape, portrait) move
|----Scale (wide, high)
|----Skew (horizontal angle, vertical angle) twist
|--3d
|----Rotatex (DEG) rotate along the x axis
|----Rotatey (DEG) rotate along the y axis
|-over   Transition:3s Time 3 sec   who changes to who transition
| | Animation
|--properties: Animation: Animation name, length, execution
|[ Email protected] Animation name {
                     0%{} start status
                   & nbsp;1%~99%{} status in procedure
                    100{} end Status
    }
|[ Email protected] Animation name {
                     from{}
                    to{}
    }

/* Change */.first{width:200px;    height:200px;    Background-color:gold; transition:3s;}. first:hover{/*2d*/transform:rotate (30deg);/* rotate inside//transform:translate (50px,50px);/* Position move: Right, down */transform : Scale (1.5,2);/* Multiples zoom */Transform:skew (20DEG,20DEG);/* Twist *//*3d*/Transform:rotatex (180DEG);/* rotate along X-axis */transform    : Rotatey (360DEG);/* Rotate */}.second{width:300px along y-axis;    height:300px;    Background:black; position:relative;/* added position properties due to the need for a change in position */Animation:donghua 5s infinite alternate;/* Infinite Infinite loop alternate reverse play */} @keyframes donghua{/* change position color shadow ... */0%{background:red; border-radius:90px; Box-shadow: -35px 0px 15px Gray; left:0px;    top:0px;}    20%{background:blue; border-radius:30px; box-shadow:0px 15px 10px Beige; left:200px; top:0px;}    40%{background:blueviolet; border-radius:50px; box-shadow:35px 5px 5px Navy; left:300px; top:100px;} 60%{background:gold; border-radius:70px; box-shadow:70px 40px 0px bisque; left:200px; top: 200px;}    80%{background:green; border-radius:150px; box-shadow:35px 35px 5px aliceblue; left:0px; top:200px;}    100%{background:magenta; border-radius:90px; Box-shadow: -35px 0px 15px blue; left:0px; top:0px;}    from{background:red; border-radius:90px; Box-shadow: -35px 0px 15px Gray; left:0px; top:0px;} To{background:gold; border-radius:70px; box-shadow:70px 40px 0px bisque; left:200px; top:200px;}}.    fangda{width:55px;    height:55px;    border:1px solid Blueviolet; Overflow:hidden;} img{transition:3s;} img:hover{Transform:scale (1.5);}

0506CSS3 (2D, 3D) animations