动画效果：css模块左滑入显示或者右边滑入显示

最新推荐文章于 2024-07-31 16:59:37 发布

前端小云儿

最新推荐文章于 2024-07-31 16:59:37 发布

阅读量1.5k

点赞数

分类专栏：前端静态页面以及逻辑文章标签：前端

本文链接：https://blog.csdn.net/jieweiwujie/article/details/130754353

版权

前端静态页面以及逻辑专栏收录该内容

148 篇文章 21 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文探讨了如何使用CSS实现模块内容的左右滑动显示效果，适用于前端开发中的交互设计，通过实例代码详细解析了动画过程，提升用户体验。

摘要由CSDN通过智能技术生成

<div class='slide-left'></div>

.slide-left {
		animation: bounceInLeft 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 alternate forwards;
		-webkit-animation: bounceInLeft 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 alternate forwards;
		/*Safari and Chrome*/
	}

	@keyframes bounceInLeft {
		0% {
			opacity: 0;
			transform: translate3d(-3000px, 0, 0);
		}

		60% {
			opacity: 1;
			transform: translate3d(25px, 0, 0);
		}

		75% {
			transform: translate3d(-10px, 0, 0);
		}

		90% {
			transform: translate3d(5px, 0, 0);
		}

		100% {
			transform: none;
		}
	}