CSS 加载动画网站（不透明度，淡入淡出）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 加载动画网站（不透明度，淡入淡出）相关的知识，希望对你有一定的参考价值。
/* <body class="animated fadeInDown"> ... </body> */
.fadeInDown{
-webkit-animation-name:fadeInDown;
animation-name:fadeInDown
}
.animated{
-webkit-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}
@-webkit-keyframes fadeInDown {
0%{
opacity:0;
-webkit-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes fadeInDown {
0%{
opacity:0;
-webkit-transform:translateY(-10px);
-ms-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{
opacity:1;
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
}
以上是关于CSS 加载动画网站（不透明度，淡入淡出）的主要内容，如果未能解决你的问题，请参考以下文章
jQuery不透明度/淡入淡出动画只能使用一次
JQuery：结合动画 CSS 和淡入淡出
使用 CSS 过渡的滑动 + 淡入淡出效果
Lottie 动画加载时如何淡入淡出？
jQuery-4.动画篇---淡入淡出效果
jQuery动画（显示隐藏，淡入淡出，滑动）