Animation How to - Create scale animation

Question

We would like to know how to create scale animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@-webkit-keyframes myAnimation { <!--from ww w .  j a v  a 2  s. co m-->
   0%, 100% {-webkit-transform: scaleX(1);}
   50%{-webkit-transform:scaleX(20);}
}
@keyframes myAnimation { 
   0%, 100% {transform: scaleX(1);}
   50%{transform:scaleX(20);}
}
.thing {
  width: 4px;
  height: 50px;
  background: red;
  margin: 30px;
  -webkit-animation: myAnimation 4s infinite ease-in-out;
  animation: myAnimation 4s infinite ease-in-out;
  outline: 1px transparent solid;
}
</style>
</head>
<body>
  <div class="thing"></div>
</body>
</html>

The code above is rendered as follows: