My animation code is not working

#1

please help me to solve this doubt

here is my html code https://ide.codingblocks.com/s/442017

here is my css code https://ide.codingblocks.com/s/442018

#2

You forgot to add animation-duration in item and animation-name in one two three and four, Here is correct css code:

.container{
    margin: 30px;
    width: 400px;
    height: 400px;
    background-color: lightcoral;
    border-radius: 10px;
}
.item{
    height: 30px;
    width:30px;
    background-color: darkcyan;
    border: solid black 1px;
    display: inline-block;
    margin: 20px;
    margin-left: 20px;
    border-radius: 5px;
   animation-duration: 2s;
        animation-iteration-count: infinite;
}
.one{
	animation-name: bounce;
    animation-timing-function: ease-in;
}
.two{
animation-name: bounce;
    animation-timing-function: ease-out;
}
.three{
animation-name: bounce;
    animation-timing-function: ease-in-out;
}
.four{
animation-name: bounce;
    animation-timing-function: linear;
}

@keyframes bounce{

    0%{

    }
    50%{
transform: translateY(300px);
background-color: chartreuse;
    }
    100%{

    }
}
#3

I hope I’ve cleared your doubt. I ask you to please rate your experience here
Your feedback is very important. It helps us improve our platform and hence provide you
the learning experience you deserve.

On the off chance, you still have some questions or not find the answers satisfactory, you may reopen
the doubt.