Play / Pause CSS3 Transition

index.html

<div class="play"><span></span></div>

Play---Pause-CSS3-Transition.markdown

Play / Pause CSS3 Transition

Using CSS3, with help from Shak Dizzle, manage come up with a different icon transition, can be handy for web app's handling with multimedia such as audio and video.

A Pen by Paul Stewart on CodePen.

License.

script.js

$('.play').click(function(){
  $(this).toggleClass('active');
});

style.css

body {
  background:#333333;
}

span {
  height: 80px;
  width: 80px;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  text-indent: -9999px;
}
span:before,
span:after {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.play {
  width: 80px;
  height: 80px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin:-40px 0 0 -40px;
  display: Block;
}
.play span {
  margin: 0;
}
.play span:before {
  content: '';
  height: 0px;
  width: 0px;
  display: block;
  background: transparent;
  border: 20px transparent solid;
  border-right-width: 0;
  border-left-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -10px;
}
.play span:after {
  content: '';
  height: 0px;
  width: 0px;
  display: block;
  background: transparent;
  border: 20px transparent solid;
  border-right-width: 0;
  border-left-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -10px;
}
.play.active {
  position: absolute;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  z-index: 0;
}
.play.active span:before {
  content: '';
  border: 5px #ffffff solid;
  border-top-width: 40px;
  border-bottom-width: 0;
  left: 37.5%;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.play.active span:after {
  content: '';
  border: 5.333333333333333px #ffffff solid;
  border-bottom-width: 0;
  border-top-width: 40px;
  left: 62.5%;
  -webkit-transform: rotate(-360deg);
  -moz-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  -o-transform: rotate(-360deg);
  transform: rotate(-360deg);
}