Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pure CSS method of running an animation through on click

I'm trying to recreate the material design ripple effect in pure CSS, and I have the animation prepared. The problem is, I can't make the animation run all the way through when the element is clicked. I've tried with transitions (attempt 1 demo, attempt 2 demo), but neither of these will run all of the way through.

The other more likely method is with CSS3 animations (I'm not worried about browser support right now). I have the animation keyframes ready, but I've never worked with animations very much before and I don't see a way to run the animation upon clicking.

@-webkit-keyframes ripple {
  0% {
    background-size: 1% 1%;
    opacity: 0.5;
  }
  70% {
    background-size: 1000% 1000%;
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    background-size: 1000% 1000%;
  }
}

@keyframes ripple {
  0% {
    background-size: 1% 1%;
    opacity: 0.5;
  }
  70% {
    background-size: 1000% 1000%;
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    background-size: 1000% 1000%;
  }
}

.button {
  background-color: blue;
  padding: 12px;
  display: inline-block;
  border-radius: 5px;
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.button::after {
  position: absolute;
  content: " ";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, #FFF 0%, #FFF 10%, transparent 10.1%, transparent 100%);
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  -webkit-animation: ripple 0.6s 0s normal forwards infinite running ease-in;
  animation: ripple 0.6s 0s normal forwards infinite running ease-in;
}

.button:active::after {
  /*Somehow the animation needs to run on click only, and then run all the way through*/
}
<div class="ripple button"><a>Click this</a></div>

Somethings I've thought about but have been unable to make work include changing the animation delay, making the ::after transparent using opacity, and using the animation timing function.

like image 662
Ian Avatar asked May 01 '15 15:05

Ian


People also ask

How do I make a click animation?

Go to Animations > Advanced Animation > Add Animation and select the animation you want to add. Next, go to Animations > Advanced Animation > Animation Pane. In the Animation Pane, select the animated shape or other object that you want to trigger to play when you click it.

How do you trigger a click in CSS?

You can use CSS3 animations and trigger with the :focus & :active ... Now, you can activate the effect with just pressing the TAB key... If you can use another object, let say an input type="text" then the focus it's automaticly set when you do the click , but in this case the focus action it's given by the browser.

Can we do animation using only CSS?

CSS allows animation of HTML elements without using JavaScript or Flash! In this chapter you will learn about the following properties: @keyframes. animation-name.


1 Answers

Try this out but you need to use jquery to keep the button active , i didn't used jquery therefore hold the click;

@-webkit-keyframes ripple {
  0% {
    background-size: 1% 1%;
    opacity: 0.5;
  }
  70% {
    background-size: 1000% 1000%;
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    background-size: 1000% 1000%;
  }
}

@keyframes ripple {
  0% {
    background-size: 1% 1%;
    opacity: 0.5;
  }
  70% {
    background-size: 1000% 1000%;
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    background-size: 1000% 1000%;
  }
}

.button {
  background-color: blue;
  padding: 12px;
  display: inline-block;
  border-radius: 5px;
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}



.button:active:after{
  position: absolute;
  content: " ";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, #FFF 0%, #FFF 10%, transparent 10.1%, transparent 100%);
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  -webkit-animation: ripple 0.6s 0s normal forwards infinite running ease-in;
  animation: ripple 0.6s 0s normal forwards infinite running ease-in;}
<div class='ripple button'><a href=''>hell</a></div>
like image 68
Wasim Ahmad Avatar answered Oct 19 '22 01:10

Wasim Ahmad