
コーディングテクニックの実装内容
今回はテキストアニメーションに関する内容です。@keyframesを使用してテキストをチカチカと点滅アニメーションさせる方法をご紹介します。JavaScriptは不使用なので簡単に実装できます。
使いどころ
見出しのテキストやタイトルなどに使用すると効果的です。カーテンアニメーションの中に組み込むのも効果的です。
実装所要時間:10分程度
難易度:初心者コーダーでも実装可能
実装に必要なスクリプトとスタイルはこちらになります。
.wrap {
margin: 80px 0 0;
}
.text {
text-align: center;
font-size: 62px;
font-weight: bold;
transition: opacity 0s linear .8s;
animation: text 0.1s linear .8s 10 normal;
opacity: 1;
}
@keyframes text {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
実装のポイント
現在制作中
スポンサーリンク