How do you animate a UI element from top to bottom of the screen?

You'd use the animator component on the top-level of the panel hierarchy to animate the anchors, while keeping the UI panel stretched to fit.

The process (if I remember exactly) is as follows:

 1) Stretch panel to fit the canvas area before recording your animation.
 2) Move the playhead position to, say, 3 secs.
 3) Then make the window stretch horizontally only.
 4) Now move the panel upward offscreen and put the pivot on its bottom-center edge.

This should automatically make a keyframe on the start playhead position for you and auto-animate the pivot and anchors to where they'll be offscreen initially. You can swap the keyframe sequence around too if you want it to start offscreen (and/or just set the state speed to -1 to play it backwards).

Just recalling this from memory, but that's the gist of how to do it. Even if it's not 100% step by step, you'll figure it out if you play with those steps long enough.