HTML CSS examples for CSS Animation:Fade
Create Fade In Down animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .fadebox {<!-- www . j a v a 2 s. c o m--> height: 30px; overflow: hidden; } span { display: inline-block; font-size: 21px; font-family: sans-serif; line-height: 30px; text-decoration: underline; transform: translateY(30px); animation: fadeInText 300ms 0ms forwards; } span:nth-child(2) { animation-delay: 150ms; } span:nth-child(3) { animation-delay: 300ms; } @keyframes fadeInText { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } </style> </head> <body> <div class="fadebox"> <span>These Words</span> <span>Are</span> <span>Fading In</span> </div> </body> </html>