Animation

Animation.markdown

Animation

A Pen by Charlie Chrisman on CodePen.

License.

index.html

<div class="stage">
  <div class="test">Click me to see the magic happen</div>
</div>

script.js

$(function() {
  $(".test").click(function() {
    $(".test").toggleClass("test-click");
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@keyframes change_colors {
  25% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  75% {
    background-color: yellow;
  }
  100% {
    background-color: red;
  }
}

.stage {
  padding: 50px;
  background: #eaeaed;
  height: 100px;
}

.test {
  margin: auto;
  background: red;
  height: 100px;
  width: 150px;
}

.test-click {
  animation: change_colors 4s ease 0s infinite;
}