Question

我是CSS Animation的新手。我试图制作流程图，但无法修复动画的最终状态。我已经将fill-mode设置为forward，但是在动画结束后元素仍会返回到主要位置。

我的ball.html

    <html>
<head>
    <title>animation-fill-mode</title>
    <link rel="stylesheet" href="styles.css" media="all" />
</head>

<body>      
    <div style="width: 249px; height: 539px; background-image: url(background.jpg);" >
        <div style="margin-left:30px; padding-top:65px">
            <div class='one-line-one olo-d'>
                D
            </div>
            &nbsp;
            <div class='one-line-one olo-e'>
                E
            </div>
            &nbsp;
            <div class='one-line-one olo-f'>
                F
            </div>
        </div>
        <div style="margin-left:30px; padding-top:50px">
            <div class='one-line-one olo-a'>
                A
            </div>
            &nbsp;
            <div class='one-line-one olo-b'>
                B
            </div>
            &nbsp;
            <div class='one-line-one olo-c'>
                C
            </div>
        </div>
    </div>
</body>

</html>

我的styles.css

body {margin: 4em 10%; background:#737373;}
.block{
    background-color:red;
    padding:10px;
    height: 20px;
    width: 20px;

}

.one-line-one{
    display:inline;
    padding: 20px;
    background-color:red;
}

.olo-a{
    -webkit-animation-name: move-right;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count:1;
    -webkit-animation-fill-mode: forwards;
}
.olo-b{

}
.olo-c{

}
.olo-d{

}
.olo-e{

}
.olo-f{

}

.ball1 {
    -webkit-animation-name: l2r;
    -webkit-animation-duration: 2s;
    /*  -webkit-animation-delay:1s; */
}
.ball2 {
    -webkit-animation-name: d2u;
    -webkit-animation-duration: 2s;
    /*  -webkit-animation-delay:1s; */
}

/* For our backwards animation-fill-mode example */
@-webkit-keyframes move-left-right {
    0% {-webkit-transform: translateY(100px);}
    20% {-webkit-transform: translateY(-10px);}
    /*100% {-webkit-transform:translateY(450px);}           */
}

/* For our forwards animation-fill-mode */
@-webkit-keyframes move-right {
    from {-webkit-transform: translateX(0);}
    to {-webkit-transform: translateX(450px);}
}

您可以在此处查看小提琴：https://jsfiddle.net/shaashwato1308/x7x3k667/2/

无法修复CSS动画中的结束状态

0 个答案: