テキスト点滅アニメーションCSS作成ツール
常に点滅を繰り返すテキストのアニメーションを作成するCSSジェネレーターです。
プレビュー
<span class="blinking-text">{{text}}</span>.blinking-text {
font-size: {{size}}px;
font-weight: bold;
color: {{color}};
animation: blink {{duration}}s infinite alternate;
}
{{keyframes_def}}機能・使い方
- 常に点滅し続けるテキストのアニメーションCSSを作成します。
- 文字サイズ、色、点滅の速さを調整できます。
- 注意を惹きたい警告文や、セールの強調表示などに活用できます。
- ふわっと変化する点滅パターンや、パチッと切り替える点滅パターンを切り替えられます。
- カスタムモードでは、点滅タイミングを自由に設定でき不規則な点滅を実装できます。
CSSプロパティの説明
@keyframesで不透明度（opacity）を1から0に変化させるアニメーション定義を行っています。
「通常モード」ではalternateを指定して滑らかに往復させていますが、「カスタムパターン」では指定した区間に合わせて詳細なキーフレームを生成し、自由な点滅リズムを作れるようにしています。
animationプロパティの、infiniteにて無限ループとなります。
animationプロパティの、alternateを指定することで、往復する際に滑らかに変化するようになります。
@keyframesは、アニメーション時間を分割指定し、詳細なキーフレームを定義することができるCSSプロパティです。
