Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS: Spin content to 10deg and return it back

CSS: Spin content to 10deg and return it back

Problem

I want to rotate image/content in div and return it back (and, of course, doing it infinitely). But now my animation don't work at all. Can anybody help me?
That what I've done: 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;
}
Problem courtesy of: Kirill Danshin

Solution

I found answer. You can see 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;
}
Solution courtesy of: Kirill Danshin

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS: Spin content to 10deg and return it back

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×