web-dev-qa-db-ja.com

CSS3アニメーションでテキストを変更しますか？

私のウェブサイトでは、ヘッダーをフェードイン/フェードアウトしてから、別のテキストでインし、次にアウトして、通常の（ループ）に戻す必要があります。これがどのように機能するかを以下に示します。

h1 {
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
25% {font-size:570%; opacity:0;}
50% {font-size:600%; opacity:1;}
65% {font-size:570%; opacity:0;}
80% {font-size:600%; opacity:1; innerHtml="Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; innerHtml="Original Text"}
}

ただし、CSS3アニメーション内のテキストを変更する方法は見つかりませんでした。これは可能ですか？

htmlcsscss3css-animations
8
user7548189

これを行うには2つの方法があります。 1つは、疑似要素によってコンテンツを管理することです。これは、表示されたコンテンツがCSS内に適用されることを意味します。このような：

CSS

h1:before{
    content: 'Original Text';
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes head {
    0% {font-size:600%; opacity:1;}
    25% {font-size:570%; opacity:0;}
    50% {font-size:600%; opacity:1;}
    65% {font-size:570%; opacity:0;}
    80% {font-size:600%; opacity:1; content: "Changed Text"}
    90% {font-size:570%; opacity:0;}
    100% {font-size:600%;opacity:1; content: "Original Text"}
}

これを行うもう1つの方法は、HTMLに2つの要素を持ち、それらを切り替えることです。これを行うには、2つのアニメーションを一緒に使用する必要があります。または、次のように、1つのアニメーションをオフセットするだけでもかまいません。

HTML

<header>
    <h1 class="headtext" id="text1">Original Text</h1>
    <h1 class="headtext" id="text2">Changed Text</h1>
</header>

CSS

.headtext{
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#text2{
    animation-delay: 2s;
}

@keyframes head {
    0% {font-size:600%; opacity:1;}
    50% {font-size:0; opacity:0;}
    100% {font-size:600%;opacity:1;}
}

font-sizeを0に減らして、他のテキストが入る余地を与えました。これは、あなたが望むとは異なる効果かもしれません。

8
Donnie D'Amato

1時間前、同じ質問に悩まされていましたが、私の決断はこれです。自分のコードの一部を貼り付けたところです。みんなチェックしてね！

body {
        margin: 0;
        font-family: sans-serif;
}

#wrapper {
        background-color: #051E3E;
        height: 100vh;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
}

#hi {
        animation: Pulse 5s;
}

@keyframes Pulse {
        0% {
        color: #051E3E;
        }
        10% {
                color: #051E3E;
        }
        30% {
                color: white;
        }
        50% {
                color: #051E3E;
        }
        60% {
                color: #051E3E;
        }
        80% {
                color: white;
        }
        100% {
                color: #051E3E;
        }
}

#hi:after {
        content: "";
        animation: spin 5s linear;
}

@keyframes spin {
  0% { content:"Hi"; }
  100% { content:"How do you like it?"; }
}
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
        
        <div id="wrapper">
                <p id="hi"></p>
        </div>
        
</body>
</html>
2
ross rykov

だから私は解決策を見つけるためにこの質問に出くわしました、私はコンテンツでテキストを変更できないという警告がありました： '';だから私は以下を思いついた：

@keyframes fade-out-fade-in {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  60% {
    opacity: 0;
  }

  70% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in-fade-out {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

次に使用：

animation: fade-in-fade-out 20s linear infinite both;

2番目のテキスト

animation: fade-out-fade-in 20s linear infinite both;

必要な場所。

これが将来誰かを助けることを願っています。

0
ProfClank