为什么@keyfame动画属性会显示在列表项的下面？我想使用React js删除一个在单击按钮时要删除的列表项

/* 提高选择器的特异性 */
ul li.animated-item {
  animation: my-animation 1s infinite;
}

/* 使用 !important */
ul li {
  animation: my-animation 1s infinite !important;
}

import React, { useState } from 'react';

function ListComponent() {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  const handleRemoveItem = (index) => {
    const newItems = items.filter((_, i) => i !== index);
    setItems(newItems);
  };

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index} className="animated-item">
          {item}
          <button onClick={() => handleRemoveItem(index)}>Remove</button>
        </li>
      ))}
    </ul>
  );
}

export default ListComponent;