HTML5 Animation using adobe edge

I have three diagrams that need to be animated using HTML 5 as they will appear on a website that is built to be responsive.(in wordpress, but we will include the code as HTML on the site). The diagrams each have 11 - 15 areas that would need simple animation on mouseover / touch and mouse out. (on mouse over a single pixel line animates out width ways, then animates up as a coloured block, text would then fade in. On mouse out the animation would reverse)