【CSS】CSSアニメーションの方法
【CSS】マウスを乗せると大きさがふわっと変化する
マウスカーソルがボタンに重なったらスタイルを変更する
/* CSS Document */ #btn1 { background-color: #2c5fbf; border: 2px solid #5874eb; border-radius: 4px; color: #ffffff; display: block; font-size: 18px; padding: 0.5em 1em; margin: 20px auto; text-align: center; width: 320px; height: auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #btn1:hover { background-color: #ffffff; color: #2c5fbf; width: 400px; height: auto; }
ページが表示されている間、ずっとアニメーションし続けます。
/*======================================== ボタン2 ==========================================*/ #btn2 { background-color: #2C5fbf; border: 2px solid #5874EB; border-radius: 4px; color: #ffffff; display: block; font-size: 18px; padding: 0.5em 1em; margin: 20px auto; text-align: center; width: 320px; -webkit-animation: flash 1s ease-in-out 0s infinite alternate; animation: flash 1s ease-in-out 0s infinite alternate; } /*アニメーションの定義*/ @keyframes flash { 0% { width: 320px; } 100% { width: 400px; } }
プロフィール
氏名 | 伊藤 智央 |
---|---|
出身地 | 埼玉県春日部市 |
(現)職業 | Webデザイナー |
前職業 | IT系テクニカルサポート |
姉妹サイト | ひとりでもJavaScriptがあればゲームが作れる 妄想8割?現実2割 |