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-size: 40px;}} @keyframes anim-p {50% {font-size: 5px;}} </style> </head> <body> <h1>Animatable 'font-size' Property</h1> <hr> <p>Experience the changing font size of the heading and paragraph using font-size 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> </body> </html>