CSS animations - how to retain the player at same position where the click is no longer active. It gets back to the original position as soon as the click is left unpressed rather than staying at that position

#1
  • how to retain the player at same position where the click is no longer active. It gets back to the original position as soon as the click is left unpressed rather than staying at that position

code :

<!DOCTYPE Page Title #d1 { background-color: blanchedalmond; height: 600px; width: 800px; } #player { display: inline-block; background-color: red; height: 60px; width: 60px; transform: translateY(270px); animation-name: leftright ; position: static; 
    }
    .obstacle {
        display: inline-block;
        height: 60px;
        width: 60px;
    }
    #ob1 {
        transform: translateX(180px);
        background-color: blue;
        animation-name: godown1 ;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;

    }
    #ob2 {
        transform: translateX(280px);
        background-color: blueviolet;
        animation-name: godown2 ;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    @keyframes godown1 {
        0% {
            transform: translate(180px,0px)

        }
        50% {
            transform: translate(180px,540px)
        }
        100% {
            transform: translate(180px,0px)
        }
    }
    @keyframes godown2 {
        0% {
            transform: translate(280px,0px)

        }
        50% {
            transform: translate(280px,540px)
        }
        100% {
            transform: translate(280px,0px)
        }
    }
    @keyframes horizontalslide {
        0% {
            transform: translate(0px , 270px);
        }
        50% {
            transform: translate(740px,270px);
        }
        100% {
            transform: translate(0px,270px);
        }
    }
    #d1:active #player {
        animation-name: horizontalslide ;
        animation-timing-function: linear;
        animation-duration: 1s;
    }
</style>
#2

Add these two lines in your code and it will work !

#player {
animation-play-state : paused;
}

#d1:active #player {
animation-play-state : running;
}