html - cssを使ったテキストアニメーション

Question

このリンクヘッダーのようなテキストアニメーションを作りたい:

それは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)
}
}

次に、ホバーしたときにテキストを変更可能にしたい。ID "phrase" をどうすればいいですかよろしくお願いします

score 0 · Accepted Answer

あなたは使用することができ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アニメーションがループしないように、または元の位置に戻らないように、プロパティを指定することもできます。

html - cssを使ったテキストアニメーション

1 に答える 1

Related

Reference