現場で役立つCSSアニメーションオンラインデモ

2018年9月29日にCSS Nite LP58「Coder's High 2018」で発表した「現場で役立つCSSアニメーション」のデモをオンラインで掲載しています。

発表の中で参照したデモなので、このページ「だけ」では説明不足である点、なにとぞご留意ください。

これをビルドした開発環境も丸ごとGitHubで公開しています。ライセンスはMITにしておいたので、規定の範囲内でご自由にお使いください。プルリクもお待ちしています！

何かお知らせしたいことがある時は、ページフッターの連絡先から好きな手段で教えてください。

demo-1: transitionプロパティのデモ

  .p-btn1 {
    /* ボタンのスタイルは省略 */
    background-color: #fff;
  }

  .p-btn1:hover,
  .p-btn1:focus {
    background-color: tomato;
  }

  .p-btn1.-transition {
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-timing-function: linear;
  }

.p-btn1 .p-btn1.-transition

demo-2: cubic-bezier() のデモ

  .p-btn2 {
    /* ボタンのスタイルは省略 */
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-timing-function: linear;
  }

  .p-btn2:hover,
  .p-btn2:focus {
    background-color: tomato;
  }

  .p-btn2.-easeInExpo {
    transition-timing-function:
      /* easeInExpo */
      cubic-bezier(0.95, 0.05, 0.795, 0.035);
  }

.p-btn2 .p-btn2.-easeInExpo

demo-3: cubic-bezier() を利用したカスタムイージングの一覧

  // カスタムイージングのSass変数
  //   by https://easings.net/ja
  //
  $easeInSine:     cubic-bezier(0.47, 0, 0.745, 0.715);
  $easeOutSine:    cubic-bezier(0.39, 0.575, 0.565, 1);
  $easeInOutSine:  cubic-bezier(0.445, 0.05, 0.55, 0.95);

  $easeInQuad:     cubic-bezier(0.55, 0.085, 0.68, 0.53);
  $easeOutQuad:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  $easeInOutQuad:  cubic-bezier(0.455, 0.03, 0.515, 0.955);

  $easeInCubic:    cubic-bezier(0.55, 0.055, 0.675, 0.19);
  $easeOutCubic:   cubic-bezier(0.215, 0.61, 0.355, 1);
  $easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);

  $easeInQuart:    cubic-bezier(0.895, 0.03, 0.685, 0.22);
  $easeOutQuart:   cubic-bezier(0.165, 0.84, 0.44, 1);
  $easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);

  $easeInQuint:    cubic-bezier(0.755, 0.05, 0.855, 0.06);
  $easeOutQuint:   cubic-bezier(0.23, 1, 0.32, 1);
  $easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);

  $easeInExpo:     cubic-bezier(0.95, 0.05, 0.795, 0.035);
  $easeOutExpo:    cubic-bezier(0.19, 1, 0.22, 1);
  $easeInOutExpo:  cubic-bezier(1, 0, 0, 1);

  $easeInCirc:     cubic-bezier(0.6, 0.04, 0.98, 0.335);
  $easeOutCirc:    cubic-bezier(0.075, 0.82, 0.165, 1);
  $easeInOutCirc:  cubic-bezier(0.785, 0.135, 0.15, 0.86);

  $easeInBack:     cubic-bezier(0.6, -0.28, 0.735, 0.045);
  $easeOutBack:    cubic-bezier(0.175, 0.885, 0.32, 1.275);
  $easeInOutBack:  cubic-bezier(0.68, -0.55, 0.265, 1.55);

  // 値にSass変数を指定して使う
  // transition-timing-function: $easeInExpo;

0.5s 1s 3s

in/outで並び替える変化度合いで並び替える transitionを戻す transitionさせる animationをやめる animationさせる animationを再開 animationを停止

ease
ease-in
easeInSine
easeInQuad
easeInCubic
easeInQuart
easeInQuint
easeInExpo
easeInCirc
easeInBack
ease-out
easeOutSine
easeOutQuad
easeOutCubic
easeOutQuart
easeOutQuint
easeOutExpo
easeOutCirc
easeOutBack
ease-in-out
easeInOutSine
easeInOutQuad
easeInOutCubic
easeInOutQuart
easeInOutQuint
easeInOutExpo
easeInOutCirc
easeInOutBack

ease
ease-in
ease-out
ease-in-out
easeInSine
easeOutSine
easeInOutSine
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack

demo-4: onとoffで異なるイージングを設定したデモ

  .p-btn4 {
    /* ボタンのスタイルは省略 */
    position: relative;
  }

  .p-btn4::before {
    content: "";
    position: absolute;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    background-color: tomato;
    transform: scale(1);

    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:
      /* easeInExpo */
      cubic-bezier(0.95, 0.05, 0.795, 0.035);
  }

  .p-btn4:hover::before,
  .p-btn4:focus::before {
    transform: scale(0);
  }

  .p-btn4.-multiEase:hover::before,
  .p-btn4.-multiEase:focus::before {
    transition-timing-function:
      /* easeOutExpo */
      cubic-bezier(0.19, 1, 0.22, 1);
  }

.p-btn4 .p-btn4.-multiEase

demo-5: 複数の動きを設定したデモ

  .p-btn5 {
    /* demo-4と同じ */
  }

  .p-btn5::before {
    /* demo-4と同じ */
  }

  .p-btn5:hover::before,
  .p-btn5:focus::before {
    /* demo-4と同じ */
  }

  .p-btn5.-multiProp {
    transition-property: box-shadow;
    transition-duration: 0.5s;
    transition-timing-function:
      /* easeOutExpo */
      cubic-bezier(0.19, 1, 0.22, 1);
  }

  .p-btn5.-multiProp:hover,
  .p-btn5.-multiProp:focus {
    box-shadow: inset 0 0 0 30px tomato;
  }

