css transform动画

最新推荐文章于 2025-10-22 15:24:20 发布

原创最新推荐文章于 2025-10-22 15:24:20 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #动画 #css3

本文介绍了一种使用 CSS 的 @keyframes 实现 translateY 动画的方法，通过从 50% 的位置平滑过渡到 0%，实现元素的垂直位移动画效果。此外，还设置了无限循环播放的动画属性。

1.css transform动画

@keyframes z360{
              from{
                transform: translatey(50%);
              }
              to{
                transform: translatey(0%);
              }
            }
.scorll-item-images {
				width: 40rpx;
				height: 40rpx;
				float: right;
				margin-top: 30rpx;
				margin-right: 10rpx;
				animation: z360 2s linear infinite;  //动画名  时长   匀速   不停
				animation-delay: 1s;  
			}

2.大概效果