1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS——动画</title> 6 <style> 7 @font-face { 8 font-family: 'MyFont'; 9 font-style: normal; 10 font-weight: normal; 11 src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf'); 12 } 13 p{ 14 padding: 5px; 15 border: medium solid cadetblue; 16 background-color: lightgray; 17 margin: 2px; 18 font-size: medium; 19 font-family: MyFont,cursive; 20 } 21 #first{ 22 font-weight: bold; 23 border: medium solid black; 24 25 } 26 #first:hover{ 27 -webkit-animation-delay: 100ms; 28 -webkit-animation-duration: 500ms; 29 -webkit-animation-iteration-count: 2; 30 -webkit-animation-timing-function: linear; 31 -webkit-animation-name: GrowShrink; 32 -webkit-animation-direction: normal; 33 34 } 35 @-webkit-keyframes GrowShrink { 36 from{ 37 font-size: xx-small; 38 background-color: red; 39 } 40 50%{ 41 background-color: yellow; 42 padding: 1px; 43 } 44 70%{ 45 color: white; 46 padding: 2px; 47 } 48 to{ 49 font-size: x-large; 50 border: medium solid white; 51 background-color: green; 52 padding: 4px; 53 } 54 } 55 #second{ 56 font-style: italic; 57 } 58 </style> 59 </head> 60 <body> 61 <p> 62 There is a paragraph.Lorem ipsum dolor sit amet, consectetur adipisicing 63 elit. Ab animi laboriosam nostrum consequatur fugiat 64 <span id="first">banana</span> at, labore praesentium modi, 65 quasi dolorum debitis reiciendis facilis, dolor saepe sint nemo, earum 66 <span id="second">apples,oranges</span> molestias quas.Lorem ipsum dolor sit amet, consectetur 67 adipisicingelit. Ab animi laboriosam nostrum consequatur 68 fugiatat, labore praesentium modi, quasi dolorum debitis 69 reiciendis facilis, dolor saepe sint nemo, earum molestias quas. 70 </p> 71 </body> 72 </html>