涉及到的属性：
transition-delay
transition-duration
transition-property
transition-timing-function
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS——过渡</title> 6 7 <style> 8 @font-face { 9 font-family: ‘MyFont‘; 10 font-style: normal; 11 font-weight: normal; 12 src: url(‘http://www.font-face.com/fonts/delicious/Delicious-Roman.otf‘); 13 } 14 p{ 15 padding: 5px; 16 border: medium solid cadetblue; 17 background-color: lightgray; 18 margin: 2px; 19 font-size: medium; 20 font-family: MyFont,cursive; 21 } 22 #first{ 23 font-weight: bold; 24 border: medium solid black; 25 transition-delay: 100ms; 26 transition-duration: 250ms; 27 transition-timing-function: linear; 28 } 29 #first:hover{ 30 font-size: x-large; 31 border: medium solid white; 32 background-color: green; 33 color: white; 34 padding: 4px; 35 transition-delay: 100ms; 36 transition-property: background-color,color,padding,font-size,border; 37 transition-duration: 500ms; 38 transition-timing-function: linear; 39 } 40 #second{ 41 font-style: italic; 42 } 43 </style> 44 </head> 45 <body> 46 <p> 47 There is a paragraph.Lorem ipsum dolor sit amet, consectetur adipisicing 48 elit. Ab animi laboriosam nostrum consequatur fugiat 49 <span id="first">banana</span> at, labore praesentium modi, 50 quasi dolorum debitis reiciendis facilis, dolor saepe sint nemo, earum 51 <span id="second">apples,oranges</span> molestias quas.Lorem ipsum dolor sit amet, consectetur 52 adipisicingelit. Ab animi laboriosam nostrum consequatur 53 fugiatat, labore praesentium modi, quasi dolorum debitis 54 reiciendis facilis, dolor saepe sint nemo, earum molestias quas. 55 </p> 56 </body> 57 </html>
原文：http://www.cnblogs.com/shuqicui/p/2017-3-15-2.html