-WebKit-Transition (ie is not supported) is used to make the changes less rigid and achieve a relatively peaceful transition.

<Style type = "text/CSS"> Div {width: 200px;} H2 {Font: 400 40px/1.5 Helvetica, verdana, sans-serif; margin: 0; padding: 0;} ul {list-style-type: none; margin: 0; padding: 0;} li {Font: 200 20px/1.5 Helvetica, verdana, sans-serif; border-bottom: 1px solid # CCC;} li: Last-child {border: none;} li a {text-Decoration: none; color: #000; display: block; width: 200px;-WebKit-transition: font-size 0.3 s elapsed, background-color 0.3 s elapsed;-moz-transition: font-size 0.3 s elapsed, background-color 0.3 s loading;-o-transition: font-size 0.3 s loading, background-color 0.3 s loading;-MS-transition: font-size 0.3 s loading, background-color 0.3 s loading; transition: font-size 0.3 s loading, background-color 0.3 s loading;} li a: hover {font-size: 30px; Background: # f6f6f6 ;} </style> <div> <H2> helvetilist </H2> <ul> <li> <a href = <"#" <> Zurich </a> </LI> <li> <a href = <"#" <> Geneva </a> </LI> <li> <a href = <"#" <> Winterthur </a> </LI> <li> <a href = <"#" <> Lausanne </a> </LI> <li> <a href = <"#" <> Lucerne </a> </LI> </ul> </div>

PS:This attribute can be divided into multiple CSS attributes: (1)-WebKit-transition-timing-function can define the animation change time curve.

-WebKit-transition-timing-function: memory-out, cubic-bezr (x1, Y1, X2, Y2 );
(2)-WebKit-transition-Property specifies the property to be changed
-WebKit-transition-property: opacity;
(3)-WebKit-transition-Duration: specifies the time when a change occurs.
-WebKit-transition-Duration: 2 S;
-WebKit-transition-delay: specifies the time delay before the start of the transformation.
-WebKit-transition: opacity 500 ms timeout-out 100 ms;