html - 要素を左に移動 - CSS アニメーション

Question

CSS アニメーションを使用して単純なスライドショーを作成していますが、この時点で立ち往生しています。私は持っている：

#Content #PresentationSlideOne {
    display: block;
    width: 25%;
    margin: 0 auto;
    background-color: Blue;

    -moz-animation: PresentationSlideOne 4s ease 1 normal;
    -o-animation: PresentationSlideOne 4s ease 1 normal;
    -webkit-animation: PresentationSlideOne 4s ease 1 normal;
    animation: PresentationSlideOne 4s ease 1 normal;

    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}

キーフレーム:

/* #region PresentationSlideOne */
@keyframes PresentationSlideOne {
    from {
        margin: 0 auto;

    }

    to {
        margin: initial;
        float: left;
        left: 0%;
    }
}
/* #endregion */

margin: 0 auto; に設定されています。元々、水平方向に中央揃えにする必要があるためです。しかし、キーフレームでは、それを移動する必要がありfrom margin: 0 auto; to left: 0%;ます。どの方法を試しても何も起こりません。

margin: 0 auto'd 要素を左に移動するにはどうすればよいですか?