css3 transform transition相关问题

Answer 1

既然是过渡，就应该有一个状态的变化，题主这样设置就是让.a的初始状态就为1.1倍。如果你给.a:hover设置样式就可以看到效果了：.a{-webkit-transition:1s0sallease;-o-transition:1s0sallease;-moz-transition:1s0sallease;transition:1s0sallease;}.a:hover{-webkit-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);transform:scale(1.1,1.1);}题主如果是想要一加载就开始动画的话，应该使用animation来实现。

Answer 2

我猜题主想要的可能是这种效果?不过这个应该算动画不算过渡吧www@keyframesmyfirst{from{background:red;}to{background:yellow;-webkit-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);transform:scale(1.1,1.1);}}@-moz-keyframesmyfirst/*Firefox*/{from{background:red;}to{background:yellow;-webkit-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);transform:scale(1.1,1.1);}}@-webkit-keyframesmyfirst/*Safari和Chrome*/{from{background:red;}to{background:yellow;-webkit-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);transform:scale(1.1,1.1);}}@-o-keyframesmyfirst/*Opera*/{from{background:red;}to{background:yellow;-webkit-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);transform:scale(1.1,1.1);}}.a{width:300px;height:300px;background:red;-webkit-animation:myfirst1s;-o-animation:myfirst1s;-moz-animation:myfirst1s;animation:myfirst1s;}