Question

我的页面上有一个徽标，我希望在页面中央放大几秒钟，然后缩小并移动到左上角的位置。我已经设法实现了我喜欢的举动，但我已经尝试了很多不同的东西来达到规模并且无法实现。这是我的代码

.logo {
    position: absolute;
    top: 0px;
    -webkit-animation: myMove 3s;
    -moz-animation: myMove 3s;
    -o-animation: myMove 3s;
    animation: myMove 3s;
}

@-webkit-keyframes myMove {
    0%   {top:350px; left:450px;}
    25%  {top:350px; left:450px;}
    50% {top:350px; left:450px;}
    100% {top:0px; left:0px;}
}

@-moz-keyframes myMove {
    0%   {top:350px; left:450px;}
    25%  {top:350px; left:450px;}
    50% {top:350px; left:450px;}
    100% {top:0px; left:0px;}
}

@-o-keyframes myMove {
    0%   {top:350px; left:450px;}
    25%  {top:350px; left:450px;}
    50% {top:350px; left:450px;}
    100% {top:0px; left:0px;}
}

@keyframes myMove {
    0%   {top:350px; left:450px;}
    25%  {top:350px; left:450px;}
    50% {top:350px; left:450px;}
    100% {top:0px; left:0px;}
}

任何帮助都会非常感激!!

Answer 1

Codepen示例：http://codepen.io/anon/pen/fipaL

您应该使用translate3d CSS3属性来代替顶部和左侧属性，以便充分利用GPU加速。对于图像缩放，您还可以使用scale()转换，例如

.logo {

    position: absolute;

    /* set initial position here */
    top: 350px;
    left: 450px;

    -webkit-animation: myMove 3s;
    -moz-animation: myMove 3s;
    -o-animation: myMove 3s;
    animation: myMove 3s;

}

@-webkit-keyframes myMove {
    0%   { -webkit-transform: scale(1); }
    50%  { -webkit-transform: translate3d(0, 0, 0);}
    100% { -webkit-transform: scale(.5), translate3d(-450px, -350px, 0);} 
}



/* insert here the same code with browser-vendor prefixes */
...

如何使用css过渡来缩放图像并同时移动它？

1 个答案: