动画网站加载（不透明度，淡入淡出）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动画网站加载（不透明度，淡入淡出）相关的知识，希望对你有一定的参考价值。

Just add 2 classed (animated fadeInDown) to body
  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. }

以上是关于动画网站加载（不透明度，淡入淡出）的主要内容，如果未能解决你的问题，请参考以下文章

jQuery不透明度/淡入淡出动画只能使用一次

jQuery-4.动画篇---淡入淡出效果

jQuery动画（显示隐藏，淡入淡出，滑动）

AngularJS 1.2从0到0.5的淡入淡出动画不起作用

淡入淡出效果 (jQuery)

IE在JQuery淡入淡出/不透明动画中扭曲文本