Apply style after CSS animation without JS

You do need to use animation-fill-mode:forwards as Devin suggests, but this only works for properties set in the animation. In order to set properties other than the ones you want actually animated, you must make them part of the animation by adding them to the very end like so:

@keyframes  {
  /* ... Your original keyframes (except the last) ... */
  99.99% { /* ... The properties of something you want to change ... */ }
  100% { /*... Your original end properties and the changed properties ...*/ }
}

for example:

@keyframes rotate {
    0% { transform:rotate(0deg); }
    99.999% { background:blue; }
    100% { transform:rotate(360deg); background:red; }
}

By having the difference between the two end keyframes as really small, it will jump to the new styles no matter what the animation-duration is.

Demo

The other, more common, way to get this effect is to use Javascript's animation-end

yes, you need to use Animation Fill Mode.

Simply define that style as the last keyframe and then you add this to #product

#product{-webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;}