Is there a way to trigger an animation to play in reverse without using a selector and then have it play normally on the :active state?

Trying to achieve the same animation effect using different selectors has been a bit challenging for me. Specifically, when I attempt to utilize the animation without a selector and then with the selector :active, the browser only plays the animation once on page load. Subsequently, when I click, the animation does not re-trigger.

While one solution would be to create two sets of keyframes with the same content but different names, I prefer to avoid duplicating code. Therefore, I am currently exploring alternative methods to make this functionality work seamlessly. Does anyone have any suggestions or insights on how to accomplish this?

<style>
button.click {
  animation: click 0.5s 0s 1 reverse ease none;
}

button.click:active {
  animation: click 0.5s 0s 1 normal ease forwards;
}

@keyframes click {
0% {
  margin-left: 0px;
  margin-top: 0px;
  box-shadow: 5px 10px rgba(0,0,0,0.2);
}

100% {
  margin-left: 2.5px;
  margin-top: 5px;
  box-shadow: 2.5px 5px rgba(0,0,0,0.2);
}
}

</style>

<button class="click">test</button>

Answer №1

After the keyframe animation has been triggered during page load, it cannot be restarted. The only solution is to provide 2 keyframes, as previously mentioned.

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

Ensure that input field is validated only upon clicking the save button in Angular framework

Can anyone suggest the most efficient method to validate required fields in an input form using AngularJS? I want to display an error message only after the user clicks the save button (submit). Thank you in advance. ...

Is it possible to use a hyperlink in Node.js to transmit information to an API using an Express request?

I am working on an HTML page where I need to send data to an API when a specific link is clicked. To achieve this, I am using Express along with a form that has a POST method. Here is the link: <form action="/bx/processed-manually" method=&qu ...

Guide on excluding a specific element using an Xpath expression

I am seeking a solution to craft an XPath expression that can target all <p> elements except for p[6] and p[7]. Currently, I have formulated this expression: //div[@class="Job-Description app-responsive-jd"]/p[1], which is functioning corre ...

Using CSS to align and place elements

Currently facing a challenge with my HTML/CSS code regarding the horizontal centering of two divs (A, B) within one absolutely positioned div (C) that contains background images. Key aspects to consider: The bottom edge of the larger div (A) should alig ...

What causes the off-canvas menu to displace my fixed div when it is opened?

Using the Pushy off-canvas menu from GitHub for my website has been great, but it's causing some trouble with my fixed header. When I scroll down the page, the header sticks perfectly to the top, but once I open the off-canvas menu, the header disappe ...

Tips for positioning HTML elements at the exact mouse location as it moves, without any delay?

Currently, I am in the process of developing a web-based drawing application that does not rely on using a canvas. My decision to avoid using a canvas is because I plan to incorporate CSS Keyframes into the HTML elements upon placement. This approach allow ...

Basic HTML and JavaScript shell game concept

After spending several days working on this project, I am struggling to understand why the winning or losing message is not being displayed. The project involves a simple shell game created using HTML, JavaScript, and CSS. I have tried reworking the JavaSc ...

- bullet point: tabulated

I need to create an unordered list with URLs included and indented, while keeping all lines justified to the left. * line one text text ted more text text text * line two text ted more text text text * line three text ted more text text text ...

How can I vertically align a photo or image on Facebook?

Can anyone explain how Facebook manages to vertically align its photos without using padding or margins? I've looked into their img tag and its parent, but neither seem to have any spacing properties. Although there is a vertical-align attribute prese ...

Can the behavior of "flex-end" be emulated in :before and :after pseudo-elements?

I have come across a piece of code that creates a checkbox using the pseudo-elements :before and :after, along with a hidden input to handle the selection logic. The current setup works fine and behaves as expected. However, I am curious if it is possible ...

How to display an unordered list horizontally in HTML

I'm working on a screen that has filters displayed vertically, but I want to align them horizontally and have the filter options arranged in two columns. I've tried using CSS properties like spacing, clear, and display block, but the checkboxes/l ...

What is causing the unexpected expansion of the initial column in this table?

Can you figure out why the first column in this sample table is so much wider than the others? <html> <head> <style type="text/css"> table,th, td,{ width:100%; border: 4px solid; border-collapse:collapse; ...

Chrome miscalculates the dimensions of the screen

This is my first attempt at working with responsive design, and I seem to have encountered a bug. When I shift part of the browser off-screen and expand it to around 1345 pixels, it seems to trigger the CSS set for 1224 pixels. //Currently, only @media al ...

Guide on adding a parent class to style all generated CSS rules in styled-components 5.3.5

When my application loads into a parent div with a specific class (for example, .my-app), is there a way to add the prefix .my-app to all classes generated by styled-components? For instance, consider a component like this: import React from 'react& ...

How can I ensure my card div is responsive in Bootstrap?

My current section consists of only 6 cards, with 3 cards in a row of 2. When the screen size reduces (to mobile phone size), I want each card to be on its own row, displaying one by one as the user scrolls. Although it functions as desired when I resize ...

Tips for maximizing the efficiency of a callback when utilizing the filter function in Primefaces for 'myDataTable'

Currently using Primefaces 5.1, and I've encountered a situation where I want to hide a table until after the filter is applied in Javascript. My initial thought was to simply set the css of the table to visibility:hidden;, followed by running the fol ...

CSS - turn off inheritance for font styling

I am trying to figure out how to turn off the font:inherit property in Ionic's global CSS. This property is causing issues when I try to style text using ng-bind-html, as it adds unnecessary classes to elements like i and bold. I attempted to override ...

The full-width header is generating a horizontal scrollbar

Why am I seeing horizontal scroll bars on Safari and Chrome when the header width is set to 100%? Here is the code snippet: window.onscroll = function() { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 400 || doc ...

Ways to insert a divider into the menu items of a Kendo Toolbar split button

Kendo UI 2015.2.805 Is there a way to insert a separator line between menu items on a toolbar's split button dropdown? I am familiar with adding a separator line between toolbar buttons, but I am having trouble achieving the same effect for the menuB ...

In relation to the adaptability of websites to smaller screens

Welcome to my first website! You can check out my portfolio at . I decided to go for free hosting on Webhost, but I've encountered a problem - despite using Bootstrap classes in my code, my page is not fully responsive on small screens. Any suggestion ...