Animation How to - Create text shake animation

Question

We would like to know how to create text shake animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.box {<!--  w  w  w  . j a  v a 2s. co m-->
  margin: 10px 0px;
  font-weight: bold;
  font-size: 1em;
  color: #333;
  display: block;
  height: auto;
  width: 120px;
  text-align: center;
  text-shadow: 0px 1px 1px #fff;
}

.box:hover {
  -webkit-animation: shake 1s ease-in-out 0.1s infinite alternate;
}

@-webkit-keyframes shake {from { -webkit-transform:rotate(5deg);
}
to {-webkit-transform-origin: center center;
  -webkit-transform: rotate(-5deg);}
}
</style>
</head>
<body>
  <div class="box">shaking baby!</div>
  <div class="box">shaking baby!</div>
  <div class="box">shaking baby!</div>
</body>
</html>

The code above is rendered as follows: