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>
