마이크로 상호작용을 위한 CSS 애니메이션

UX의 일부로서 마이크로 인터랙션이 중요시되고 있습니다. 또한 js보다 CSS 애니메이션이 렌더링 비용이 낮다고 들었습니다. 마이크로 인터랙션에서 CSS 애니메이션의 구분에 관하여 게시합니다.

CSS로 애니메이션

transition

animation (keyframes)

transform은 어디까지나 원형에서 변형시키는 것이고, 애니메이션이 아닙니다.

transition

모니터링할 CSS 속성을 지정하고 속성이 변경되면 애니메이션을 실행합니다.

css

transition: background-color .2s ease-in
/*background-colorの監視*/

프로퍼티의 변경은, :hover등 미리 정의한 것 뿐만이 아니라, javascript에 의한 변경에도 적용됩니다.

js

var myElement = document.querySelector("#myElement");
myElement.style.backgroundColor = "333";

※ transition: all ~~~; 그러면 모든 프로퍼티를 감시할 수 있으므로 편리합니다만, 묘화가 무거워지는 원인이 되므로 피합시다.

animation

사전에 @keyframes 名前 {変化} 라고 정의해 두고, animation 프로퍼티로부터 호출해, 중간점이나 루프 등 다양한 애니메이션에 관한 지정을 할 수 있습니다.

css

@keyframes move {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(10px, 10px);
  }
}

css

.yeah {

  animation: move 1s forwards;

}

/*moveアニメーションを1秒で行い、再生後、最後のキーフレームの状態を保持する*/

사용자 동작(hover 등)이 없어도 실행할 수 있다. 중간점, 루프, 시작 전·시작 후의 상태를 지정할 수 있는, 복수의 애니메이션을 연동시킬 수 있다 것이 매력적입니다.

※ 만약을 위해 transition과 animation에 대해 설명했습니다만, 링크 대상 쪽이 상세하게 쓰여져 있습니다.

마이크로 인터랙션에서 선택

이 기사의 주제입니다. 마이크로 인터랙션에서 어느 속성을 우선적으로 사용하는지, transition을 우선적으로 사용하는 것이 적절할까 생각합니다.

마이크로 인터랙션은 사용자 이벤트에 의해 발화되기 때문입니다. (특히 클릭)

transition에서 특정 css 속성을 모니터링하고 js를 사용하여 클래스를 바꿉니다.

확실히 같은 동작을 하는지, 중간점이나 루프등이 포함되는 경우는, animation(keyframes)를 사용한다.

animation(keyframes)은 함수형 언어와 같이 동일한 동작을 미리 정의하고 제어할 수 있지만 인수를 전달할 수 있는 것은 아닙니다. 사용자가 클릭한 좌표를 사용할 수 없습니다.

css

@keyframes move {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(10px, 10px);
  }
}


이것은 반드시 10px씩 이동해 버린다. 사용자가 클릭한 좌표를 향한 동작을 애니메이션으로 만들 수 없습니다.

원래 문제점

마이크로 인터랙션 이벤트는 클릭이 많다고 생각합니다.
하지만 현재 css에는 click 의사 클래스가 없습니다.

postcss

postcss의 플러그인 안에 click 의사 클래스 추가 라는 것이 있었습니다만, 해결책은 되지 않을 것 같습니다.
js 파일을 생성하고 jQuery에서 toggle하는 것뿐이었습니다.