CSS3文本动画教程

CSS3文本动画教程168
HTML
  • Text 1

  • Text 2

  • Text 3

  • Text 4

  • Text 5

CSS:
.text-animation,.text-animation:after {    position: fixed;    width: 100%;    height: 100%;    top: 0px;    left: 0px;    z-index: 0;}.text-animation li{    z-index: 1000;    position: absolute;    bottom: 295px;    left: 0px;    width: 100%;    text-align: center;    opacity: 0;    -webkit-animation: textAnimation 20s linear infinite 0s;    -moz-animation: textAnimation 20s linear infinite 0s;    -o-animation: textAnimation 20s linear infinite 0s;    -ms-animation: textAnimation 20s linear infinite 0s;    animation: textAnimation 20s linear infinite 0s;}.text-animation li h3 {    font-family: 'Open Sans Condensed', sans-serif;	text-transform:uppercase;    font-size: 240px;    padding: 0;    line-height: 200px;	color:#390;}.text-animation li:nth-child(2){    -webkit-animation-delay: 4s;    -moz-animation-delay: 4s;    -o-animation-delay: 4s;    -ms-animation-delay: 4s;    animation-delay: 4s;}.text-animation li:nth-child(3){    -webkit-animation-delay: 8s;    -moz-animation-delay: 8s;    -o-animation-delay: 8s;    -ms-animation-delay: 8s;    animation-delay: 8s;}.text-animation li:nth-child(4) {    -webkit-animation-delay: 12s;    -moz-animation-delay: 12s;    -o-animation-delay: 12s;    -ms-animation-delay: 12s;    animation-delay: 12s;}.text-animation li:nth-child(5) {    -webkit-animation-delay: 16s;    -moz-animation-delay: 16s;    -o-animation-delay: 16s;    -ms-animation-delay: 16s;    animation-delay: 16s;}.text-animation li:nth-child(6) {    -webkit-animation-delay: 20s;    -moz-animation-delay: 20s;    -o-animation-delay: 20s;    -ms-animation-delay: 20s;    animation-delay: 20s;}/* Animation for the text */@-webkit-keyframes textAnimation { 	0% {	    opacity: 0;	    -webkit-transform: translateY(200px);	}	10% {	    opacity: 1;	    -webkit-transform: translateY(0px);	}	20% {	    opacity: 1;	    -webkit-transform: scale(1);	}	23% { opacity: 0 }	27% {	    opacity: 0;	    -webkit-transform: scale(10);	}	100% { opacity: 0 }}@-moz-keyframes textAnimation { 	0% {	    opacity: 0;	    -moz-transform: translateY(200px);	}	10% {	    opacity: 1;	    -moz-transform: translateY(0px);	}	20% {	    opacity: 1;	    -moz-transform: scale(1);	}	23% { opacity: 0 }	27% {	    opacity: 0;	    -moz-transform: scale(10);	}	100% { opacity: 0 }}@-o-keyframes textAnimation { 	0% {	    opacity: 0;	    -o-transform: translateY(200px);	}	10% {	    opacity: 1;	    -o-transform: translateY(0px);	}	20% {	    opacity: 1;	    -o-transform: scale(1);	}	23% { opacity: 0 }	27% {	    opacity: 0;	    -o-transform: scale(10);	}	100% { opacity: 0 }}@-ms-keyframes textAnimation { 	0% {	    opacity: 0;	    -ms-transform: translateY(200px);	}	10% {	    opacity: 1;	    -ms-transform: translateY(0px);	}	20% {	    opacity: 1;	    -ms-transform: scale(1);	}	23% { opacity: 0 }	27% {	    opacity: 0;	    -webkit-transform: scale(10);	}	100% { opacity: 0 }}@keyframes textAnimation { 	0% {	    opacity: 0;	    transform: translateY(200px);	}	10% {	    opacity: 1;	    transform: translateY(0px);	}	20% {	    opacity: 1;	    transform: scale(1);	}	23% { opacity: 0 }	27% {	    opacity: 0;	    transform: scale(10);	}	100% { opacity: 0 }}

也许你还喜欢