Enhance Your Button with CSS3 Animation

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 */
 
}  
 

Answer №1

Although it wasn't my initial approach, I managed to make it work by implementing an OnClientClick event for the image button:

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

I then proceeded to create two JavaScript functions as follows:

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
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The process of enriching an ASP.NET hyperlink by making it both bold and under

I'm currently working on a webpage in asp.net. I have two hyperlinks and I want to make them active by applying a style sheet that makes them bolder and underlined, but for some reason it's not working. Here is the HTML: <li style="margin-le ...

Bring the URL back to its original state upon refreshing the page

A form was created using a combination of HTML and PHP on my website. This specific form takes a number as input, adds 2 to that number, and then displays the result. For instance, if the user enters the number 5 and clicks the submit button, the page wil ...

Is it possible to execute a case-insensitive taffydb query without using the like operator?

When using TAFFYDB, I need to perform a case insensitive query (ignoring upper/lower case). The method "likenocase" seems to combine the functions of "like" and "no case". In essence, if I search for "bm", I want to retrieve BM, bm, Bm, bM. Instead, what I ...

What is the process for transferring selections between two select elements in aurelia?

I am attempting to transfer certain choices from select1 to select2 when a button is clicked. Below is my HTML code: <p> <select id="select1" size="10" style="width: 25%" multiple> <option value="purple">Purple</option> &l ...

Styling buttons with different colors using React onClick event.getSelectedItem() method

I am having an issue with adding a border when the class is set to "transportation active" in my React code. When I click on one of the icons, all of them become active instead of just the clicked one. This behavior is not what I want, as I only want the ...

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

Input form sending information to an incorrect destination URL

I'm struggling to get my form to pass a parameter to a link in the desired format: index.php?action=2&parameter=value Currently, it is only passing the parameter like this: index.php?parameter=value Here's the code I have been using : &l ...

The stacking order of a child element within a parent element, which has a transform

Hey there, I've encountered a problem and was wondering if you could assist me with it. In the code snippet provided below, you'll see that there are elements with: transform: translate(0,0); Within these elements, there is a "dropdown" elemen ...

Exploring the ins and outs of HTML event handlers with JavaScript

When using events in your HTML and including a small amount of JavaScript, what is this called? Is it referred to as a "JavaScript attribute function," simply a "JavaScript attribute," or something else entirely? For example: <button onClick="locat ...

Flexbox layout to achieve equal height columns with content centered

In search of a solution to create two columns with equal height and center-aligned content within each column, while also maintaining different widths. Issue: The challenge lies in achieving both 'equal height' and 'middle aligned' at ...

Event dedicated to the selection of mobile options

I am facing an issue with binding an event to the options of a select tag on mobile devices. The code inside the click event handler doesn't seem to be working and I'm unsure of the reason behind it. My assumption is that perhaps the click event ...

Asynchronously load an AngularJS controller from AJAX without altering the route

I am looking to dynamically load an Angular controller after making an AJAX call that generates a new view in HTML. Here is the setup I currently have: Example of a View: HTML Snippet From AJAX <!-- CVS Pharmacy Extracare - Add View --> <d ...

Performing AJAX requests to dynamically update multiple DIVs

Encountering difficulties with adding additional input fields to a page, each of which contains jquery code for appending more select boxes related to them. The base html setup is as follows: <p id="add_field"> … </p> <div class="show_sub ...

Angular Update Component on Input ChangeEnsuring that the component is automatically

<div class=" card-body"> <div class="row"> <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6" routerLinkActive="active" *ngFor="let subject of subjects"> <div class=" fon ...

Trigger an AJAX request in jQuery to display an error message upon encountering a PHP error during form validation

There have been instances where I utilized PHP validation to display an error message if a certain field was left empty, as shown below: if(empty($_POST['formfield'])) { echo "Error"; die(); } else { ... } Additionally, I used jQuery valida ...

Exporting a web page as a Microsoft Word document is not working properly because

Need assistance with exporting a webpage to Microsoft Word in table format, as the table layout is not displaying correctly and is missing CSS styling. Can someone please help me resolve this issue? ...

Utilize jQuery to substitute numbers with strings through replacement

My question pertains to the topic discussed here. I am looking for a more refined jQuery replacement function that can substitute a number with a string. My PHP script returns numbers in the format of 1.27 Based on a specified range, these numbers need ...

How can you locate the position of identified text on a webpage to accurately place the mouse cursor there?

When browsing a webpage in my web browser (preferably Firefox), I have the ability to search for a specific text "abc" using ctrl+f. Once found, I need to move my mouse cursor to another relative position on the page and click. Unfortunately, the necessar ...

Using HapiJs in Node.js to communicate data back and forth with the client

I have client.js and server.js files that are used to send data to my server using ajax. I am able to successfully send the searched username, but on the server side, the domain is being received as undefined. I'm unsure if the issue lies on the clien ...

unable to establish a connection to SQL in [PHP]

I'm having an issue with my code and need some help fixing it. The website is supposed to allow users to add, edit, and delete data. However, when I fill out the fields and click "add", it redirects me to a blank page. Here's the code that I have ...