12

右向きの矢印のある背景画像があります。ユーザーがボタンをクリックすると、選択された状態によって矢印が下向きに変わります（画像スプライトの別の背景位置を使用）。

CSS3を使用してこれをアニメーション化する方法はありますか？ボタンがクリックされ、jQueryがそれに「選択された」クラスを割り当てると、アニメーションで右から下に回転しますか（わずか90度）？（できれば、右向きの矢印が付いた単一の画像/位置を使用してください）

変換フレームとキーアニメーションフレームのどちらを使用する必要があるのか​​わかりません。

4

2 に答える 2

20

::after（または::before）を使用しpseudo-elementて、アニメーションを生成できます

div /*some irrelevant css */
{
    background:-webkit-linear-gradient(top,orange,orangered);
    background:-moz-linear-gradient(top,orange,orangered);
    float:left;padding:10px 20px;color:white;text-shadow:0 1px black;
    font-size:20px;font-family:sans-serif;border:1px orangered solid;
    border-radius:5px;cursor:pointer;
}

/* element to animate */
div::after               /* you will use for example "a::after" */
{
    content:' ►';        /* instead of content you could use a bgimage here */
    float:right;
    margin:0 0 0 10px;
    -moz-transition:0.5s all;
    -webkit-transition:0.5s all;
}

/* actual animation */
div:hover::after         /* you will use for example "a.selected::after" */
{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

HTML：

<div>Test button</div>

あなたの場合、代わりにelement.selectedクラスを使用します

jsfiddleデモ：http ：//jsfiddle.net/p8kkf/

お役に立てれば

于 2013-03-02T05:50:43.343 に答える
10

これは、背景画像を回転させるために使用した回転cssクラスです。

.rotating {
  -webkit-animation: rotating-function 1.25s linear infinite;
     -moz-animation: rotating-function 1.25s linear infinite;
      -ms-animation: rotating-function 1.25s linear infinite;
       -o-animation: rotating-function 1.25s linear infinite;
          animation: rotating-function 1.25s linear infinite;
}

@-webkit-keyframes rotating-function {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotating-function {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-ms-keyframes rotating-function {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-o-keyframes rotating-function {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}

@keyframes rotating-function {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
于 2013-03-02T05:14:12.497 に答える