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