css出现时动画效果 |css设置多选框样式

/*动画1：从下向上滑动*/
.slide-up {
animation-name: slide-up;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes slide-up {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}

上面的示例展示了一个从下向上滑动的动画效果。在CSS中定义了一个”.slide-up”类，指定了动画效果的名称、持续时间、时间函数和填充模式。然后使用CSS关键帧定义了动画效果的开始和结束状态。

/*动画2：淡入效果*/
.fade-in {
animation-name: fade-in;
animation-duration: 2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

上面的示例展示了一个淡入效果。同样地，使用CSS定义了一个”.fade-in”类，指定了动画效果的名称、持续时间、时间函数和填充模式。然后使用CSS关键帧定义了动画效果的开始和结束状态。

CSS出现时动画效果非常容易实现，只需要定义好类和动画效果，然后将其应用到需要的元素上即可。这些动画效果可以使网站更加生动有趣，同时也能提高用户体验。