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