<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div class="animated-element"></div>

</body>

</html>
div {
  background-color: red;
  width: 100px;
  height: 100px;
  position: relative;
}

.animated-element {
  transition: background-color 2s cubic-bezier(0.2, 0.7, 1, 0.8);
}

.animated-element:hover {
  background-color: blue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.