css animations to be applied on click

Question

I am trying to apply CSS animations to my HTML. I have the below code:

HTML:

<button>Save</button>

CSS:

button{
width:100px;
height:40px;
background-color:yellow;
border-radius:10px;
   -webkit-animation-name: example;
  -webkit-animation-duration: 2s; 
  -webkit-animation-iteration-count: 3; 
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}

@-webkit-keyframes example {
0%   {background-color:yellow;}
50%  {background-color:green;}
}

I am able to get the button change color. But I want it to change color on click. How do I achieve this?

You could use some instance like `focus` to trigger the animation but on focusout will lose it ... If you want to add the animation and keep it after click will need JS — DaniP, Jun 15 '16 at 14:23
@DaniP Not necessarily; if you switch to transitions rather than animations you could use the CSS checkbox hack. — TylerH, Jun 15 '16 at 14:53

score 2 · Answer 1 · edited May 23 '17 at 12:30

2

If you're just trying to change the color of a button on click, CSS transitions are simpler than animations and you can do this without any JavaScript:

#buttonState {
  display:none;
}

#buttonState + label {
    width: 100px;
    height: 40px;
    background-color: yellow;
    border-radius: 10px;
    transition: background-color 4s linear;
}

#buttonState:checked + label {
    transition: background-color 4s linear;
    background-color: green;
}

<input type="checkbox" id="buttonState" class="btn-state" />
<label for="buttonState" class="btn">Save</label>

You can even make this element look like a button with some extra styles.

edited May 23 '17 at 12:30

Community

1
1

answered Jun 15 '16 at 15:03

TylerH

20,799
66
75
101

This approach breaks the markup-style separation and is called a *hack* for a reason. A JavaScript approach should be used in production – Zach Saucier Jul 18 '16 at 16:51
1

There's no real concern for theoretical markup-style separation philosophy here, though I did mention to OP under the question that it is indeed a hack. – TylerH Jul 18 '16 at 19:12

score 1 · Accepted Answer · answered Jun 15 '16 at 14:51

For pure CSS solution, use label and input[type = "checkbox"] combination. (code pen: http://codepen.io/anon/pen/dXXXww).

HTML:

<input type = "checkbox" id = "buttonState" class = "btn-state" />
<label for = "buttonState" class = "btn">
  Save
</label>

CSS (LESS):

.btn {
  box-sizing: border-box;
  display: inline-block;
  font: normal 20px/40px Sans-serif;
  text-align: center;
  width: 100px;
  height: 40px;
  background-color: yellow;
  border-radius: 10px;
  cursor: pointer;
}

.btn-state {
  display: none;
  &:checked + .btn {
    animation: example 4s infinite;
  }
}

@keyframes example {
  0%   {background-color: yellow;}
  50%  {background-color: green;}
}

For a JavaScript solution, use the code below. (code pen: http://codepen.io/anon/pen/OXXXqP).

HTML:

<button class = "btn">
  Save
</button>

CSS:

.btn {
  box-sizing: border-box;
  display: inline-block;
  font: normal 20px/40px Sans-serif;
  text-align: center;
  width: 100px;
  height: 40px;
  background-color: yellow;
  border-radius: 10px;
  cursor: pointer;
  outline: 0;
}

.btn.animate {
  animation: example 4s infinite;
}

@keyframes example {
  0%   {background-color: yellow;}
  50%  {background-color: green;}
}

JS:

var $ = document.querySelectorAll.bind(document);
$('.btn')[0].addEventListener('click', function(evt) {
  evt.target.classList.toggle('animate');
});

css animations to be applied on click

2 Answers2