CSS3 Animation on Button Click

Question

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:

 <%@ 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:Panel 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>
            </asp:Panel>
            <asp:Panel ID="pnlPhone" runat="server">
                <br />
                <div id="lblPhone">
                <p>You may reach me at this number:</p>
                <span id="Phone" runat="server">
                </span>
                </div>
            </asp:Panel>
            <asp:Panel 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>
            </asp:Panel>
            <asp:Panel ID="pnlEmailSuccess" runat="server" Visible="false">
                <div id="MessageSuccess">
                    <h2>
                        The Email was Sent Successfully</h2>
                    <p>
                        Thank You for Your Interest</p>
                </div>
            </asp:Panel>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="upprogRegister" runat="server">
    <ProgressTemplate>
        <div id="blurred">
            <img src="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>

CSS:

 @-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;
   }

you probably get redirected if it's submitting a form...before the animation can even happen. Also, please just show rendered code. There's no point in asking a front-end question, and showing back-end code. and as one last point, you don't need to include all the vendor prefixes in your question — ahren
– ahren, Commented Dec 9, 2012 at 4:29
It's not redirecting, I have not added the redirect logic to the button click yet. I am waiting until the animation is executing in a manner that I like then I will create a timer function to allow the animation to play then submit the form. Also, what do you mean by rendered code vs back-end code? — tuckerjt07
– tuckerjt07, Commented Dec 9, 2012 at 4:35
because this question is not related to asp.net templating whatsoever. if you want people to answer dont give them something not related to the question. the asp code doesnt make sense in a html/js context. — mpm
– mpm, Commented Dec 9, 2012 at 5:02
here is a jsFiddle so we can talk about this more specifically. jsfiddle.net/Q3rZ4 — Arash Milani
– Arash Milani, Commented Dec 9, 2012 at 14:40
@ArashMilani Thank you for setting that jsFiddle up! I played around with it a little bit and found that it worked in FF but not Chrome, I was missing some vendor tags, but when I put the code exactly as it appeared in the jsFiddle back into my project I am still getting no changes from the Css class. — tuckerjt07
– tuckerjt07, Commented Dec 9, 2012 at 15:51

tuckerjt07 · Accepted Answer · 2012-12-09 17:47:18Z

1

So it was not exactly how I wanted to handle it, but I got it working. I added an OnClientClick event to the image button, like so:

<asp:ImageButton ID="imgbtnSendEmail" runat="server" OnClientClick="javascript:addSendAnimation()"  OnClick="btnSendEmail_Click"
                                     ImageUrl="SiteImages/Mail-icon.png" /></div>

and then create two JS functions like this:

function addClassName(inElement, inClassName) {
if (!hasClassName(inElement, inClassName))
    inElement.className = [inElement.className, inClassName].join(' ');
}

function addSendAnimation() {
var button = document.getElementById('MainContent_imgbtnSendEmail');
addClassName(button, 'rotate');
alert(button + " was clicked"); //This is used for debugging and should be removed before the site goes live
}

answered Dec 9, 2012 at 17:47

tuckerjt07

9221 gold badge13 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS3 Animation on Button Click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related