title: CSS3 Animation on Button Click
body: <p>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:</p>
  
  <pre><code> &lt;%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
  CodeBehind="Contact.aspx.cs" Inherits="MirandasWebsite.About" %&gt;
  
  &lt;%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %&gt;
  &lt;asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"&gt;
  &lt;title&gt;Contact Miranda&lt;/title&gt;
  &lt;script&gt;
      $(document).ready(function() {
  $("#MainContent_imgbtnSendEmail").click(function() {  // this is your event
      $("#MainContent_imgbtnSendEmail").addClass("rotate");     // here your adding the new class
  )}; 
  )};
  &lt;/script&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"&gt;
  &lt;asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"&gt;
  &lt;/asp:ToolkitScriptManager&gt;
  &lt;asp:UpdatePanel ID="upEmail" runat="server" UpdateMode="Conditional"&gt;
      &lt;ContentTemplate&gt;
          &lt;div id="ContactPage"&gt;
              &lt;asp:Panel ID="pnlFacebook" runat="server" Visible="true"&gt;
                  &lt;div id="Facebook"&gt;
                      &lt;div id="dFacebook" runat="server" class="zoom"&gt;
                          &lt;asp:HyperLink ID="hlFacebook" runat="server" Text="My Facebook"&gt;   &lt;/asp:HyperLink&gt;
                      &lt;/div&gt;
              &lt;/asp:Panel&gt;
              &lt;asp:Panel ID="pnlPhone" runat="server"&gt;
                  &lt;br /&gt;
                  &lt;div id="lblPhone"&gt;
                  &lt;p&gt;You may reach me at this number:&lt;/p&gt;
                  &lt;span id="Phone" runat="server"&gt;
                  &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/asp:Panel&gt;
              &lt;asp:Panel ID="pnlSendEmail" runat="server" Visible="true"&gt;
                  &lt;br /&gt;
                  &lt;table id="ContactTable"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;asp:Label ID="lblSubject" runat="server" Text="Message Subject"&gt;&lt;/asp:Label&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;asp:TextBox ID="txtSubject" runat="server" Width="20%"&gt;&lt;/asp:TextBox&gt;
                              &lt;asp:TextBoxWatermarkExtender ID="tbwSubject" runat="server" TargetControlID="txtSubject"
                                  WatermarkText="Enter Message Subject Here"&gt;
                              &lt;/asp:TextBoxWatermarkExtender&gt;
                              &lt;asp:RequiredFieldValidator ID="reqSubject" runat="server" ControlToValidate="txtSubject"
                                  Text="**" ErrorMessage="A Message Subject is Required." Display="Static" CssClass="Validation"&gt;&lt;/asp:RequiredFieldValidator&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;asp:Label ID="lblFrom" runat="server" Text="Your Email Address"&gt;&lt;/asp:Label&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;asp:TextBox ID="txtFrom" runat="server" Width="20%"&gt;&lt;/asp:TextBox&gt;
                              &lt;asp:TextBoxWatermarkExtender ID="tbwFrom" runat="server" TargetControlID="txtFrom"
                                  WatermarkText="Enter Your Email Address Here"&gt;
                              &lt;/asp:TextBoxWatermarkExtender&gt;
                              &lt;asp:RequiredFieldValidator ID="reqFrom" runat="server" ControlToValidate="txtFrom"
                                  Text="*" ErrorMessage="A Valid Email Address is Required." Display="Static" CssClass="Validation"&gt;&lt;/asp:RequiredFieldValidator&gt;
                              &lt;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"&gt;&lt;/asp:RegularExpressionValidator&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;asp:Label ID="lblBody" runat="server" Text="Message Body"&gt;&lt;/asp:Label&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;asp:TextBox ID="txtBody" runat="server" TextMode="MultiLine" Rows="25" Width="40%"&gt;&lt;/asp:TextBox&gt;
                              &lt;asp:TextBoxWatermarkExtender ID="tbwBody" runat="server" TargetControlID="txtBody"
                                  WatermarkText="Message Body Goes Here"&gt;
                              &lt;/asp:TextBoxWatermarkExtender&gt;
                              &lt;asp:RequiredFieldValidator ID="reqBody" runat="server" ControlToValidate="txtBody"
                                  ErrorMessage="A Message Body is Required." Display="Static" Text="**" CssClass="Validation"&gt;&lt;/asp:RequiredFieldValidator&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;%--&lt;div id="SendEmail" runat="server" class="zoom"&gt;&lt;asp:Button ID="btnSendEmail" runat="server" Text="Send" OnClick="btnSendEmail_Click" /&gt;&lt;/div&gt;--%&gt;
                              &lt;div id="SendEmail" runat="server" class="zoom"&gt;
                                  &lt;asp:ImageButton ID="imgbtnSendEmail" runat="server" OnClick="btnSendEmail_Click"
                                       ImageUrl="SiteImages/Mail-icon.png" /&gt;&lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;asp:ValidationSummary runat="server" ID="validationSummary" ShowMessageBox="true"
                          ShowSummary="false" /&gt;
                  &lt;/table&gt;
              &lt;/asp:Panel&gt;
              &lt;asp:Panel ID="pnlEmailSuccess" runat="server" Visible="false"&gt;
                  &lt;div id="MessageSuccess"&gt;
                      &lt;h2&gt;
                          The Email was Sent Successfully&lt;/h2&gt;
                      &lt;p&gt;
                          Thank You for Your Interest&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/asp:Panel&gt;
          &lt;/div&gt;
      &lt;/ContentTemplate&gt;
  &lt;/asp:UpdatePanel&gt;
  &lt;asp:UpdateProgress ID="upprogRegister" runat="server"&gt;
      &lt;ProgressTemplate&gt;
          &lt;div id="blurred"&gt;
              &lt;img src="SiteImages/ajax-loader.gif" id="blurredimage" runat="server" /&gt;
          &lt;/div&gt;
      &lt;/ProgressTemplate&gt;
  &lt;/asp:UpdateProgress&gt;
  &lt;asp:AlwaysVisibleControlExtender ID="aveProgressRegister" runat="server" TargetControlID="upprogRegister"
      HorizontalSide="Center" VerticalSide="Middle" UseAnimation="true"&gt;
  &lt;/asp:AlwaysVisibleControlExtender&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><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></pre>