css动画效果淡入淡出 |css3代码中 rotate z

.fade-in {
animation: fadeIn 1s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-out {
animation: fadeOut 1s;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

大家可以看到，通过CSS实现淡入淡出只需要两个关键帧。大家可以在一开始定义一个完全透明的状态，即opacity:0，然后在后面设置为不透明的状态，即opacity:1。同样在淡出动画中，就是opacity前后值反转。

接下来，大家可以将这些类应用于大家想要使用动画的元素上，例如：

<div class="fade-in">
<h1>欢迎来到大家的网站！</h1>
<p>这是一段文字，大家将使用淡入效果展示它！</p>
</div>
<div class="fade-out">
<h1>再见！</h1>
<p>大家已经离开这个网站。</p>
</div>

简单的CSS动画就是这么简单，没有任何复杂的代码或框架。如果你想学习更多的动画效果，可以查看animate.css等第三方动画库，其中包含特别多的各种动画效果。