1

I have a logo on my page which I want to be large in the center of the page for a few seconds before scaling down and moving to its place in the top left hand corner. I have managed to achieve the move i like but I have tried many different things to achieve the scale and not been able to. This is my code

.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;}
}

any help would be much appreciated!!

Icarus
  • 1,627
  • 7
  • 18
  • 32
user3589485
  • 357
  • 3
  • 7
  • 20

1 Answers1

2

Codepen example: http://codepen.io/anon/pen/fipaL

Instead of top and left properties you shoud use translate3d CSS3 property, so to get full benefit of GPU acceleration. For the image scaling you can also use scale() transformation, e.g.

.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 */
...
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • thank you very much!! just one more question, how do I stop the logo returning to its original state at the end of the animation? at the moment it goes straight back to large in the middle ! – user3589485 Apr 30 '14 at 14:11
  • http://stackoverflow.com/questions/9774829/css-animation-property-stays-after-animating – Fabrizio Calderan Apr 30 '14 at 14:12