Why my animation with css : active is not working - css

Question

I have a button with send and on clicking, I want to move it, (this is just for asking) can you tell me why it is not working
This is the jsx
import React from 'react'
import './home.css'
import sound from './sound.mp3'
import video from './A.mp4';
import img1 from './home1.jpeg';
import img2 from './home4.jpeg';
import img3 from './home3.jpeg';
import { useRef } from 'react';
return (
<>
<div className="form" onClick={prevent} >
<form action="" className='contact_form'>
<div className="heading_contact">
Get in touch with me
</div>
<input className="info_contact" placeholder='Your Name' ></input>
<input className="info_contact" placeholder='Your Email' ></input>
<textarea className='info_contact' name="" id="" cols="27" rows="10" placeholder='You message'></textarea>
<button id='delivery' className="submit" >
<i class="fa-solid fa-truck" ></i>
</button>
</form>
<div className='alternates' >
Or contact me through
</div>
</div>
</>
)
}
And this is the CSS for the animation
#delivery:active {
position: relative;
animation-name: delivery;
animation-duration: 15s;
animation-iteration-count: 5;
#keyframes delivery{
from {
margin-right: 0px;
}
to {
margin-right: 100px;
}
}
}
I also tried to bring the keyframes section out of the :active selector but it still won't work.