css3动画使用

最新推荐文章于 2024-05-23 22:59:55 发布

qq_43024532

最新推荐文章于 2024-05-23 22:59:55 发布

阅读量84

点赞数

文章标签： css html5 css3

本文链接：https://blog.csdn.net/qq_43024532/article/details/116260546

版权

<body>
		<div class="zoomOutLeft">欢迎观看本文章</div>
	</body>

<style>
			@-webkit-keyframes zoomOutLeft {
				40% {
					opacity: 1;
					-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
					transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
				}
				to {
					opacity: 0;
					-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
					transform: scale(0.1) translate3d(-2000px, 0, 0);
					-webkit-transform-origin: left center;
					transform-origin: left center;
				}
			}
			
			@keyframes zoomOutLeft {
				40% {
					opacity: 1;
					-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
					transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
				}
				to {
					opacity: 0;
					-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
					transform: scale(0.1) translate3d(-2000px, 0, 0);
					-webkit-transform-origin: left center;
					transform-origin: left center;
				}
			}
			
			.zoomOutLeft {
				 /*-webkit-animation-duration: 1s;
			     animation-duration: 1s;
			    -webkit-animation-fill-mode: both;
			    animation-fill-mode: both;
				-webkit-animation-name: zoomOutLeft;
				animation-name: zoomOutLeft; */
				animation:zoomOutLeft 5s linear both ;
			}
		</style>

qq_43024532

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画使用

<body> <div class="zoomOutLeft">欢迎观看本文章</div> </body><style> @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: sca
复制链接

扫一扫