Like what you see in the stream?
Hit that follow button below! The above is the bare bones of our panel. You can save the file and open it in a browser, but it won’t look like much of anything nice. That’s because we need to add the CSS styling to it. So to do that, we’ll place the following inbetween tags in the section. (I’m going to be placing the CSS code within the HTML document, but feel free to set it up as an external style sheet if you prefer.) *Note: I’m using a custom font that is stored locally. If you don’t want to do this, remove the @font style block, and adjust the font-family values to what you need. So to begin, let’s adjust our code to the following: My Stream Animated Panels

Reminder:

Like what you see in the stream?
Hit that follow button below!

If you save your file now and open it in a browser, you should see the panel we want, looking how we want when it’s fully expanded. * Now that we have the panel looking the way we want, lets animate it Animating The Panel To animate the panel, we’ll use the keyframe functions in CSS. It’s pretty straightforward and simple, but I’ll try to explain the logic behind it. First, we need to define some properties of our animation. The total animation will last 10 seconds. One reason i choose 10 seconds is because i’ll define the keyframes in percentages, so that each 10% = 1 second of animation. We want the header to appear first. We’ll do this by slide revealing it starting with it’s width at 0 and expanding it to it’s full 400px width. Once the header is expanded, we’ll then adjust the height of the container to reveal the content section fully. So to begin, lets define the keyframes. In the style section, find the last } at the end of the #twichLogo style, press enter, and insert the following: @-webkit-keyframes animateReminder { } Once this is put in, find the style section for #reminderContainer, and add -webkit-animation: animateReminder 10s 0s 1; to that style block so that it looks like the following: #reminderContainer { width: 400px; height: 120px; background: #2e5794; position: absolute; top: 0px; left: 0px; overflow: hidden; color: white; font-family: 'Dolce Vita'; -webkit-box-shadow: 0px 0px 20px #0f3369; -webkit-animation: animateReminder 10s 0s 1; } So at 0% into the animation (0 seconds) the width of the container should be 0px and the height should be 25px (the height of the header section). Then 2 seconds later (20% into the animation) we want the header to be revealed, but the header only. This is done by expanding the width out, but not the height. To do this, adjust the keyframe section to match the following