CodeLab
Show Output
 
xxxxxxxxxx
27
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<title>Example of CSS font-size Property Animation</title>
6
<style>
7
.animated {
8
    font-size: 16px;
9
    -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */
10
    animation: test 4s infinite;
11
}
12
/* Chrome, Safari, Opera */
13
@-webkit-keyframes test {
14
    50% {font-size: 42px;}
15
}
16
/* Standard syntax */
17
@keyframes test {
18
    50% {font-size: 42px;}
19
}
20
</style>
21
</head>
22
<body>
23
    <p><strong>Warning:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p>
24
    <p><strong>Note:</strong> The font-size property of the following paragraph is animating from its initial value "16px" to "42px", and back to the initial value "16px" again up to infinite times.<p>
25
    <p class="animated">This is an animated paragraph.</p>
26
</body>
27
</html>
 

在微博、微信、公众号、小程序分享此示例。 如果您觉得有帮助,请给我们一个赞。