animation - css3アニメーション：divが正しいサイズではありません

Question

        .wheel {
            width: 50px !important;
            height: 50px !important;
        }

            .wheel1 {    
                width: 100%;
                height: 100%;
                background-color: #3D3D3D;
                border-radius: 50% / 50%;
                position: absolute;    
            }

            .wheel2 {
                width: 80%;
                height: 80%;
                background-color: #B8B8B8;
                margin: 10%;    
                border-radius: 50% / 50%;
                position: absolute;

                -webkit-animation: wheelActive 1s;
                -webkit-animation-iteration-count: infinite;

                -moz-animation: wheelActive 1s;
                -moz-animation-iteration-count: infinite;

                -ms-animation: wheelActive 1s;
                -ms-animation-iteration-count: infinite;

                -o-animation: wheelActive 1s;
                -o-animation-iteration-count: infinite;

                animation: wheelActive 1s;
                animation-iteration-count: infinite;
            }

            @-webkit-keyframes wheelActive
            {
                0%   { margin: 5%; height: 90%; width: 90%; }
                50%  { margin: 0%; height: 100%; width: 100%; }
                100% { margin: 5%; height: 90%; width: 90%; }

            }

            @-moz-keyframes wheelActive
            {
                0%   { margin: 5%; height: 90%; width: 90%;  }
                50%  { margin: 0%; height: 100%; width: 100%;  }
                100% { margin: 5%; height: 90%; width: 90%;  }

            }

            @-ms-keyframes wheelActive
            {
                0%   { margin: 5%; height: 90%; width: 90%;  }
                50%  { margin: 0%; height: 100%; width: 100%;  }
                100% { margin: 5%; height: 90%; width: 90%;  }

            }

            @-o-keyframes wheelActive
            {
                0%   { margin: 5%; height: 90%; width: 90%;  }
                50%  { margin: 0%; height: 100%; width: 100%;  }
                100% { margin: 5%; height: 90%; width: 90%;  }

            }

            @keyframes wheelActive
            {
                0%   { margin: 5%; height: 90%; width: 90%;  }
                50%  { margin: 0%; height: 100%; width: 100%;  }
                100% { margin: 5%; height: 90%; width: 90%;  }

            }

http://jsfiddle.net/LXEXU/

回転しているように見えるホイールを作成しようとしていますが、機能していません。ホイールは50x50ピクセルではありません。どうすればこれを機能させることができますか？ありがとう！

Answer 1

位置を追加：相対; .wheelに変換して50pxX50px http://jsfiddle.net/LXEXU/1/