<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Logo Animation</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body { color: white; background-color: black; } #logospace { width: 600px; height: 400px; border: 2px solid white; margin: 10px } #logo { position: reletive: border: 4px solid red; } #ltear, #rtear { position: absolute; /* halves must overlap */ border: 2px solid white; } #logo img { height: 30%; width: 30%; } #rtear { margin-top: 25px; margin-left: 200px; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript"> <![CDATA[ $(function() { $("#rtear").animate({'margin-left': 100}, 1000); $("#ltear").animate({'margin-left': 100}, 1000, function() { $("#logo .logoimg").each(function() { $(this).css({width: "auto"}); // does nothing }); $("#logo").css({ '-webkit-transform': 'rotate(90deg)', '-moz-transform': 'rotate(90deg)', '-ms-transform': 'rotate(90deg)', '-o-transform': 'rotate(90deg)', 'transform': 'rotate(90deg)', 'zoom': 1 }); }); }); ]]> </script> </head> <body> <br /> <br /> <br /> <br /><br /> <br /> <br /> <br /> <p>Sample text above the animated logo.</p> <div id="logospace"> <div id="logo"> <div id="ltear" class="logoimg"><img src="kane-logo/ltear.png" alt="" /></div> <div id="rtear" class="logoimg"><img src="kane-logo/rtear.png" alt="" /></div> </div> </div> <p>Sample text below the animated logo.</p> </body> </html>