Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <script>

  </script>
  <style>
        @-moz-keyframes fill {
            from {
                background-color: black;
            }
            to {
                background-color: teal;
            }
        }

        @-webkit-keyframes fill {
            from {
                background-color: black;
            }
            to {
                background-color: teal;
            }
        }

        @-o-keyframes fill {
            from {
                background-color: black;
            }
            to {
                background-color: teal;
            }
        }
        div {
          width: 100px;
          height: 100px;
            background-color: black;
            -moz-animation-name: fill;
            -moz-animation-duration: 5s;
            -webkit-animation-name: fill;
            -webkit-animation-duration: 5s;
            -o-animation-name: fill;
            -o-animation-duration: 5s;
        }
        div:hover {
          background-color: red;
          -moz-transition: background-color 2s;
          -webkit-transition: background-color 2s;
          -o-transition: background-color 2s;
        }

  </style>
</head>
<body>
<div></div>
</body>
</html>