.p-btn5 .p-btn5.-multiProp

demo-6: 複数の動きが別のイージングでアニメーションするデモ

  .p-btn6 {
    /* demo-5 と同じ */

    transition-property: box-shadow;
    transition-duration: 0.5s;
    transition-timing-function: linear;
  }
  .p-btn6::before {
    /* demo-5 と同じ */

    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: linear;
    transform: scale(1);
  }
  .p-btn6::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotateZ(-23deg);
    z-index: -1;
    display: block;
    width: 510px;
    height: 0;
    background-color: tomato;

    transition-property: height, transform;
    transition-duration: 0.5s;
    transition-timing-function: linear;
  }
  .p-btn6:hover,
  .p-btn6:focus {
    box-shadow: inset 0 0 0 30px tomato;
  }
  .p-btn6:hover::before,
  .p-btn6:focus::before {
    transform: scale(0);
  }
  .p-btn6:hover::after,
  .p-btn6:focus::after {
    height: 5px;
    transform: translateY(-50%) rotateZ(-18.75deg);
  }

  .p-btn6.-multiAnim {
    transition-timing-function:
      /* easeInExpo */
      cubic-bezier(0.95, 0.05, 0.795, 0.035);
  }
  .p-btn6.-multiAnim::before {
    transition-timing-function:
      /* easeOutExpo */
      cubic-bezier(0.19, 1, 0.22, 1);
  }
  .p-btn6.-multiAnim::after {
    transition-timing-function:
      /* easeInOutExpo */
      cubic-bezier(1, 0, 0, 1);
  }

.p-btn6 .p-btn6.-multiAnim

demo-7: 集めて交差、集めて整列

  /* HTML
  
  */
  .p-btn7 {
    /* ボタンのスタイルは省略 */
  }

  .p-btn7__line {
    position: absolute;
    left: 78px;
    width: 210px;
    height: 12px;
    background-color: #000;
  }
  .p-btn7__line.-line1 {
    top: 72px;
    transform-origin: center center;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-property: top, background-color, transform;
    transition-duration: 0.3s;
    transition-delay: 0.6s, 0s, 0s;
  }
  .p-btn7__line.-line2 {
    top: 120px;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-property: background-color;
    transition-duration: 0.3s;
  }
  .p-btn7__line.-line3 {
    top: 168px;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-property: top, background-color, transform;
    transition-duration: 0.3s;
    transition-delay: 0.6s, 0s, 0s;
  }

  .p-btn7.-opened .p-btn7__line.-line1 {
    top: 120px;
    background-color: tomato;
    transform: rotateZ(23deg);
    transition-delay: 0s, 0s, 0.6s;
  }
  .p-btn7.-opened .p-btn7__line.-line2 {
    background-color: transparent;
  }
  .p-btn7.-opened .p-btn7__line.-line3 {
    top: 120px;
    background-color: tomato;
    transform: rotateZ(-23deg);
    transition-delay: 0s, 0s, 0.6s;
  }

demo-8: どっか行って逆から出てくる

  /* HTML
  
    
  
    READ MORE
  
  */
  .p-btn8 {
    /* ボタンのスタイルは省略 */
  }

  .p-btn8__line {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 100%;
    overflow: hidden;
  }

  .p-btn8__line::before,
  .p-btn8__line::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -2px;
    width: 100%;
    height: 4px;
    background-color: #000;
  }

  .p-btn8__line::after {
    transform: translateX(-100%);
  }

  .p-btn8:hover .p-btn8__line::before,
  .p-btn8:focus .p-btn8__line::before {
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:
      cubic-bezier(0.19, 1, 0.22, 1);
    transform: translateX(100%);
  }

  .p-btn8:hover .p-btn8__line::after,
  .p-btn8:focus .p-btn8__line::after {
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:
      cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 0.5s;
    transform: translateX(0);
  }

どうやってやってるのかわかる方を隠すどうやってやってるのか見る MORE MORE

demo-9: こっちは広く、そっちは狭く

  /* HTML
  READ MORE
  */
  .p-btn9 {
    /* ボタンのスタイルは省略 */
    transition-property:
      padding-left, letter-spacing;
    transition-duration: 0.5s;
    transition-timing-function:
      cubic-bezier(0.19, 1, 0.22, 1);
  }

  .p-btn9::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #000;
    transition-property: transform;
    transition-duration: 0.75s;
    transition-timing-function:
      cubic-bezier(0.19, 1, 0.22, 1);
  }

  .p-btn9:focus,
  .p-btn9:hover {
    padding-left: 0.7em;
    letter-spacing: 0.7em;
  }

  .p-btn9:focus::after,
  .p-btn9:hover::after {
    transition-duration: 0.5s;
    transform: scaleX(0.2);
  }

  /* HTML
  
    READ MORE
  
  */
  .p-btn10 {
    /* ボタンのスタイルは省略 */

    overflow: hidden;
    transition-property: color;
    transition-duration: 0.5s;
    transition-timing-function:
      cubic-bezier(0.19, 1, 0.22, 1);
  }

  .p-btn10::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;

    transform-origin: 101% 0;
    transform: scaleX(0);

    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:
      cubic-bezier(0.19, 1, 0.22, 1);
  }

  .p-btn10:hover {
    color: #fff;
  }

  .p-btn10:hover::before {
    transform-origin: 0 0;
    transform: scaleX(1.01);
  }

現場で役立つCSSアニメーション〜オンラインデモ〜