使用 css 的文本动画

Question

我想制作像这个链接头这样的文字动画：

hey.im

它使用javascript吗？我想用纯css制作，可以吗？ 我应该对我的 html 做些什么？ 我有css代码；

 body{
    color: #000;
}
#header{
display:inline-block;
opacity:0;
-ms-filter:alpha(opacity=0);
filter:alpha(opacity=0);
position:relative;
margin-bottom:60px;
font-size:34px;
font-weight:normal;
text-shadow:0 1px 1px #3976d6;
white-space:normal;
font-family:Arial, Helvetica, sans-serif;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

#header h1{
display:block;
height:34px;
line-height:34px;
font-weight:normal;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

#header h1 b{
display:inline-block;
height:34px;
line-height:34px;
font-weight:normal;
text-align:left;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

#header h1 #phrase{
display:inline-block;
position:absolute;
bottom:0;
right:0;
height:34px;
line-height:34px;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}


@-moz-keyframes zoomAndRotateIn{
0%{
    opacity:0;
    -ms-filter:alpha(opacity=0);
    filter:alpha(opacity=0);
    -webkit-transform:scale(0.5) rotate(-90deg);
    -moz-transform:scale(0.5) rotate(-90deg);
    -o-transform:scale(0.5) rotate(-90deg);
    -ms-transform:scale(0.5) rotate(-90deg);
    transform:scale(0.5) rotate(-90deg);
}
40%{
    opacity:1;
    -ms-filter:none;
    filter:none;
    -webkit-transform:scale(1.02) rotate(0deg);
    -moz-transform:scale(1.02) rotate(0deg);
    -o-transform:scale(1.02) rotate(0deg);
    -ms-transform:scale(1.02) rotate(0deg);
    transform:scale(1.02) rotate(0deg)
}
70%{
    -webkit-transform:scale(0.98);
    -moz-transform:scale(0.98);
    -o-transform:scale(0.98);
    -ms-transform:scale(0.98);
    transform:scale(0.98)
}
100%{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1)
}
}

@keyframes zoomIn{
0%{
    opacity:0;
    -ms-filter:alpha(opacity=0);
    filter:alpha(opacity=0);
    -webkit-transform:scale(0.1);
    -moz-transform:scale(0.1);
    -o-transform:scale(0.1);
    -ms-transform:scale(0.1);
    transform:scale(0.1)
}
40%{
    opacity:1;
    -ms-filter:none;
    filter:none;
    -webkit-transform:scale(1.02);
    -moz-transform:scale(1.02);
    -o-transform:scale(1.02);
    -ms-transform:scale(1.02);
    transform:scale(1.02)
}
70%{
    -webkit-transform:scale(0.98);
    -moz-transform:scale(0.98);
    -o-transform:scale(0.98);
    -ms-transform:scale(0.98);
    transform:scale(0.98)
}
100%{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1;
    -ms-filter:none;
    filter:none
}
}

@-moz-keyframes fadeIn{
0%{
    opacity:0;
    -ms-filter:alpha(opacity=0);
    filter:alpha(opacity=0)
}
100%{
    opacity:1;
    -ms-filter:none;
    filter:none
}
}

@-moz-keyframes fadeOut{
0%{
    opacity:1;
    -ms-filter:none;
    filter:none
}
100%{
    opacity:0;
    -ms-filter:alpha(opacity=0);
    filter:alpha(opacity=0)
}
}

@-moz-keyframes fadeUpAndOut{
0%{
    opacity:1;
    -ms-filter:none;
    filter:none;
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -o-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0);
}
100%{
    opacity:0;-ms-filter:alpha(opacity=0);
    filter:alpha(opacity=0);
    -webkit-transform:translateY(-34px);
    -moz-transform:translateY(-34px);
    -o-transform:translateY(-34px);
    -ms-transform:translateY(-34px);
    transform:translateY(-34px);
}
}

@-moz-keyframes fadeInAndExpand{
0%{
    opacity:0;
    -ms-filter:alpha(opacity=0);
    filter:alpha(opacity=0);
    -webkit-transform:scaleX(0.1);
    -moz-transform:scaleX(0.1);
    -o-transform:scaleX(0.1);
    -ms-transform:scaleX(0.1);
    transform:scaleX(0.1)
}
100%{
    opacity:1;
    -ms-filter:none;
    filter:none;
    -webkit-transform:scaleX(1);
    -moz-transform:scaleX(1);
    -o-transform:scaleX(1);
    -ms-transform:scaleX(1);
    transform:scaleX(1)}
}
}

@-moz-keyframes fadeOutAndSqueeze{
0%{
    opacity:1;
    -ms-filter:none;
    filter:none;
    -webkit-transform:scaleX(1);
    -moz-transform:scaleX(1);
    -o-transform:scaleX(1);
    -ms-transform:scaleX(1);
    transform:scaleX(1)
}
100%{
    opacity:0;
    -ms-filter:alpha(opacity=0);
    filter:alpha(opacity=0);
    -webkit-transform:scaleX(0.1);
    -moz-transform:scaleX(0.1);
    -o-transform:scaleX(0.1);
    -ms-transform:scaleX(0.1);
    transform:scaleX(0.1)
}
}

@-moz-keyframes shake{
0%,100%{
    -webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    -o-transform:translateX(0);
    -ms-transform:translateX(0);
    transform:translateX(0);
}
20%,60%{
    -webkit-transform:translateX(-10px);
    -moz-transform:translateX(-10px);
    -o-transform:translateX(-10px);
    -ms-transform:translateX(-10px);
    transform:translateX(-10px);
}
40%,80%{
    -webkit-transform:translateX(10px);
    -moz-transform:translateX(10px);
    -o-transform:translateX(10px);
    -ms-transform:translateX(10px);
    transform:translateX(10px);
}
}

@-moz-keyframes bounce{
    0%,20%,50%,80%,100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -o-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)
}
40%{
    -webkit-transform:translateY(-8px);
    -moz-transform:translateY(-8px);
    -o-transform:translateY(-8px);
    -ms-transform:translateY(-8px);
    transform:translateY(-8px)
}
60%{
    -webkit-transform:translateY(-4px);
    -moz-transform:translateY(-4px);
    -o-transform:translateY(-4px);
    -ms-transform:translateY(-4px);
    transform:translateY(-4px)
}
}

然后我想让我的文本在我悬停时改变。我应该怎么做才能识别“短语” 提前致谢

Answer 1

您可以使用CSS3 animations 和keyframes：

举个简单的例子：

div:hover
{
   animation-name: testanimation
   animation-duration: 5s;
   -webkit-animation-name: testanimation;
   -webkit-animation-duration: 5s;
}

@-webkit-keyframes testanimation {
    0% { background-color: blue; width: 10px; }
    50% { background-color: red; width: 50px }
    100% { background-color: yellow: width: 100px;   
}

在 Chrome 中试试这个 JS Fiddle。

http://jsfiddle.net/eWe5J/

您还可以指定animation-iteration-count 属性，这样动画就不会循环/返回到原始位置。