css文字下滑,CSS3 文本下落渐变动效

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Varela+Round);

body {

background: #ff5666;

}

.animate {

font: bold 70px 'Varela Round', sans-serif;

color: #fff;

width: 300px;

height: 50px;

text-align: center;

line-height: 50px;

position: absolute;

margin: auto;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.animate .text {

display: inline-block;

-webkit-transform: translate(0, -20px);

-ms-transform: translate(0, -20px);

transform: translate(0, -20px);

opacity: 0;

-webkit-animation: fade-in 1s forwards;

animation: fade-in 1s forwards;

}

.animate .t-2 {

-webkit-animation-delay: 0.2s;

animation-delay: 0.2s;

}

.animate .t-3 {

-webkit-animation-delay: 0.4s;

animation-delay: 0.4s;

}

.animate .t-4 {

-webkit-animation-delay: 0.6s;

animation-delay: 0.6s;

}

.animate .t-5 {

-webkit-animation-delay: 0.8s;

animation-delay: 0.8s;

}

.animate .t-6 {

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

@-webkit-keyframes fade-in {

100% {

opacity: 1;

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

}

@keyframes fade-in {

100% {

opacity: 1;

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

}