Animation How to - Rotate text with keyframe

Question

We would like to know how to rotate text with keyframe.

Answer


<!--from   ww  w .ja  v  a 2s  .co m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.spin {
    animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    float: left;
   color: red;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes spin{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
</style>
</head>
<body>
  <div class="spin">spin</div>
</body>
</html>

The code above is rendered as follows: