Question

我有一个svg文件，我正在尝试应用旋转动画（类似于加载器/旋转器），但是旋转半径太大，我似乎无法控制它。 CSS：

.image {
     -webkit-animation:spin 4s linear infinite;
     -moz-animation:spin 4s linear infinite;
     animation:spin 4s linear infinite;
}
.image2 {
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;    
}

    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

svg文件包含两个路径，我分别在其中添加了spin类，因为两个路径都需要不同的旋转速度。

这是jsfiddle：http://jsfiddle.net/f0cn4x1k/

任何帮助都是有用的，

Answer 1

您的CSS不正确。

JSFiddle：http://jsfiddle.net/hy5t1Laz/

将CSS更改为此：

.image
{
   -webkit-animation: spin 4s infinite linear;
  -o-animation: spin 4s infinite  linear;
   animation: spin 4s infinite linear;
  transform-origin: center center;
  transform-box: fill-box;
}


@-webkit-keyframes spin {
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  from {-moz-transform: rotate(0deg);}
  to {-moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
  from {-o-transform: rotate(0deg);}
  to {-o-transform: rotate(360deg);}
}
@keyframes spin{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

svg无法正常旋转

1 个答案: