css3 原地上下动画

CSS3中的动画效果为我们的网页增加了趣味性和交互性，其中原地上下动画是一种比较常见的效果，可以在滚动页面时使元素在原地以上下方向动画的方式展现出来。

/* 定义动画 */ @keyframes slideUpDown {
 0% {
     transform: translateY(30px);
 }
 50% {
     transform: translateY(-30px);
 }
 100% {
     transform: translateY(0);
 }
 }
 /* 应用动画 */ .box {
     animation: slideUpDown 1s forwards;
 }

上述代码中，首先使用“@keyframes”定义了一个名为“slideUpDown”的动画，其中通过transform属性来控制元素向上或向下运动。然后在“box”类中应用了该动画，并设置持续时间为1s，并且通过“forwards”属性保持元素在动画结束的状态下展现。

需要注意的是，在CSS中，可以通过“-webkit-”前缀来应用Webkit内核的浏览器中，如Safari和Chrome等。

/* 应用动画 */ .box {
     animation: slideUpDown 1s forwards;
     -webkit-animation: slideUpDown 1s forwards;
}
    

通过以上代码，即可在网页中为元素添加原地上下动画效果，并且随着滚动页面动态展示。

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