css animation 动画的制作

上效果

效果描述：原来这些图片都绝对定位在最右边，并有一个css3 3D的旋转初始效果。随着动画的开始，依次向左移动，并旋转到0度。（主要用于引导页步骤的描述）

上代码:

html布局

<div class="guidancePage2 col-md-12">

    <div class="pre"><img src="img/pre.png" alt="上一页"></div>

    <div class="step">

            <div class="step_img">

                <div>

                    <div class="step_content"></div>

                    <p>（一）</p>

                </div>

                <div>

                    <div class="step_content"></div>

                    <p>（二）</p>

                </div>

                <div>

                    <div class="step_content"></div>

                    <p>（三）</p>

                </div>

                <div>

                    <div class="step_content"></div>

                    <p>（四）</p>

                </div>

                <div>

                    <div class="step_content"></div>

                    <p>（五）</p>

                </div>

            </div>

            <div class="step_state"></div>

    </div>

</div>

　　css代码，没有做兼容

.guidancePage2 .pre{

    margin-top: 10px;

}

.step {

    width: 80%;

    height: 50%;

    /*background: #fff;*/

    position: relative;

    left: 50%;

    margin-left: -47%;

    top: 10%;

}

.step_img {

    height: 100%;

    width: 100%;

    /*background: darkseagreen;*/

    position: relative;

}

.step_img>div {

    width: 19%;

    height: 100%;

    position: absolute;

    right: 0px;

    transform: perspective(1377px) rotate(0deg) rotateY(-100deg);

    /*box-shadow: 0px 2px 0px #ccc;*/

    /*background: url("../img/1.jpg") no-repeat;*/

    background-size: cover;

}

.step_content {

    width: 100%;

    height: 90%;

    background-color:rgba(255, 255, 255, .8);

    position: relative;

}

.step_img>div p{

    text-align: center;

    color: #fff;

    font-weight: 800;

    position:relative;

}

@-webkit-keyframes Step

{

    0% {right:0px; transform: perspective(1377px) rotate(0deg) rotateY(-100deg);}

    100% {right:81%;transform: perspective(1377px) rotate(0deg) rotateY(0deg);}

}

@-webkit-keyframes Step2

{

    0% {right:0px; transform: perspective(1377px) rotate(0deg) rotateY(-100deg);}

    100% {right:61%;transform: perspective(1377px) rotate(0deg) rotateY(0deg);}

}

@-webkit-keyframes Step3

{

    0% {right:0px; transform: perspective(1377px) rotate(0deg) rotateY(-100deg);}

    100% {right:41%;transform: perspective(1377px) rotate(0deg) rotateY(0deg);}

}

@-webkit-keyframes Step4

{

    0% {right:0px; transform: perspective(1377px) rotate(0deg) rotateY(-100deg);}

    100% {right:21%;transform: perspective(1377px) rotate(0deg) rotateY(0deg);}

}

@-webkit-keyframes Step5

{

    0% {right:0px; transform: perspective(1377px) rotate(0deg) rotateY(-100deg);}

    100% {right:1%;transform: perspective(1377px) rotate(0deg) rotateY(0deg);}

}

.step_img>div{

    cursor: pointer;

}

.step_img>div:nth-child(1){

    animation:Step 1s linear;

    animation-fill-mode:forwards;

    animation-iteration-count:1;

}

.step_img>div:nth-child(2){

    animation:Step2 1s linear .8s;

    animation-iteration-count:1;

    animation-fill-mode:forwards;

}

.step_img>div:nth-child(3){

    animation:Step3 1s linear 1.6s;

    animation-iteration-count:1;

    animation-fill-mode:forwards;

}

.step_img>div:nth-child(4){

    animation:Step4 1s linear 2.4s;

    animation-iteration-count:1;

    animation-fill-mode:forwards;

}

.step_img>div:nth-child(5){

    animation:Step5 1s linear 3.2s;

    animation-iteration-count:1;

    animation-fill-mode:forwards;

}