CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでトランジション効果の速度曲線を設定する方法

transition-timing-functionを使用します 遷移効果の速度曲線を設定するプロパティ。設定できる値は、ease、ease-in、ease-out、linearなどです。

例

次のコードを実行して、CSSで遷移効果の速度曲線を設定することができます-

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 100px;
            height: 100px;
            background: red;
            transition: width 4s;
         }
         #effect1 {
            transition-timing-function: linear;
         }
         #effect2 {
            transition-timing-function: ease-in;
         }
         div:hover {
            width: 250px;
         }
      </style>
   </head>
   <body>
      <h1>Transition Effect</h1>
      <p>Hover over the div elements and see the transition effect and the speed:</p>
      <div id = "effect1">linear effect</div><br>
      <div id = "effect2">ease-in effect</div><br>
   </body>
</html>

  1. CSSでホバー効果の速度を設定する

    ホバーの速度を設定するには、transition-durationプロパティを使用します。ホバーを設定するには、：hoverセレクターを使用します。 例 次のコードを実行して、ホバー効果を高速化することができます- <!DOCTYPE html> <html>    <head>       <style>          .btn {             background-c

  2. CSSでオーバーレイ効果を作成するにはどうすればよいですか？

    CSSでオーバーレイ効果を作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css"> <style> body {    font-family: Arial;    }   &n