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

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

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

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

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

CSS

.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;
}

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

CSS

.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);
}

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

Scss

// カスタムイージングの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);

// 使うとき
//
// transition-timing-function: $easeInExpo;

Custom Easing List

  • 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で異なるイージングを設定したデモ

CSS

.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);
}

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

CSS

.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;
}

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

CSS

.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);
}

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

CSS

/* 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;
}

Result

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

CSS

/* 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);
}

Result

MOREMORE

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

CSS

/* 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);
}

Result

demo-10: 駆け抜ける反転

CSS

/* 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);
}

Result