Apply a single CSS bounce animation to a specific div when clicked

I have implemented a CSS map pin with some CSS3 animations. You can check it out here:

https://jsfiddle.net/xg7xfzeq/

body {
  background: #e6e6e6;
}

.pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #00cae9;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.pin:after {
  content: "";
  width: 14px;
  height: 14px;
  margin: 8px 0 0 8px;
  background: #e6e6e6;
  position: absolute;
  border-radius: 50%;
}

.bounce {
  animation-name: bounce;
  animation-fill-mode: both;
  animation-duration: 1s;
}

.pulse {
  background: #d6d4d4;
...

<div class='myBounceDiv'>
<div class='pin bounce'></div>
<div class='pulse'></div>
</div>

I'm looking to add a bounce CSS3 animation on click, but I want it to animate only once. Changing the CSS class on click causes the animation to loop endlessly. One solution I considered was using a timer to revert the class after a set time, but this interfered with the initial appearance animation. Is there a way to achieve this using pure JavaScript and CSS, similar to the animation shown here: triggered on click?

javascriptcss

Answer №1

It appears that you are referring to the following:

  • The first version only triggers the pulse effect and bounce effect on a single click
  • In the second version, the pulse effect runs continuously while the bounce effect occurs only on a single click

First version:

Code snippet for the first version...
CSS code for the first version...
HTML code for the first version...

Second version:

Code snippet for the second version...
CSS code for the second version...
HTML code for the second version...

UPDATE:

Code snippet for the updated version...
CSS code for the updated version...
HTML code for the updated version...

Answer №2

Instead of toggling CSS classes for the bouncing animation, an alternative approach is to dynamically add and remove classes to elements such as pin or myBounceDiv upon click events. It's important to ensure that the bounce class is removed once the animation cycle is completed.

Take a look at this implementation:

const pinElement = document.querySelector('.pin');

setTimeout(() => pinElement.classList.remove('bounce'), 1000);

function removeMiniBounce() {
    pinElement.classList.remove("miniBounce");
}

pinElement.onclick = () => {
    pinElement.classList.add("miniBounce");
    setTimeout(removeMiniBounce, 1000);
}

Here's how you can style it with CSS:

@keyframes miniBounce {
    0%{ -webkit-transform:translateY(0px) rotate(-45deg);}
    30%{ -webkit-transform:translateY(-20px) rotate(-45deg);}
    60%{ -webkit-transform:translateY(0px) rotate(-45deg);}
    70%{ -webkit-transform:translateY(-5px) rotate(-45deg);}
    100%{ -webkit-transform:translateY(0) rotate(-45deg);}
}

.miniBounce {
    animation: miniBounce 0.4s ease-in-out; 
}

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

A guide on sending multiple input values using the same class name or id through ajax

My goal is to send multiple input values through AJAX to my PHP script. Everything works smoothly when I use getElementById. However, I have the functionality to add a child. The issue arises when it only retrieves values from the first child while iterati ...

javascriptphpjqueryajaxhtml

Storing data in MongoDB upon the emission of a Socket.io event

In my project, I am using a MEAN stack and Socket.io to retrieve images from the real-time Instagram API. The current setup is functioning well, but now I want to store image data in a MongoDB database to maintain a record of images based on locations, rat ...

javascriptajaxangularjsmongodbsocket.io

What is the best way to extract multiple variables from a function in JavaScript?

After creating the function buttonEffects() with four different button effects, I am now facing the challenge of bringing these variables outside of the function and using them in another function. Is it possible to achieve this without recoding everything ...

javascriptjquery

Utilizing the multer Express middleware in a standalone file

I successfully moved a basic middleware (isAuthenticated) to an external file, but I'm facing challenges transferring my multer upload. Although I recently learned how to separate them into different files, this task seems more complex. routes/index. ...

javascriptnode.jsexpress

In Vue.js, leverage the power of slots to access content from deeply nested child components

Recently, I came across this example: This child component serves as the foundation for all the components that follow. <template> <div class="content-box"> <div class="boxtitlecontainer titleColor"> <slot name="title"> ...

javascripthtmldomvue.jsslot

What is the best way to iterate through array elements with AngularJS?

I am looking to showcase array values using the ng-repeat directive, and then call the getimage function with itemid and photoidlist in order to retrieve the image URL. The JSON data that I have is as follows: $scope.productslist = { "json": { "re ...

javascriptangularjsarraysjsonangularjs-ng-repeat

Retrieve a markdown file from the system and render it as a string using React.js

Is there a way to load a markdown file from the current directory as a string in my code? This is the scenario: import { State } from "markup-it" ; import markdown from "markup-it/lib/markdown"; import bio from './Bio.md' const m ...

javascriptnode.jsreactjsnpm

What issues are hindering the successful export of my Vue component packaged with npm?

I created a small local npm package called fomantic-ui-vue with the following main js file: import Vue from 'vue' // Import vue component import button from './elements/button/button.vue' import buttonGroup from './elements/butt ...

javascriptvue.jsnpm

Is anyone else experiencing differences in the appearance of my mega menu between Safari, Firefox, and Chrome? It seems like

When viewing in Safari, the text overlaps for some reason. It works fine on Firefox and Chrome. Here's a screenshot of the issue: Safari: https://i.stack.imgur.com/hf7v2.png Firefox: https://i.stack.imgur.com/NrOOe.png Please use Safari to test th ...

javascriptjqueryhtmlcsssafari

Using React with Typescript: What is the best way to implement useMemo for managing a checkbox value?

I am currently developing a to-do list project using React and Typescript. At the moment, I have successfully implemented the functionality to add new to-do items via a form and delete them individually. Each item includes a checkbox with a boolean value. ...

javascriptreactjstypescriptreact-hooksreact-usememo

PHP: Establishing SESSION Variables

On Page1.php, there is a variable called "flag" with the value of 1. When clicked, it triggers the JavaScript function named "ajaxreq()" which will display the text "Click me" from an AJAX request originating from page2.php. If you click on the "Click me" ...

phpjavascriptjqueryhtmlajax

Strategies for avoiding text wrapping in Bootstrap labels on Firefox

Within my panel and panel-body, there are multiple span elements that display dynamically. These spans behave perfectly in Safari and Chrome, wrapping to the next line when needed. However, in Firefox, they overflow strangely. Here are the comparisons: Ch ...

htmlcsstwitter-bootstrap

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicked on?

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicking anywhere on the page? <table id="view_table" data-toggle="table" data-search="true" data-page-list="[5, 10, 20]" data- ...

javascriptjquerycssbootstrap-table

What is the best way to deal with a "Access to restricted URI denied" error in JavaScript while utilizing XMLHttpRequest?

Here is some code I am working with: var req = new XMLHttpRequest(); req.onload = function(){ if (req.status === "200"){ doSomethingWithTheReceivedData(); } else { alert("Error msg"); } }; When running index.html directly ...

javascripterror-handlingxmlhttprequestxmlhttprequest-level2

I encountered an SyntaxError while working with Ionic. The error message reads: "Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>)."

Here's the code that is causing me trouble: this.http.get('http://localhost/....) .map((res) => res.json()) .subscribe(( this.navCtrl.push(OtpPage,{mobileno:this.mobile}); }, (err) => { console.log(err ...

javascriptphpangularjsionic-framework

Creating a CSS section that expands with a minimum height of 100% and perfectly centers its content vertically

Seeking an elegant solution for having sections with a minimum height of 100% (window height). The div should expand to fit the content if it exceeds 100%, and vertically center the content within the div if it is smaller. I have managed to find a simple ...

htmlcssvertical-alignmentexpandable

Tips for successfully passing import as props arguments in React JS

I am using react-lotties and would like to add different animations to multiple divs by just changing the URL of the lotties As a beginner in React, please be kind :) This is my code snippet : My Lotties Component : import React, { Component } f ...

javascriptreactjslottie

I'm wondering if you have any insights on how to retrieve objects using Mono WebAssembly

I am looking to send a c# object back via mono-wasm, but when I attempt to do so, the returned object appears in my JavaScript file here. The C# code can be found in [image2]: C# code My JavaScript code can be found here: JS code Everything seems to wor ...

javascriptc#monowebassembly

JavaScript Auto-Closing Modal Pop-Up in HTML

I am looking to implement a feature similar to what is seen on Banks or American Express websites, where a MODAL Popup notifies users that their session is about to expire. In addition to this, I would like to include an "Auto-Close" Popup event that will ...

c#javascriptjqueryasp.nethtml

Prepare fixtures for commands in Cypress before executing the hook

One of my main tasks is to load the fixtures file only once and ensure it is accessible across all project files. To achieve this, I created a fixtures.js file with the following content: let fixturesData; export const loadFixturesData = () => { cy ...

javascripttypescriptcypress