如何为按钮设置动画？(目标c)

import React from 'react';
import './Button.css';

class Button extends React.Component {
  render() {
    return (
     <button className="animated-button">{this->props.children}</button>
    );
  }
}

export default Button;

.animated-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  animation-name: example;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes example {
  0% {background-color: #4CAF50; left:0px; top:0px;}
  25% {background-color: #2196F3; left:200px; top:0px;}
  50% {background-color: #ff9800; left:200px; top:200px;}
  75% {background-color: #4CAF50; left:0px; top:200px;}
  100% {background-color: #4CAF50; left:0px; top:0px;}
}

import React from 'react';
import Button from './Button';

function App() {
  return (
    <div>
     <Button>Click me!</Button>
    </div>
  );
}

export default App;

import React from 'react';
import Button from './Button';

function App() {
  return (
    <div>
     <Button>Click me!</Button>
    </div>
  );
}

export default App;