Animation How to - Hover to enlarge and shrink

Question

We would like to know how to hover to enlarge and shrink.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@-webkit-keyframes bounceup {<!-- w w  w. j a  v a 2s .  c  om-->
    0% {
        width: 80px;
        height: 80px;
    }
    25% {
        width: 220 px;
        height: 220 px;
    }
    50% {
        width: 160 px;
        height: 160 px;
    }
    75% {
        width: 180 px;
        height: 180 px;
    }
    100% {
        width: 160 px;
        height: 160 px;
    }
}
@-webkit-keyframes bouncedown {
    0% {
        width: 160px;
        height: 160px;
    }
    25% {
        width: 80 px;
        height: 80 px;
    }
    50% {
        width: 100 px;
        height: 100 px;
    }
    75% {
        width: 80 px;
        height: 80 px;
    }
    90% {
        width: 90 px;
        height: 90 px;
    }
    100% {
        width: 80 px;
        height: 80 px;
    }
}
#button {
    width: 80px;
    height: 80px;
    background-color: #f00;
    -webkit-transition: all .5s ease-in-out;
}
#button:hover {
    width: 160px;
    height: 160px;
    -webkit-animation-name: bounceup;
    -webkit-animation-duration: 1s;
}
</style>
</head>
<body>
  <div id="button">Hey oh!</div>
</body>
</html>

The code above is rendered as follows: