<h1 data-content="CSS Hover effect"><span>CSS Hover effect</span></h1>

*{margin:0;padding:0;}
html,body{height:100%;}
body{
  background: url(https://farm8.staticflickr.com/7140/13689149895_0cce1e2292_o.jpg) center bottom;
  background-size:cover;
  text-align:center;
}
h1{
  overflow:hidden;
  font-family: 'Open Sans', sans-serif;
  position:relative;
  margin:30vh 0 1vh;
  padding:1em 2em;
  display:inline-block;
  font-size:6vw;
  line-height:1.2em;
  text-transform:uppercase;
  color:darkorange;
  background: rgba(0,0,0,0.5);
  cursor:pointer;
}
h1 span, h1:after{
  display:block;
  height:.6em;
  overflow:hidden;
}
h1:after{
  content: attr(data-content);
  line-height:0;
  height:0.6em;
}
h1:hover span{
  animation: hover1 .2s;
}
h1:hover:after{
  animation: hover2 .2s;
}
@keyframes hover1 {
  50%  { transform:translatex(.2em) skew(50deg); }
  100% { transform:translatex(0); }
}
@keyframes hover2 {
  50%  { transform:translate(.2em) skew(-50deg); }
  100% { transform:translatex(0); }
}