ArticleZip > Css Animation Onclick

Css Animation Onclick

Are you looking to add some interactive flair to your website? Well, you're in luck because in this article, we're going to dive into the world of CSS animation triggered by the click of a button, also known as 'CSS Animation OnClick.'

Adding animations to your website can help engage your visitors, make your site more interactive, and bring your content to life. By using CSS animations triggered by a click event, you can create dynamic and visually appealing effects that will captivate your audience.

To get started, you'll need a basic understanding of HTML and CSS. If you're new to coding, don't worry! This tutorial will guide you through the process step by step.

First, let's create a simple HTML file and include a button that we will animate when clicked:

Html

<title>CSS Animation OnClick</title>



<button id="animateButton">Click Me!</button>

Next, let's style our button using CSS. Create a new file named `styles.css` and add the following code:

Css

#animateButton {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#animateButton:hover {
  background-color: #2980b9;
}

In this CSS code snippet, we've defined the style of the button and added a hover effect to change its background color when the mouse hovers over it.

Now let's move on to the JavaScript part. Create a new file named `script.js` and add the following code:

Javascript

document.getElementById('animateButton').addEventListener('click', function() {
  this.classList.add('animate');
  setTimeout(() =&gt; {
    this.classList.remove('animate');
  }, 1000);
});

In this JavaScript code snippet, we've added an event listener to the button that triggers a CSS class `animate` when the button is clicked. This class will apply the animation to the button element. We also remove the class after 1 second using `setTimeout` to allow the animation to replay on subsequent clicks.

Lastly, let's define the CSS animation itself in our `styles.css` file:

Css

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.animate {
  animation: bounce 1s ease;
}

In the above CSS code snippet, we've defined a keyframe animation named `bounce` that moves the button up and down when triggered. The `animate` class applies this animation to the button element.

And there you have it! By following these steps, you've successfully created a CSS animation triggered by a button click. Experiment with different animations and styles to customize the effect to suit your website's design. Happy coding!

Related posts:

×