<!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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.