docs: Update cookbook documentation on CSS animation usage (#1697)

Fixes #1695

docs/Cookbook.md

@@ -217,7 +217,7 @@ module.exports = {
       // We're changing the LogoRenderer component
       logo: {
         // We're changing the rsg--logo-XX class name inside the component
-        animation: 'blink ease-in-out 300ms infinite'
+        animation: '$blink ease-in-out 300ms infinite'
       },
       '@keyframes blink': {
         to: { opacity: 0 }
@@ -271,7 +271,7 @@ module.exports = {
     // We're changing the LogoRenderer component
     logo: {
       // We're changing the rsg--logo-XX class name inside the component
-      animation: 'blink ease-in-out 300ms infinite'
+      animation: '$blink ease-in-out 300ms infinite'
     },
     '@keyframes blink': {
       to: { opacity: 0 }
@@ -299,6 +299,12 @@ module.exports = {
 }
 ```
 
+## How to use CSS animations in your style guide?
+
+As seen in the `@keyframes` animation examples above, the animation property in CSS rules do not directly use the name of their keyframe animations because of internal keyframe scoping.
+
+To use a CSS animation, you have to define its keyframe at the root of the renderer object. The use of `@keyframes` in styling above are good examples of this.
+
 ## How to change the layout of a style guide?
 
 You can replace any Styleguidist React component. But in most of the cases you’ll want to replace `*Renderer` components — all HTML is rendered by these components. For example `ReactComponentRenderer`, `ComponentsListRenderer`, `PropsRenderer`, etc. — [check the source](https://github.com/styleguidist/react-styleguidist/tree/master/src/client/rsg-components) to see what components are available.