css元素弹出动画 |css框模型怎么用

/*         滑动弹出动画效果        */
.slide-in-right{
transform: translateX(100%); /* 默认隐藏，向右侧划出 */
animation: slide-in-right 0.5s ease-out forwards;
}
@keyframes slide-in-right{
from{
transform: translateX(100%);
}
to{
transform: translateX(0%);
}
}
/*         旋转弹出动画效果         */
.rotate-in{
transform: rotateY(180deg); /* 默认旋转180度，隐藏元素 */
animation: rotate-in 0.5s ease-out forwards;
}
@keyframes rotate-in{
from{
transform: rotateY(180deg);
}
to{
transform: rotateY(0deg);
}
}
/*         缩放弹出动画效果         */
.scale-in{
transform: scale(0); /* 默认缩小，隐藏元素 */
animation: scale-in 0.5s ease-out forwards;
}
@keyframes scale-in{
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}

以上三种弹出动画效果，使用起来非常简单。只需要在元素的类名中加入相应的动画效果即可。比如，使用滑动弹出动画效果，可以在元素的class属性中加入“slide-in-right”类名。