Transition［トランジションアニメーション］
マウスホバー時に背景色を変更（3秒間で）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Transition</title> <style> button { height: 80px; width: 240px; background-color: #0d96a5; border: none; color: white; font-size: 28px; transition-duration: 2s; } button:hover { background-color: #c9cd0c; } </style> </head> <body> <button>css transition</button> </body> </html>
マウスホバー時に背景色と文字色を変更
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Transition</title> <style> html,body,h2,h3,p { margin: 0; padding: 0; line-height: 1.0; } a { text-decoration: none; } body { text-align: center; } .content { margin: 50px; padding: 30px; border: 1px solid #aaa; } h2 { margin: 30px; } h3 { margin-bottom: 20px; } .btn a{ display:block; width: 100px; margin: 0 auto; padding: 10px 20px; border-radius: 5px; box-shadow: 1px 1px 1px #999; background: #ccc; color: #fff; font-family: Helvetica, Arial, san-serif; font-weight: bold; font-size: 150%; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); } /* Transition ---------------------------*/ /*フワッと色が変わるボタン1（同時）*/ .btn01 a{ background-color: #9c9; color: #fff; transition: 1s; } .btn01 a:hover{ background-color: #fc6; color: #000; } /*フワッと色が変わるボタン2（背景色だけ）*/ .btn02 a{ background-color: #9c9; transition: 0.4s; } .btn02 a:hover{ background-color: #fc6; } /*フワッと色が変わるボタン3（時間差）*/ .btn03 a{ background-color: #9c9; color: #fff; transition: background-color 1s 0s, color 1s 1s; } .btn03 a:hover{ background-color: #fc6; color: #000; } </style> </head> <body> <h2>Transition［トランジションアニメーション］</h2> <div class="content"> <h3>フワッと色が変わるボタン1（同時）</h3> <p class="btn btn01"><a href="#">button</a></p> </div><!-- /.content --> <div class="content"> <h3>フワッと色が変わるボタン2（背景色だけ）</h3> <p class="btn btn02"><a href="#">Button</a></p> </div><!-- /.content --> <div class="content"> <h3>フワッと色が変わるボタン3（時間差）</h3> <p class="btn btn03"><a href="#">BUTTON</a></p> </div><!-- /.content --> </body> </html>
Transition-Timing-function（イージング）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Timing-function</title> <style> html,body,h3,p,ul,li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } .content { margin: 50px; padding: 20px; border: 1px solid #aaa; } h3 { margin-bottom: 20px; } .circle { width: 100px; height: 100px; margin: 20px; background: #197df2; color: #fff; font-weight: bold; text-align: center; line-height: 100px; border-radius: 50%; } /*transition-timing-function*/ .timing li{ position: relative; left: 0; } .timing:hover li { left: 600px; } .t01{ transition: left 3s ease; } .t02{ transition:left 3s linear; } .t03{ transition:left 3s ease-in; } .t04{ transition:left 3s ease-out; } .t05{ transition:left 3s ease-in-out; } </style> </head> <body> <div class="content"> <h3>transition-timing-function</h3> <ul class="timing"> <li class="circle t01">ease</li> <li class="circle t02">linear</li> <li class="circle t03">ease-in</li> <li class="circle t04">ease-out</li> <li class="circle t05">ease-in-out</li> </ul> </div> </body> </html>
