#firstdiv {

    width: 100px;

    height: 100px;

    background: red;

    animation: firstdivframe 2s;

    animation-play-state: paused;

    animation-fill-mode: forwards;

}

​

#firstdiv:hover {

    animation-play-state: running

}

​

@keyframes firstdivframe {

    from { background: red; }

    to { background: yellow; }

}

​

​

​

#seconddiv {

    width: 100px;

    height: 100px;

    background: red;

    transition: background 2s;

}

​

#seconddiv:hover {

    background: yellow;

}