CSS3文本动画教程

HTMLText 1Text 2Text 3Text 4Text 5CSS:.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 }}

在线演示        积分下载        6毛下载        砍两刀下载