css 浮现动画 |css 表格虚线边框样式

/* transition实现浮现动画 */
.box{
opacity:0;
transition: all 0.5s ease-in-out;
}
.box.active{
opacity:1;
}
/* animation实现浮现动画 */
.box{
opacity:0;
animation: fadeIn 0.5s ease-in-out forwards;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

通过上述代码，大家可以看到transition和animation实现浮现动画的区别：

1. transition需要在元素状态发生改变时才会生效，因此需要有相应的触发事件。

2. animation则是基于时间控制，可以理解为一种自带触发效果的动画方式。

不管是哪种实现方式，浮现动画都可以为页面增添一份动感，让网站看起来更加生动有趣。