CSS3动画@keyframes中translate和scale混用出错问题_css scale translate 不能同时-优快云博客

本文链接：https://blog.youkuaiyun.com/qiujiawen001/article/details/43484687

本文探讨了在CSS中使用translate和scale属性实现动画时的顺序问题。通过对比两种不同顺序的效果，得出正确的顺序可以更好地实现预期的动画效果。

在写基于网页的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>