Question

** 对以前的帖子感到抱歉。它在我完成之前提交，我无法编辑它。 *

我有一个有两个动画的图像。它将首先放大然后旋转。它的工作原理除了旋转开始时，它会在过程中跳转到最后。我是编码的新手，所以这可能是我的疏忽，但我会喜欢一些帮助。下面的代码以及小提琴。

HTML

 <div class="pageLoad">
 <img id ="ox-logo" src="http://demo.alphaomegawebservices.net/weboxsmiles/wp-content/uploads/2014/11/weboxsmiles-logo-600.png">
 </div>

CSS

#ox-logo {
    position: absolute; 
    max-width: 50%;
    margin-left: 150px;
    top: 5%;
    z-index: 20;

    animation: zoomLogo 3s ease-in 1s, rotateLogo 4s ease-in 1s forwards;
    transition: 3s ease-in;
    transform-origin: 50% 50%;

    -webkit-animation: zoomLogo 3s ease-in 1s, rotateLogo 6s ease-in 1s forwards;
    -webkit-transition: 6s ease-in;
    -webkit-transform-origin: 50% 50%;

    -moz-animation: zoomLogo 3s ease-in 1s, rotateLogo 6s ease-in 1s forwards;
    -moz-transition: 3s ease-in;
    -moz-transform-origin: 50% 50%;

    -o-animation: zoomLogo 3s ease-in 1s, rotateLogo 6s ease-in 1s forwards;
    -o-transition: 3s ease-in;
    -o-transform-origin: 50% 50%;

    -ms-animation: zoomLogo 3s ease-in 1s, rotateLogo 6s ease-in 1s forwards;
    -ms-transition: 3s ease-in;
    -ms-transform-origin: 50% 50%;
}


    @keyframes rotateLogo {
       0% {
          transform:  translate(0px,0px)  rotate(0deg) ;
          }
       100% {
          transform:  scale(.2) translate(249px,150px)  rotate(-720deg);
          }
    }

    @-webkit-keyframes rotateLogo {
       0% {
          -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
          }
       100% {
          -webkit-transform:  scale(.2) translate(249px,150px)  rotate(-720deg);
          }
    }

    @-moz-keyframes rotateLogo {
       0% {
          -moz-transform:  translate(0px,0px)  rotate(0deg) ;
          }
       100% {
          -moz-transform:  scale(.2) translate(249px,150px)  rotate(-720deg);
          }
    }

    @-o-keyframes rotateLogo {
       0% {
          -o-transform:  translate(0px,0px)  rotate(0deg) ;
          }
       100% {
          -o-transform:  scale(.2) translate(249px,150px)  rotate(-720deg);
          }
    }

    @-ms-keyframes rotateLogo {
       0% {
          -ms-transform:  translate(0px,0px)  rotate(0deg) ;
          }
       100% {
          -ms-transform:  scale(.2) translate(249px,150px)  rotate(-720deg);
          }
    }



    @keyframes zoomLogo {
      0% {
         opacity: 0;
         transform: scale(.3);
         }

     50% {
         opacity: 1;
         }
     }

    @-webkit-keyframes zoomLogo {
      0% {
         opacity: 0;
         -webkit-transform: scale(.3);
         }

     50% {
         opacity: 1;
         }
     }

     @-moz-keyframes zoomLogo {
      0% {
         opacity: 0;
         -moz-transform: scale(.3);
         }

     50% {
         opacity: 1;
         }
     }

     @-o-keyframes zoomLogo {
      0% {
         opacity: 0;
         -o-transform: scale(.3);
         }

     50% {
         opacity: 1;
         }
     }

     @-ms-keyframes zoomLogo {
      0% {
         opacity: 0;
         -ms-transform: scale(.3);
         }

     50% {
         opacity: 1;
         }
     }

FIDDLE

http://jsfiddle.net/SRVIVR/stgb3fdL/51/

Answer 1

改为使用单个动画。这是一个只有webkit特定代码的jsfiddle：

http://jsfiddle.net/stgb3fdL/56/

代码：

@-webkit-keyframes zoomAndRotate {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
    50% {
        opacity: 1;
    }
    51% {
        -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    100% {
        -webkit-transform:  scale(.2) translate(249px,150px)  rotate(-720deg);
    }
}

动画停止正在进行中

1 个答案: