html - 需要帮助使动画流畅

Question

我正在尝试制作流畅的动画，这就是我所做的

Demo code

请注意转换时有一个小故障，不流畅。任何人都可以帮助制作流畅的动画。我不能改变div结构，请尝试用这个div结构来回答。

HTML

<div id="tilecontainer">
    <div class="tile">
        <div class="tileinnerdiv">
            <span class="tileheader">Risk Analysis</span>
        </div>
    </div>
</div>

CSS

#tilecontainer
{
    width: 900px;
    height: 650px;
    background: REd;
    margin: 0 auto;
    padding: 25px;
    -moz-perspective: 850px;
    -ms-perspective: 850px;
    -webkit-perspective: 850px;
    perspective: 850px;
    margin-left: 0px;
}

.tile
{
    width: 185px;
    height: 180px;
    background: grey;
    margin: 10px;
    display: inline-block;
    float: left;
    position:ablosute;
    box-shadow: inset 0px 0px 50px 0px blue;

    animation: myani 0.5s 1 ease;
}

.tileinnerdiv
{
    margin: 0 auto;
    padding: 10px;
    margin-top: 30px;
}

.tileheader
{
    margin: 0 auto;
    color: yellow;
    font-size: 14px;
    margin-top: 5px;
    text-align: center;
    display: block;
    font-weight: bold;
}

.tile:hover
{
    -moz-transform: rotate3d(45, 90, 0, 10deg);
    -ms-transform: rotate3d(45, 90, 0, 10deg);
    -o-transform: rotate3d(45, 90, 0, 10deg);
    -webkit-transform: rotate3d(45, 90, 0, 10deg);
    transform: rotate3d(45, 90, 0, 10deg);
}

@keyframes myani
{
    from{transform: rotateY(60deg);}
    to{transform: rotateY(0deg);}
}

Answer 1

使用过渡，参见http://jsfiddle.net/94S8a/1/

transition: 1s;