CSS3 Animations

CSS Transitions and Transforms for Beginners This post will introduce you to CSS transitions and CSS transforms: the CSS power couple. When used together, these properties allow you to create simple animations and add valuable interaction and visual feedback for your users. Just remember when adding any kind of movement to your project to keep it simple, subtle, and consistent. The movement you create should convey meaning, always enhancing, not distracting from the interaction for your users. So what are transforms and transitions? CSS transitions: an introduction Let’s start with CSS transitions. Hover below: In this post I’ll be using transitions in conjunction with transforms. There are two properties that are required in order for the transition to take effect: 1. transition-property 2. transition-duration Note: Transition Shorthand Each transition property can be defined individually, but for cleaner and faster code, it’s recommended that you use the transition shorthand. Here’s the full shorthand sequence. CSS syntax examples: scale

jquery - How to slide a hidden div up/down on click of a button? Simple jQuery Accordion jQuery Make sure either to run on DOM ready or at the bottom of the page. (function($) { var allPanels = $('.accordion > dd').hide(); $('.accordion > dt > a').click(function() { allPanels.slideUp(); $(this).parent().next().slideDown(); return false; }); })(jQuery); <dl class="accordion"><dt><a href="">Panel 1</a></dt><dd>Pellentesque fermentum dolor. Sorry if you don't use SASS. View Demo Slightly more advanced, preventing closing of active panel: View Demo