While experimenting with CSS3 animations, I encountered a challenge when trying to apply an animation to a button upon clicking. The desired effect was for the button to zoom in, spin, and then zoom out, giving the appearance of flying off the screen. Surprisingly, I could successfully trigger the animation using a class reference within the markup itself. However, when attempting to attach the CSS3 class through jQuery, the animation refused to play. Despite confirming that the class was properly attached using Firebug, the animation remained elusive. Noteworthy is that this occurred on a .NET .aspx page with C# code behind. Below are snippets of the CSS and markup:
<%@ 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() {
$("#MainContent_imgbtnSendEmail").addClass("rotate");
)};
)};
</script>
</asp:Content> <!-- Some content here -->
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) }}
/* More keyframes here */
...and more
.rotate /* Specify the rotate animation here */
{
-webkit-animation-name: rotater;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1s;
/* Define similar properties for other browser prefixes */
}