버튼 가리키기 상태의 CSS 애니메이션

최근에 저는 버튼 마우스 오버 상태에서 애니메이션 프로토타입을 발견했고 CSS만으로 제작할 수 있는지 확인하고 싶었습니다. 말로 설명하자면, 알약 모양의 버튼 위에 마우스를 올리면 밋밋한 흰색 배경에서 멋진 색상의 그라데이션으로 배경이 바뀌고 버튼 전체에 빛이 스윕되는 효과가 있었습니다.

저는 CSS로 모든 디자인을 구축하는 표준 접근 방식을 가지고 있으며, 이는 모든 것을 더 작은 조각으로 나누는 것입니다. 첫째, 아무도 상호 작용하지 않을 때 버튼 자체가 있습니다. 그런 다음 그라데이션 전환이 있으며 마지막 번창은 라이트 스윕 효과입니다.

알약 모양

알약 모양의 경우 신뢰할 수 있는border-radius 속성을 호출합니다. 값 자체는 둥근 모서리의 크기에 영향을 미치는 상자 모서리에 있는 원의 반지름을 나타냅니다. 이것이 사각형 상자에 border-radius 값을 50%로 설정하면 완벽한 원을 얻을 수 있는 이유입니다.



어쨌든 알약 모양의 경우 border-radius를 요소 높이의 절반으로 설정하면 트릭을 수행해야 합니다.

내 CSS는 현재 다음과 같습니다.

button {
  padding: 0.75em 1.5em;
  background-color: white;
  border: 2px solid;
  font-size: larger;
  border-radius: 1.65em;
  cursor: pointer;
}

배경 그라데이션 전환

안타깝게도 background-image 속성은 애니메이션할 수 없습니다. CSS Backgrounds and Borders Module Level 3에서 background-image에 대한 섹션을 확인하면 애니메이션 유형이 불연속임을 알 수 있습니다.

이는 애니메이션이 보간 없이 한 키프레임에서 다음 키프레임으로 진행됨을 의미하며, 이는 상태 간 원활한 전환에 필요합니다.

그러나이 문제에 대한 해결 방법이 있으며 의사 요소를 사용합니다. 버튼의 의사 요소에 그라데이션을 설정한 다음 해당 의사 요소의 불투명도에 애니메이션을 적용하여 배경이 그라데이션 배경으로 전환되도록 합니다.

button {
  padding: 0.75em 1.5em;
  background-color: white;
  border: 2px solid;
  font-size: larger;
  border-radius: 1.65em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

의사 요소가 버튼 안에 배치되도록 버튼에 position: relative를 추가했습니다. overflow: hidden는 의사 요소의 모서리가 둥근 모서리에서 엿보지 않도록 하고 z-index는 의사 요소가 버튼 콘텐츠 아래에 있도록 합니다.

의사 요소 자체의 경우 내 CSS는 다음과 같습니다.

button::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to left, tomato 0%, salmon 25%, peachpuff 100%);
  z-index: -1;
  transition: opacity 240ms linear;
  opacity: 0;
}

button:hover::before {
  opacity: 1;
}

라이트 스윕 효과

라이트 스윕 효과를 위해 다른 의사 요소도 필요합니다. 라이트 스윕이 어떻게 설계되었는지에 따라 이에 대한 CSS가 크게 다를 수 있습니다. 나는 그다지 창의적인 사람이 아니므로 빛처럼 보이도록 가장자리가 흐릿한 얇은 흰색 세로선을 사용합니다.

button::after {
  content: '';
  height: 150%;
  width: 0.25em;
  background-color: #fff;
  box-shadow: 0px 0px 8px 4px #fff;
  transform: translateX(-1em);
}

그리고 애니메이션의 경우 누군가가 버튼 위로 마우스를 가져갈 때 조명 선이 왼쪽에서 오른쪽으로 수평으로 지나가기를 원합니다.

button:hover::after {
  animation-duration: 300ms;
  animation-name: sweep;
}

@keyframes sweep {
  from {
    transform: translateX(-1em)
  }
  to {
    transform: translateX(12.5em);
    animation-timing-function: ease-out;
  }
}

이것이 모션 디자이너나 애니메이션 타이밍에 익숙한 사람과 함께 작업하여 좋아 보일 때까지 조정하는 것이 좋은 이유입니다. 디자인에 따라 수직선 대신 스윕 모양의 배경 이미지로 SVG를 사용할 수도 있습니다. 많은 옵션을 사용할 수 있습니다.

작동하는 전체 코드를 보고 싶다면 Codepen은 다음과 같습니다.

Bling button ✨에서 Chen Hui Jing(@huijing)의 펜CodePen을 참조하십시오.

마무리

개인적으로 CSS로 애니메이션을 만드는 것은 정말 재미있습니다. 그리고 CSS만으로 정말 복잡한 선 애니메이션을 할 수는 없지만 대부분의 사람들이 거의 사용하지 않는 많은 애니메이션 속성이 있다는 것을 알게 되었습니다.

저는 몇 년 전에 비공식 Talk.CSS 마스코트인 Kittencorn을 애니메이션으로 만들려고 했을 때야 그것들을 깊이 발견했습니다. 나는 그것을 Figuring out CSS animation properties with a magic kittencorn에 썼습니다.

하지만 할 수 있는 일이 정말 많습니다. 모든 사람이 CSS 애니메이션 속성을 더 많이 가지고 놀도록 적극 권장합니다. 하고 싶은데 할 수 없는 일이 있다면 CSSWG Github 저장소에서 토론에 참여할 수도 있습니다. web-animations-1 및 web-animations-2 태그가 지정된 문제가 많이 있습니다.

속성은 우리가 멋지게 요청할 때 실현되지만, 우리가 속성을 사용하지 않고 그것에 대해 이야기하지 않는다면 브라우저 공급업체가 우리가 속성을 원한다는 것을 어떻게 알 수 있을까요? 즐겁게 탐험하세요!ヾ(＾ᴗ＾)ノ