I am trying to add a css3 animation to a button when it is clicked. (I want the button to zoom in, spin and then zoom out so that it looks like it is flying off the screen.) I can get the animation to work if I make reference to the class that calls it in the markup. However, if I try to attach the css3 class using jquery the animation does not run. I have verified that the class is being attached via Firebug, but I still am not getting any animation. This is on a .NET .aspx page using a C# code behind. The CSS and markup are below:\[code\] <%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"CodeBehind="Contact.aspx.cs" Inherits="MirandasWebsite.About" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %><asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"><title>Contact Miranda</title><script> $(document).ready(function() {$("#MainContent_imgbtnSendEmail").click(function() { // this is your event $("#MainContent_imgbtnSendEmail").addClass("rotate"); // here your adding the new class)}; )};</script></asp:Content><asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"><asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager><asp:UpdatePanel ID="upEmail" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div id="ContactPage"> <asp
anel ID="pnlFacebook" runat="server" Visible="true"> <div id="Facebook"> <div id="dFacebook" runat="server" class="zoom"> <asp:HyperLink ID="hlFacebook" runat="server" Text="My Facebook"> </asp:HyperLink> </div> </aspanel> <aspanel ID="pnlPhone" runat="server"> <br /> <div id="lblPhone"> <p>You may reach me at this number:</p> <span id="Phone" runat="server"> </span> </div> </aspanel> <aspanel ID="pnlSendEmail" runat="server" Visible="true"> <br /> <table id="ContactTable"> <tr> <td> <asp:Label ID="lblSubject" runat="server" Text="Message Subject"></asp:Label> </td> </tr> <tr> <td> <asp:TextBox ID="txtSubject" runat="server" Width="20%"></asp:TextBox> <asp:TextBoxWatermarkExtender ID="tbwSubject" runat="server" TargetControlID="txtSubject" WatermarkText="Enter Message Subject Here"> </asp:TextBoxWatermarkExtender> <asp:RequiredFieldValidator ID="reqSubject" runat="server" ControlToValidate="txtSubject" Text="**" ErrorMessage="A Message Subject is Required." Display="Static" CssClass="Validation"></asp:RequiredFieldValidator> </td> </tr> <tr> <td> <asp:Label ID="lblFrom" runat="server" Text="Your Email Address"></asp:Label> </td> </tr> <tr> <td> <asp:TextBox ID="txtFrom" runat="server" Width="20%"></asp:TextBox> <asp:TextBoxWatermarkExtender ID="tbwFrom" runat="server" TargetControlID="txtFrom" WatermarkText="Enter Your Email Address Here"> </asp:TextBoxWatermarkExtender> <asp:RequiredFieldValidator ID="reqFrom" runat="server" ControlToValidate="txtFrom" Text="*" ErrorMessage="A Valid Email Address is Required." Display="Static" CssClass="Validation"></asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="regexEmailAddress" runat="server" ControlToValidate="txtFrom" ErrorMessage="A Valid Email Address is Required" ValidationExpression="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" Display="Static" Text="*" CssClass="Validation"></asp:RegularExpressionValidator> </td> </tr> <tr> <td> <asp:Label ID="lblBody" runat="server" Text="Message Body"></asp:Label> </td> </tr> <tr> <td> <asp:TextBox ID="txtBody" runat="server" TextMode="MultiLine" Rows="25" Width="40%"></asp:TextBox> <asp:TextBoxWatermarkExtender ID="tbwBody" runat="server" TargetControlID="txtBody" WatermarkText="Message Body Goes Here"> </asp:TextBoxWatermarkExtender> <asp:RequiredFieldValidator ID="reqBody" runat="server" ControlToValidate="txtBody" ErrorMessage="A Message Body is Required." Display="Static" Text="**" CssClass="Validation"></asp:RequiredFieldValidator> </td> </tr> <tr> <td> <%--<div id="SendEmail" runat="server" class="zoom"><asp:Button ID="btnSendEmail" runat="server" Text="Send" OnClick="btnSendEmail_Click" /></div>--%> <div id="SendEmail" runat="server" class="zoom"> <asp:ImageButton ID="imgbtnSendEmail" runat="server" OnClick="btnSendEmail_Click" ImageUrl="SiteImages/Mail-icon.png" /></div> </td> </tr> <asp:ValidationSummary runat="server" ID="validationSummary" ShowMessageBox="true" ShowSummary="false" /> </table> </aspanel> <aspanel ID="pnlEmailSuccess" runat="server" Visible="false"> <div id="MessageSuccess"> <h2> The Email was Sent Successfully</h2> <p> Thank You for Your Interest</p> </div> </aspanel> </div> </ContentTemplate></asp:UpdatePanel><asp:UpdateProgress ID="upprogRegister" runat="server"> <ProgressTemplate> <div id="blurred"> <img src="http://stackoverflow.com/questions/13784629/SiteImages/ajax-loader.gif" id="blurredimage" runat="server" /> </div> </ProgressTemplate></asp:UpdateProgress><asp:AlwaysVisibleControlExtender ID="aveProgressRegister" runat="server" TargetControlID="upprogRegister" HorizontalSide="Center" VerticalSide="Middle" UseAnimation="true"></asp:AlwaysVisibleControlExtender></asp:Content>\[/code\]CSS:\[code\] @-webkit-keyframes rotater {0% { transform:rotate(0) scale(1) }10% { transform:rotate(90deg) scale(1.5) }20% { transform:rotate(180deg) scale(2) }30% { transform:rotate(270deg) scale(2.5) }40% { transform:rotate(360deg) scale(3) }50% { transform:rotate(450deg) scale(2.5) }60% { transform:rotate(540deg) scale(2) }70% { transform:rotate(630deg) scale(1.5) }80% { transform:rotate(720deg) scale(1) }90% { transform:rotate(810deg) scale(.5) }100% { transform:rotate(900deg) scale(0) }}@-moz-keyframes rotater {0% { transform:rotate(0) scale(1) }10% { transform:rotate(90deg) scale(1.5) }20% { transform:rotate(180deg) scale(2) }30% { transform:rotate(270deg) scale(2.5) }40% { transform:rotate(360deg) scale(3) }50% { transform:rotate(450deg) scale(2.5) }60% { transform:rotate(540deg) scale(2) }70% { transform:rotate(630deg) scale(1.5) }80% { transform:rotate(720deg) scale(1) }90% { transform:rotate(810deg) scale(.5) }100% { transform:rotate(900deg) scale(0) }}@-o-keyframes rotater {0% { transform:rotate(0) scale(1) }10% { transform:rotate(90deg) scale(1.5) }20% { transform:rotate(180deg) scale(2) }30% { transform:rotate(270deg) scale(2.5) }40% { transform:rotate(360deg) scale(3) }50% { transform:rotate(450deg) scale(2.5) }60% { transform:rotate(540deg) scale(2) }70% { transform:rotate(630deg) scale(1.5) }80% { transform:rotate(720deg) scale(1) }90% { transform:rotate(810deg) scale(.5) }100% { transform:rotate(900deg) scale(0) }}@-ms-keyframes rotater {0% { transform:rotate(0) scale(1) }10% { transform:rotate(90deg) scale(1.5) }20% { transform:rotate(180deg) scale(2) }30% { transform:rotate(270deg) scale(2.5) }40% { transform:rotate(360deg) scale(3) }50% { transform:rotate(450deg) scale(2.5) }60% { transform:rotate(540deg) scale(2) }70% { transform:rotate(630deg) scale(1.5) }80% { transform:rotate(720deg) scale(1) }90% { transform:rotate(810deg) scale(.5) }100% { transform:rotate(900deg) scale(0) }}@keyframes rotater {0% { transform:rotate(0) scale(1) }10% { transform:rotate(90deg) scale(1.5) }20% { transform:rotate(180deg) scale(2) }30% { transform:rotate(270deg) scale(2.5) }40% { transform:rotate(360deg) scale(3) }50% { transform:rotate(450deg) scale(2.5) }60% { transform:rotate(540deg) scale(2) }70% { transform:rotate(630deg) scale(1.5) }80% { transform:rotate(720deg) scale(1) }90% { transform:rotate(810deg) scale(.5) }100% { transform:rotate(900deg) scale(0) }}.rotate { -webkit-animation-name: rotater; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 1s; -moz-animation-name: rotater; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-duration: 1s; -o-animation-name: rotater; -o-animation-timing-function: ease-in-out; -o-animation-iteration-count: infinite; -o-animation-duration: 1s; animation-name: rotater; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 1s; } \[/code\]
anel ID="pnlFacebook" runat="server" Visible="true"> <div id="Facebook"> <div id="dFacebook" runat="server" class="zoom"> <asp:HyperLink ID="hlFacebook" runat="server" Text="My Facebook"> </asp:HyperLink> </div> </aspanel> <aspanel ID="pnlPhone" runat="server"> <br /> <div id="lblPhone"> <p>You may reach me at this number:</p> <span id="Phone" runat="server"> </span> </div> </aspanel> <aspanel ID="pnlSendEmail" runat="server" Visible="true"> <br /> <table id="ContactTable"> <tr> <td> <asp:Label ID="lblSubject" runat="server" Text="Message Subject"></asp:Label> </td> </tr> <tr> <td> <asp:TextBox ID="txtSubject" runat="server" Width="20%"></asp:TextBox> <asp:TextBoxWatermarkExtender ID="tbwSubject" runat="server" TargetControlID="txtSubject" WatermarkText="Enter Message Subject Here"> </asp:TextBoxWatermarkExtender> <asp:RequiredFieldValidator ID="reqSubject" runat="server" ControlToValidate="txtSubject" Text="**" ErrorMessage="A Message Subject is Required." Display="Static" CssClass="Validation"></asp:RequiredFieldValidator> </td> </tr> <tr> <td> <asp:Label ID="lblFrom" runat="server" Text="Your Email Address"></asp:Label> </td> </tr> <tr> <td> <asp:TextBox ID="txtFrom" runat="server" Width="20%"></asp:TextBox> <asp:TextBoxWatermarkExtender ID="tbwFrom" runat="server" TargetControlID="txtFrom" WatermarkText="Enter Your Email Address Here"> </asp:TextBoxWatermarkExtender> <asp:RequiredFieldValidator ID="reqFrom" runat="server" ControlToValidate="txtFrom" Text="*" ErrorMessage="A Valid Email Address is Required." Display="Static" CssClass="Validation"></asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="regexEmailAddress" runat="server" ControlToValidate="txtFrom" ErrorMessage="A Valid Email Address is Required" ValidationExpression="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" Display="Static" Text="*" CssClass="Validation"></asp:RegularExpressionValidator> </td> </tr> <tr> <td> <asp:Label ID="lblBody" runat="server" Text="Message Body"></asp:Label> </td> </tr> <tr> <td> <asp:TextBox ID="txtBody" runat="server" TextMode="MultiLine" Rows="25" Width="40%"></asp:TextBox> <asp:TextBoxWatermarkExtender ID="tbwBody" runat="server" TargetControlID="txtBody" WatermarkText="Message Body Goes Here"> </asp:TextBoxWatermarkExtender> <asp:RequiredFieldValidator ID="reqBody" runat="server" ControlToValidate="txtBody" ErrorMessage="A Message Body is Required." Display="Static" Text="**" CssClass="Validation"></asp:RequiredFieldValidator> </td> </tr> <tr> <td> <%--<div id="SendEmail" runat="server" class="zoom"><asp:Button ID="btnSendEmail" runat="server" Text="Send" OnClick="btnSendEmail_Click" /></div>--%> <div id="SendEmail" runat="server" class="zoom"> <asp:ImageButton ID="imgbtnSendEmail" runat="server" OnClick="btnSendEmail_Click" ImageUrl="SiteImages/Mail-icon.png" /></div> </td> </tr> <asp:ValidationSummary runat="server" ID="validationSummary" ShowMessageBox="true" ShowSummary="false" /> </table> </aspanel> <aspanel ID="pnlEmailSuccess" runat="server" Visible="false"> <div id="MessageSuccess"> <h2> The Email was Sent Successfully</h2> <p> Thank You for Your Interest</p> </div> </aspanel> </div> </ContentTemplate></asp:UpdatePanel><asp:UpdateProgress ID="upprogRegister" runat="server"> <ProgressTemplate> <div id="blurred"> <img src="http://stackoverflow.com/questions/13784629/SiteImages/ajax-loader.gif" id="blurredimage" runat="server" /> </div> </ProgressTemplate></asp:UpdateProgress><asp:AlwaysVisibleControlExtender ID="aveProgressRegister" runat="server" TargetControlID="upprogRegister" HorizontalSide="Center" VerticalSide="Middle" UseAnimation="true"></asp:AlwaysVisibleControlExtender></asp:Content>\[/code\]CSS:\[code\] @-webkit-keyframes rotater {0% { transform:rotate(0) scale(1) }10% { transform:rotate(90deg) scale(1.5) }20% { transform:rotate(180deg) scale(2) }30% { transform:rotate(270deg) scale(2.5) }40% { transform:rotate(360deg) scale(3) }50% { transform:rotate(450deg) scale(2.5) }60% { transform:rotate(540deg) scale(2) }70% { transform:rotate(630deg) scale(1.5) }80% { transform:rotate(720deg) scale(1) }90% { transform:rotate(810deg) scale(.5) }100% { transform:rotate(900deg) scale(0) }}@-moz-keyframes rotater {0% { transform:rotate(0) scale(1) }10% { transform:rotate(90deg) scale(1.5) }20% { transform:rotate(180deg) scale(2) }30% { transform:rotate(270deg) scale(2.5) }40% { transform:rotate(360deg) scale(3) }50% { transform:rotate(450deg) scale(2.5) }60% { transform:rotate(540deg) scale(2) }70% { transform:rotate(630deg) scale(1.5) }80% { transform:rotate(720deg) scale(1) }90% { transform:rotate(810deg) scale(.5) }100% { transform:rotate(900deg) scale(0) }}@-o-keyframes rotater {0% { transform:rotate(0) scale(1) }10% { transform:rotate(90deg) scale(1.5) }20% { transform:rotate(180deg) scale(2) }30% { transform:rotate(270deg) scale(2.5) }40% { transform:rotate(360deg) scale(3) }50% { transform:rotate(450deg) scale(2.5) }60% { transform:rotate(540deg) scale(2) }70% { transform:rotate(630deg) scale(1.5) }80% { transform:rotate(720deg) scale(1) }90% { transform:rotate(810deg) scale(.5) }100% { transform:rotate(900deg) scale(0) }}@-ms-keyframes rotater {0% { transform:rotate(0) scale(1) }10% { transform:rotate(90deg) scale(1.5) }20% { transform:rotate(180deg) scale(2) }30% { transform:rotate(270deg) scale(2.5) }40% { transform:rotate(360deg) scale(3) }50% { transform:rotate(450deg) scale(2.5) }60% { transform:rotate(540deg) scale(2) }70% { transform:rotate(630deg) scale(1.5) }80% { transform:rotate(720deg) scale(1) }90% { transform:rotate(810deg) scale(.5) }100% { transform:rotate(900deg) scale(0) }}@keyframes rotater {0% { transform:rotate(0) scale(1) }10% { transform:rotate(90deg) scale(1.5) }20% { transform:rotate(180deg) scale(2) }30% { transform:rotate(270deg) scale(2.5) }40% { transform:rotate(360deg) scale(3) }50% { transform:rotate(450deg) scale(2.5) }60% { transform:rotate(540deg) scale(2) }70% { transform:rotate(630deg) scale(1.5) }80% { transform:rotate(720deg) scale(1) }90% { transform:rotate(810deg) scale(.5) }100% { transform:rotate(900deg) scale(0) }}.rotate { -webkit-animation-name: rotater; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 1s; -moz-animation-name: rotater; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-duration: 1s; -o-animation-name: rotater; -o-animation-timing-function: ease-in-out; -o-animation-iteration-count: infinite; -o-animation-duration: 1s; animation-name: rotater; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 1s; } \[/code\]