css3 跳出来动效

CSS3是现代网页设计的基础之一，其中的动效功能可以为网页增添生动的气息。在CSS3动画中，跳出来动效是较为流行的效果之一。那么，如何实现跳出来动效呢？

.bounce {
    animation: bounce 1s;
    animation-fill-mode: both;
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0,0,0);
}
40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
}
70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
}
90% {
    transform: translate3d(0,-4px,0);
}
}
    

在以上代码中，.bounce为需要跳出来的元素的类名。接着，我们使用@keyframes来定义一个名为“bounce”的动画。从from到to，我们定义了几个关键帧。每个关键帧都有不同的animation-timing-function和transform属性。这些属性为动画提供了具体的表现形式。

每个关键帧中，我们可以使用transform属性来实现元素的位移、旋转、缩放等效果。通过animation-timing-function属性的调整，我们可以使元素运动的特点更加明显，如改变元素的速度和方向等。

最后，我们将定义好的动画应用到元素上。通过animation属性，我们指定要应用的动画为bounce，时长为1s。animation-fill-mode属性的使用可以使动画执行完后保持最终状态。这样，我们就实现了一个简单的跳出来效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！