animation
code is as follows:


@ - webkit - keyframes changeBg 0% {{background - color: # 000; 20%} {background - color: # 300; 40%} {background - color: # 600; 60%} {background - color: # 900; 80%} {background - color: # f00; @ -}} moz - keyframes changeBg 0% {{background - color: # 000; 20%} {background - color: # 300; 40%} {background - color: # 600; 60%} {background - color: # 900; 80%} {background - color: # f00; }} @ keyframes changeBg 0% {{background - color: # 000; 20%} {background - color: # 300; 40%} {background - color: # 600; 60%} {background - color: # 900; 80%} {background - color: # f00; }}. {animation - 1 width: 200 px; Height: 30 px; The line - height: 30 px; The text - align: center; Background - color: # 000; Color: # FFF; }. The animation - 1: hover {- webkit - animation: changeBg 2 s linear; Moz - animation: changeBg 2 s linear; Animation: changeBg 2 s linear; Background - color: # f00; }
code is as follows:


@ - webkit - keyframes textMove {{0% padding - left: 0 px; 20%} {padding - left: 50 px; 40%} {padding - left: 100 px; 50%} {padding - left: 125 px; 60%} {padding - left: 100 px; 80%} {padding - left: 50 px; @ -}} moz - keyframes textMove {{0% padding - left: 0 px; 20%} {padding - left: 50 px; 40%} {padding - left: 100 px; 50%} {padding - left: 125 px; 60%} {padding - left: 100 px; 80%} {padding - left: 50 px; }} @ keyframes textMove {{0% padding - left: 0 px; 20%} {padding - left: 50 px; 40%} {padding - left: 100 px; 50%} {padding - left: 125 px; 60%} {padding - left: 100 px; 80%} {padding - left: 50 px; }}. {animation - 2 background - color: pink; Padding: 10 px 0; }. Animation - 2: hover {- webkit - animation: textMove 2 s linear; Moz - animation: textMove 2 s linear; Animation: textMove 2 s linear; }
code is as follows:


/* because the code is more, only attach here - webkit prefix */. Animation - 3 {position: relative; Width: 200 px; Height: 100 px; Padding: 10 px; Background - color: # CCC; }. Animation - 3 p {opacity: 0; {}. TXT - 1 margin - left: 60 px; Webkit - animation: TXT - 1 - a move 2 s ease - out; Moz - animation: TXT - 1 - a move 2 s ease - out; Animation: TXT - 1 - a move 2 s ease - out; } @ - webkit - keyframes TXT - 1 - a move {{0% margin - left: 0 px; Opacity: 0; } {50% margin - left: 30 px; Opacity: 1; Webkit - transform: skew (15 deg); } {70% margin - left: 35 px; Opacity: 1; } {100% margin - left: 60 px; Opacity: 0; Webkit - transform: skew (- 30 deg); }} </p><P> .txt - 2 {opacity: 1; Height: 36 pixels; Margin - top: 10 px; The font: 18 px/36 px "Microsoft Yahei"; Webkit - animation: TXT - 2 - a move the 4 s ease - out 4 s; Moz - animation: TXT - 2 - a move the 4 s ease - out 4 s; Animation: TXT - 2 - a move the 4 s ease - out 4 s; } @ - webkit - keyframes TXT - 2 - a move {{0% margin - left: 0 px; Opacity: 0; } {30% margin - left: 50 px; Opacity: 1; } {35% margin - left: 55 px; Opacity: 1; } {40% margin - left: 55 px; Opacity: 1; } {41% margin - left: 55 px; Opacity: 1; Webkit - transform: skew (- 30 deg)} {45% margin - left: 55 px; Opacity: 1; } {50% margin - left: 50 px; Opacity: 1; } {60% margin - left: 50 px; Opacity:. 5; } {70% margin - left: 50 px; Opacity: 1; } {80% margin - left: 50 px; Opacity:. 5; } {90% margin - left: 50 px; Opacity: 1; } {100% margin - left: 50 px; Opacity: 1; }} </p><P> .txt - 3 {position: absolute; Bottom: 10 px; Right: 0 px; Margin - left: - 60 px; Webkit - animation: TXT - 3 - a move 2 s ease - out 2 s; Moz - animation: TXT - 3 - a move 2 s ease - out 2 s; Animation: TXT - 3 - a move 2 s ease - out 2 s; } @ - webkit - keyframes TXT - 3 - a move {{0% margin - right: 0 px; Opacity: 0; } {50% margin - right: 30 px; Opacity: 1; Webkit - transform: skew (15 deg); } {70% margin - right: 35 px; Opacity: 1; } {100% margin - right: 60 px; Opacity: 0; Webkit - transform: skew (- 30 deg); }}# 0 - #


This concludes the body part