Animate baby names

[JasonDuquain]

User Story:

• As a designer I want to animate the baby name(s) that are returned to enhance the user experience and anticipation.

Technical tasks required:

• Add Jasmine test case(s).

• Use CSS (and possibly javascript) to animate the baby name(s) as they appear from the reply.

• Confirm all jasmine test specs pass.

Difficulty Rating: 1

[JasonDuquain]

Additional details on the animation of the baby names that are returned:

• For the animation the names will fade in from an opacity of 0 to an opacity of 1. They will also be scaled down from a 140% font-size to 100%. There will also be an animation-delay of 150 milliseconds after each name is rendered so the names will apprear sequentially. A custom timing function will be used to acheive a "bouncy" effect.

Please refernce the wireframe from user story 5 for the main response page:

[JasonDuquain]

Technical tasks required:

Add Jasmine test case(s). DONE

Use CSS (and possibly javascript) to animate the baby name(s) as they appear from the reply. DONE

Confirm all jasmine test specs pass. DONE

Notes/Lessons Learned:

• As this was a results page make sure to add a 'DOMContentLoaded' event listener before attempting to animate any of the rendered list items.