tween on hover - css

<!DOCTYPE html>
<html>
<head>

<style>

    body{
        background-color: #FFFFFF;
        font-family: Arial, Helvetica, sans-serif;
    }

    .divTween{
        background-color: #6666FF;
        color: #FFFFFF;
        cursor: pointer;
        padding: 0.5em;
        max-width: 100px;
    }

    .divTween:hover{
        animation: tweenHover 1s forwards;
    }

    @keyframes tweenHover {
            0% {
                background-color: #6666FF;
                color: #FFFFFF;
            }
            100% {
                background-color: #3333cc;
                color: #ffcc66;
            }
        }

</style>

</head>
<body>

<div class="divTween">Roll Over</div>

</body>
</html>