my first animation css3

by Ukjin Yang

HTML

<div class="ribbon"></div>
<button type="button">GO</button>

CSS

.ribbon{
    position:fixed;top:0;bottom:0;
    left:130%;right:-230%;
    background-color:yellow;
    border-left:2em solid orange;
    border-right:2em solid orange;
}
.ribbon:before{
    display:block;position:absolute;
    left:0;right:0;top:25%;bottom:25%;
    background-color:orange;content:' ';
}
.ribbon.reverse{
    -webkit-animation:resize 2s ease-in-out infinite;
}
@-webkit-keyframes resize {
  0% {
    -webkit-transform:translate(0) skewX(170deg);
  }
  30% {
    -webkit-transform:translate(-100%) skewX(170deg);
  }
  70% {
    -webkit-transform:translate(-100%) skewX(170deg);
  }
  100% {
    -webkit-transform:translate(-200%) skewX(170deg);
  }
}

JavaScript

document.querySelector('button').onclick=function(){
    document.querySelector('.ribbon').classList.toggle('reverse');
};