All geek questions in one place

Pure CSS click-through animation method

I am trying to recreate the effect of a rowan of material in pure CSS, and I have a prepared animation. The problem is that I cannot get the animation to work fully when the element is clicked. I tried with transitions ( try 1 demo , try 2 demos ), but not one of them will run all the way.

Another more likely method is with CSS3 animations (I'm not worried about browser support right now). I have animation keyframes, but I’ve never worked with animation before, and I don’t see a way to start the animation when clicked.

@-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>

Doubts that I was thinking about but could not do the job include changing the animation delay, transparency ::after using opacity and using the animation synchronization function.

+6
source share
2 answers

Try this, but you need to use jquery to keep the button active, I did not use jquery, so keep the button pressed

 @-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>
0
source

I did it differently: C :focus styles remain active. You can watch it here: http://codepen.io/jonnitto/pen/OVmvPB?editors=110

+1
source

Source: https://habr.com/ru/post/986372/

More articles:


All Articles