Animation How to - Create Text flying animation








Question

We would like to know how to create Text flying animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html{<!--from  www . ja  va  2 s.  c  o  m-->
        -webkit-animation-name:z;
        -webkit-animation-duration:500ms;
        -webkit-animation-timing-function:ease-in-out;
        padding: 20px;
}
@-webkit-keyframes z {
        0% {
                -webkit-transform-origin: 50% 50%;
                -webkit-transform: rotate3d(0, 1, 0, 720deg) rotateZ(45deg) scale(0);
        }
        100% {
                -webkit-transform: rotate3d(0, 1, 0, 0) rotateZ(0) scale(1);
        }
}
h1 {
    font-size: 2.4em;
}
  </style>
</head>
<body>
  <h1><a href="http://java2s.com" target="_blank">java2s.com</a> text</h1>
</body>
</html>

The code above is rendered as follows: