We would like to know how to create animation to let text fly in and zooming.
<!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: