CSS3动画@keyframes中translate和scale混用出错问题

最新推荐文章于 2023-06-05 22:42:06 发布

影山大法好

最新推荐文章于 2023-06-05 22:42:06 发布

阅读量1.4k

点赞数 2

分类专栏： Web前端文章标签： CSS3 动画 keyframes translate scale

本文链接：https://blog.csdn.net/qiujiawen001/article/details/43484687

版权

Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在写基于网页的2048时，想让一个元素出现时已经通过translate属性固定在指定位置，同时显示动画scale(0)-->scale(1)，以实现放大出现效果。

CSS代码为

		@-webkit-keyframes mymove_failed
		{
		0%   {-webkit-transform:translate(50px,50px) scale(0);}
		100% {-webkit-transform:translate(50px,50px) scale(1);}
		}

但是效果却和预想的不一样，研究后发现，将translate和scale的顺序反过来写，即可实现预期的效果，如下：

		@-webkit-keyframes mymove_success
		{
		0%   {-webkit-transform:scale(0) translate(50px,50px);}
		100% {-webkit-transform:scale(1) translate(50px,50px);}
		}

结论：同时使用translate和scale时，应将scale放前面。

只测试了webkit内核的，其他内核未测试，不知道算不算一个BUG。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.success {
			width: 50px;
			height: 50px;
			background-color: #BBF7F7;
			-webkit-animation: mymove_success 1s;
			-webkit-animation-fill-mode: forwards;
		}
		.failed {
			width: 50px;
			height: 50px;
			background-color: #FF6F6F;
			-webkit-animation: mymove_failed 1s;
			-webkit-animation-fill-mode: forwards;
		}
		@-webkit-keyframes mymove_failed
		{
		0%   {-webkit-transform:translate(50px,50px) scale(0);}
		100% {-webkit-transform:translate(50px,50px) scale(1);}
		}
		@-webkit-keyframes mymove_success
		{
		0%   {-webkit-transform:scale(0) translate(50px,50px);}
		100% {-webkit-transform:scale(1) translate(50px,50px);}
		}
	</style>
</head>
<body>
	<div class="success"></div>
	<div class="failed"></div>
</body>
</html>

影山大法好

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画@keyframes中translate和scale混用出错问题

在写基于网页的2048时，想让一个元素出现时已经通过translate属性固定在指定位置，同时显示动画scale(0)-->scale(1)，以实现放大出现效果。CSS代码为 @-webkit-keyframes mymove_failed { 0% {-webkit-transform:translate(50px,50px) scale(0);} 100% {-w
复制链接

扫一扫