<h2 id="h44db0678e8">cubic-bezierとは</h2><p>CSSのアニメーションのイージングを細かく数値で設定できるプロパティーになります。X軸、Y軸を使用しイージングのスピードを設定できます。</p><p>まず、イージングについてまとめてみました。</p><h2 id="ha65168e6df">cubic-bezierを直感的に設定できるサイト</h2><p>直感的にcubic-bezierを設定できるサイト↓</p><p><a href="https://cubic-bezier.com/#.17,.67,.83,.67" target="_blank" rel="noopener noreferrer">cubic-bezier.com</a></p><h2 id="h87d79ace20"><strong>cubic-bezierを使用したhoverアクション例</strong></h2><p>簡単に制作してあるだけなので、アレンジすることをおすすめします！</p><h3 id="h960cf8d9e9">背景が左から右へスライドするhoverアクション</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FBamPZXB%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DBamPZXB&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FBamPZXB&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FBamPZXB-512.jpg%3Fversion%3D1645712428&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><span style="font-size: 1.5em">HTML</span></p><pre><code>/**html**/

&lt;div class="div"&gt;
&lt;p class="btn"&gt;&lt;a&gt;button&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;</code></pre><p><span style="font-size: 1.5em">CSS</span></p><pre><code>body {
 background-color: #ececec;
}

.div{
  position: relative;
  background-color: #ececec;
  width: 100%;
  height: 100vh;
}

.btn {
  background-color: #fff;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 22px;
  overflow: hidden;
}

.btn a {
  font-size: 16px;
  display: inline-block;
  padding: 15px 70px;
  letter-spacing: 1.1px;
  position: relative;
  transition: transform 0.3s cubic-bezier(.16,.5,.43,1);
  border-radius: 22px;
}

.btn a:hover {
  color: #fff;
  transition: color 0.1s cubic-bezier(.16,.5,.43,1);
}

.btn a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
  transition: transform 0.3s cubic-bezier(.16,.5,.43,1);
}

.btn a::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 22px;
  background-image: linear-gradient(to right, #a5efff 0%, #00d0ff 100%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(0, 1);
  transform-origin: right top;
  z-index: -1;
  transition: transform 0.3s cubic-bezier(.16,.5,.43,1);
}</code></pre><h3 id="h8f8e05274b">画像が小さくなって近づいてくるhoverアクション</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FgOXjGLm%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DgOXjGLm&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FgOXjGLm&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FgOXjGLm-512.jpg%3Fversion%3D1645715295&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><h2 id="hcf83e1357e"><br></h2><p><span style="font-size: 1.5em">HTML</span></p><pre><code>/**html**/
&lt;div class="img__box"&gt;
  &lt;div class="img__box__02"&gt;
  &lt;a&gt;
    &lt;img src="https://images.unsplash.com/photo-1573140247632-f8fd74997d5c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=3270&amp;q=80"&gt;
   &lt;/a&gt;
  &lt;/div&gt;
 &lt;/div&gt;</code></pre><p><span style="font-size: 1.5em">CSS</span></p><pre><code>/**css**/

.img__box {
  width: 40%;
  margin: 60px auto;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.16,.5,.43,1);
}

.img__box:hover {
  transform: scale(.95);
  transition: transform .6s cubic-bezier(.16,.5,.43,1);
}

.img__box__02 {
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.16,.5,.43,1);
}

.img__box__02:hover {
  transform: scale(1.1);
  transition: transform .6s cubic-bezier(.16,.5,.43,1);
}

.img__box a {
  display: block; 
}

.img__box img {
  width: 100%;
  height: auto;
}</code></pre><h3 id="hf367a1e1f7">ニューフォフィズムボタンが凹むようなhoverアクション</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FvYWaVRg%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DvYWaVRg&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FvYWaVRg&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FvYWaVRg-512.jpg%3Fversion%3D1645743436&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><h3 id="hcf83e1357e"><br></h3><p><span style="font-size: 1.5em">HTML</span></p><pre><code>/**html**/

&lt;div class="btn"&gt;
  &lt;a&gt;neuphophism_buttton&lt;/a&gt;
&lt;/div&gt;</code></pre><p><span style="font-size: 1.5em">CSS</span></p><pre><code>/**css**/

body {
  background-color: #f2f2f2;
}

.btn {
  width: 300px;
  margin: 20% auto;
  display: block;
  text-align: center;
  border-radius: 30px;
}

.btn a {
  display: block;
  background-color:#f2f2f2;
  padding: 45px 60px;
  box-shadow: 8px 8px 20px rgb(112 112 112 / 20%), -8px -8px 20px #fff;
  border-radius: 30px;
  transition: .6s cubic-bezier(.16,.5,.43,1);
}

.btn a:hover {
  box-shadow: 8px 8px 20px rgb(160 160 160 / 20%), -8px -8px 20px #fff, inset 4px 4px 10px rgb(160 160 160 / 20%), inset -4px -4px 10px #fff;
  transition: .6s cubic-bezier(.16,.5,.43,1);
}</code></pre><h3 id="h4c299bb1d9">背景が滑らかに画像になるhoverアクション</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FdyZjgLN%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DdyZjgLN&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FdyZjgLN&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FdyZjgLN-512.jpg%3Fversion%3D1645745464&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><h3 id="hcf83e1357e"><br></h3><p><span style="font-size: 1.5em">HTML</span></p><pre><code>/**html**/

&lt;ul&gt;
  &lt;li&gt;
    &lt;a&gt;
      &lt;div&gt;
        &lt;h2&gt;BUTTON&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre><p><span style="font-size: 1.5em">CSS</span></p><pre><code>/**css**/

ul li {
  width: 50%;
  min-width: 50%;
  margin: 10% auto;
  text-align: center;
  border: 1px solid #0000003b;
  position: relative;
  height: 300px;
}

ul li a {
  display: block;
  line-height: 300px;
}

ul li a div {
  width: 100%;
  height: 100%;
  position: relative;
}

ul li a div::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("https://images.unsplash.com/photo-1502982720700-bfff97f2ecac?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=3270&amp;q=80");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.16,.87,.43,1);
}

ul li a:hover div::before {
  opacity: 1;
  transition: opacity .6s cubic-bezier(.16,.87,.43,1);
}

ul li a div h2 {
  font-size: 18px;
  letter-spacing: 2px;
  position: relative;
  z-index: 2;
  transition: color .4s cubic-bezier(.16,.87,.43,1);
}

ul li a:hover h2 {
  color: #fff;
  transition: color .4s cubic-bezier(.16,.87,.43,1);
}</code></pre><p><br></p>

cubic-bezierを使用して、滑らかな動きをするhoverアクションを作ってみました。直感的にcubic-bezierを設定できるサイトも紹介していますので、オリジナルの動きにアレンジしてお使いください。

【CSSのhoverアクション】cubic-bezierでなめらかでおしゃれなhoverアクション

CSS（Scss）とjQueryでハンバガーメニューを作ってみました。
今回のハンバーガーメニューは、全画面表示でメニューリストをしたからぬるっと表示させる仕様にしてみました。
また、三本線にも少し動きをつけてみました。

Frontend Engineer Tech Blog

CSS

【CSSのhoverアクション】cubic-bezierでなめらかでおしゃれなhoverアクション

【全画面ハンバーガーメニュー】メニューが下から順番にでてくるアニメーション付き

React

GSAP

CSS

jQuery

Javascript