Question

我想在div中旋转图像/内容并将其返回（当然，无限制地执行）。但现在我的动画根本不起作用。有人能帮帮我吗？那就是我所做的：http://jsfiddle.net/2wkpye6d/1/

@keyframes rotating-linear {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
  }
}
@-webkit-keyframes rotating-linear /* Safari and Chrome */ {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
  }
}
@keyframes reverse-rotating {
    from{
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    }
    to{
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    }
}
@-webkit-keyframes reverse-rotating {
    from{
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    }
    to{
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    }
}
#rotating {
    width:48px;
    height:48px;
     animation-timing-function:ease-in-out; background:url(http://icdn.pro/images/en/g/t/gtk-refresh-icone-4774-48.png);
  -webkit-animation: reverse-rotating 2s steps(1) linear infinite,rotating-linear steps(1) 2s linear infinite;
   /*steps(n) is replacing linear, and linear is replacing steps(n).   
    that's why it's don't work.*/
  -moz-animation: reverse-rotating 2s steps(1) linear infinite,rotating-linear 2s steps(1) linear infinite;
  -ms-animation: reverse-rotating 2s steps(1) linear infinite,rotating-linear steps(1) 2s linear infinite;
  -o-animation: reverse-rotating 2s steps(1) linear infinite,rotating-linear 2s steps(1) linear infinite;
  animation: reverse-rotating 2s steps(1) linear infinite,rotating-linear 2s  steps(1) linear infinite;
}

Answer 1

我找到了答案。您可以看到here。

@keyframes rotating {
  0%,100% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
  }
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
  0%,100% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
  }
}
#rotating {
    width:48px;
    height:48px;
     animation-timing-function:ease-in-out; background:url(http://icdn.pro/images/en/g/t/gtk-refresh-icone-4774-48.png);
  -webkit-animation: rotating 1s linear infinite;
  -moz-animation: rotating 1s linear infinite;
  -ms-animation: rotating 1s linear infinite;
  -o-animation: rotating 1s linear infinite;
  animation: rotating 1s linear infinite;
}

CSS：将内容旋转到10deg并将其返回

1 个答案: