0

I am new to CSS Animation. I was trying to make a flow diagram but cannot fix the end state of the animation. I have set fill-mode to forwards but still the element returns to the primary position after the animation ends.

my 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>

My 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);}
}

You can check the fiddle here: https://jsfiddle.net/shaashwato1308/x7x3k667/2/

syd
  • 195
  • 1
  • 2
  • 10
  • 1
    You need to set `display: inline-block` to `.one-line-one`. Translate transforms work (and hold their position) only for block and inline block elements. I have closed this as a dupe of the linked thread (even though that one is about transition and this is about animation) because the root cause is the same and my answer there has a fair amount of details. – Harry Jan 05 '16 at 08:16
  • Thanks harry for your help. – syd Jan 05 '16 at 08:25

0 Answers0