在写基于网页的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 {
50px;
height: 50px;
background-color: #BBF7F7;
-webkit-animation: mymove_success 1s;
-webkit-animation-fill-mode: forwards;
}
.failed {
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>