Css

【CSS3アニメーション】IE11対応のシンプルな背景点滅、テキスト点滅



Simple Background Flashing



関連する構成の互換性はチュートリアルなどです。これを参照するだけで十分です。
https://www.w3school.com.cn/css3/css3_animation.asp

次の例では、chrome / IE11 / Firefoxブラウザをテストします



背景が点滅：

Title body{padding: 50px} .blink { width: 100pxheight:100px line-height: 100px font-size:15px background-color:#ff0 text-align: center animation:aBlink 300ms infinite -webkit-animation:aBlink 300ms infinite } @keyframes aBlink { from { background-color:#ff0 } 50%{background-color:#f00} to { background-color:#ff0 } } @-webkit-keyframes aBlink { from { background-color:#ff0 } 50%{background-color:#f00} to { background-color:#ff0 } } Blinking background

効果画像：
画像

テキストが点滅します：

基本的に同じですが、background-colorをcolorに置き換えるだけです。



@keyframes aniColor1 { 0% { color: #f00 } 50% { color: #FFC100 } 100% { color: #f00 } }

効果画像：
画像