Small animation around on click area using React (ideally with CSS only) - css

Question

I'm looking for a way to show a small animation around the area where I clicked, for instance, a circle that expands and then diminishes until disappearing. The part which looks easy is creating the animation, which would be a CSS transition, what's hard for me is making something appear right where I clicked (with CSS).
If there's no CSS-based solution I'd like to know how to do it with React, please.
Thanks

Answer 1

You can use CSSTransition from react-transition-group.
A little example for what you're looking for could look like this.
import React from "react";
import "./Style.css";
import { CSSTransition } from "react-transition-group";
export default class Modal extends React.Component {
state = {
animate: false
}
render() {
return (
<React.Fragment>
<CSSTransition
in={this.state.animate}
classNames="animate-circle"
timeout={500}
>
<div
className="circle"
onClick={()=>this.setState({animate: animate ? false : true})}
>
Click to expand and click again to diminish
</div>
</CSSTransition>
</React.Fragment>
)
}
}
And Style.css should've code something like this
.circle {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: red;
}
.animate-circle-enter-active {
width: 500px;
height: 500px;
transition: all 500ms infinite;
}
.animate-circle-enter-done {
width: 500px;
height: 500px;
}
.animate-circle-exit {
width: 500px;
height: 500px;
}
.animate-circle-exit-active {
width: 0px;
height: 0px;
transition: all 500ms infinite;
}
.animate-circle-exit-done {
width: 0px;
height: 0px;
}

Answer 2

CSS button click animations use the :active pseudo class. The button itself should have a transition, and the static design. The button:active should have the active design (the moment before the animation starts) with transition: 0s;. The transition: 0s; rule is important because it makes the button move to the active design immediately (without animation).
Whenever the button is clicked, it becomes active, and moves straight to the active design state. When the button is released, the transition between the active and the static states creates the effect.
body {
padding: 5em;
}
button {
position: relative;
font-size: 1.5em;
padding: 0.5em 1em;
border: none;
outline: none;
}
button::before {
position: absolute;
z-index: -1;
top: -1em;
right: -1em;
left: -1em;
bottom: -1em;
background: radial-gradient(transparent 0, gold 100%);
opacity: 0;
content: '';
transition: all 0.3s;
}
button:active::before {
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 1;
transition: 0s;
}
<button>Click</button>