您的位置：首页 > Web前端 > CSS

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

2015-02-04 12:43 441 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS3 动画 keyframes translate scale

相关文章推荐

新的分享

章节导航