How to hide background image after 5 seconds only using css?

Question

I am using array values, they should display in div. In this div I want to add background image in span. My problem is I want to hide the background image after 5 seconds only using css. I am using some methods they don't hide the background image. This is my code,

<div id='remove_elem' data-bind='template: { foreach: showRacer }'>
    <div style="width: 50%;" data-bind='attr: { "class": "planet "}'>
        <span data-bind='attr: {"id": id }' class="downImg"></span>
        <div class="left" data-bind='text: id'></div>
        <div class="right" data-bind='text: rank'></div>
    </div>
</div>

script file is,

   $(document).ready(function(){ 
    var PlanetsModel = function() {
        self.Racer = ko.observableArray([
            { id: "Racer-101", rank: "5"},
            { id: "Racer-102", rank: "2"},
            { id: "Racer-103", rank: "1"},
            { id: "Racer-104", rank: "4"},
            { id: "Racer-105", rank: "7"},
            { id: "Racer-106", rank: "8"},
            { id: "Racer-107", rank: "9"},
            { id: "Racer-108", rank: "3"},
            { id: "Racer-109", rank: "6"}
        ]);

       //var newData = self.Racer();
        console.log("First array : " + JSON.stringify(self.Racer()));


        this.showRacer = ko.computed(function() {
           return self.Racer();        
        }, this);
    };
ko.applyBindings(new PlanetsModel());
});

css style is,

<style>
.downImg {
        width: 10px;
        height: 14px;
        background: url(http://pariharam.info/skgmailer/down_arrow.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: scroll;
        -webkit-transition: background-image 0.2s ease-in-out;
        transition: background-image 0.2s ease-in-out;
    }
</style>

This is my sample code, they should display image but don't hide image after 2 seconds. How is it possible in css..

You would have to use a pseudo element with the background image on and then use a keyframes animation to animate the opacity if you want to use only css. Here is an example:https://stackoverflow.com/questions/41152161/opacity-animation-for-background-image — Pete, Nov 09 '18 at 11:54
this topic may be help you! [CSS hide after 5 seconds](https://stackoverflow.com/questions/21993661/css-auto-hide-elements-after-5-seconds) — Sasquashi Junior, Nov 09 '18 at 11:54

How to hide background image after 5 seconds only using css?

0 Answers0