CodeLab
Tutorials For Everyone
Run
<!DOCTYPE html> <html> <head> <style> #container { width: 70%; padding: 20px; border: 2px solid #00f; margin: auto; box-shadow: 0 0 10px 0 #aaa; } #container h2{animation: anim-h 5s infinite;} #container p{animation: anim-p 5s infinite;} @keyframes anim-h {50% {font: 40px bold;}} @keyframes anim-p {50% {font: 3px bold;}} </style> </head> <body> <h1>Animatable 'font' Property</h1> <hr> <p>Experience the changing font properties of the text using font property.</p> <div id="container"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p> </div> <p style="position: absolute; bottom: 0;">The font property is a shorthand property for all font properties.<br> font-size, font-weight, font-stretch, and line-height are <em>animatable</em> in CSS.</p> </body> </html>