Advanced Search

animate website on load (opacity, fade)

/ Published in: CSS
Save to your folder(s)
Just add 2 classed (animated fadeInDown) to body

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* <body class="animated fadeInDown"> ... </body> */
  2.  
  3. .fadeInDown{
  4. -webkit-animation-name:fadeInDown;
  5. animation-name:fadeInDown
  6. }
  7.  
  8. .animated{
  9. -webkit-animation-duration:1s;
  10. animation-duration:1s;
  11. -webkit-animation-fill-mode:both;
  12. animation-fill-mode:both
  13. }
  14.  
  15. @-webkit-keyframes fadeInDown {
  16. 0%{
  17. opacity:0;
  18. -webkit-transform:translateY(-10px);
  19. transform:translateY(-10px)
  20. }
  21. 100%{
  22. opacity:1;
  23. -webkit-transform:translateY(0);
  24. transform:translateY(0)
  25. }
  26. }
  27.  
  28. @keyframes fadeInDown {
  29. 0%{
  30. opacity:0;
  31. -webkit-transform:translateY(-10px);
  32. -ms-transform:translateY(-10px);
  33. transform:translateY(-10px)
  34. }
  35. 100%{
  36. opacity:1;
  37. -webkit-transform:translateY(0);
  38. -ms-transform:translateY(0);
  39. transform:translateY(0)
  40. }
  41. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.