Animation How to - Create animation to let text fly in and zooming








Question

We would like to know how to create animation to let text fly in and zooming.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.delay1 {<!--from  w  w  w  .jav a  2 s . c  o  m-->
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 2s; /* Safari and Chrome */
  animation-delay: 2s;
}
.three {
  width: 595px;
  height: 595px;
  background-color: #FFF;
}

.three .text {
  color: #0046AD;
  font-size: 53px;
  width: 565px;
  height: 360px;
  visibility: hidden;
}
.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}

@keyframes fadeIn { 
  0% {transform: scale(0);opacity: 0.0;}
  100%{transform:scale(1);opacity:1;visibility:visible;}
}
@-webkit-keyframes fadeIn { 
   0% {-webkit-transform: scale(0);opacity: 0.0;}
   100%{-webkit-transform:scale(1);opacity:1;visibility:visible;}
}
</style>
</head>
<body>
  <div class="three">
    <div class="text fadeIn delay1">java2s.com</div>
  </div>
</body>
</html>

The code above is rendered as follows: