(Updating) CSS 기능 아카이빙

CSS 기능

몰랐던 기능이 너무 많아 현타 와서 하는 아카이빙.

---

👀 목차 👀
1.mix-blend-mode
2.animation + keyframes
3.background-attachment
4.svg animation

---

mix-blend-mode

• 어느 요소의 컨텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정.
  • 주로 마우스 호버 인터렉션에서 씀.
  • 참고 : MDN 문서
    

---

animate & keyframes + 축약형

• 모르는 건 아닌데, 하도 까먹어서 적어둠
  • animation 축약형
    animation: animation-name / animation-duration / animation-delay / animation-iteration-count / animation-timing-function / animation-direction / fill-mode play-state;
    • animation-name : @keyframes 이름
      animation-duratuion : 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용
      animation-delay : 애니메이션을 시작하기 전 지연시간 설정
      animation-iteration-count : 반복 횟수 지정
      animation-timing-function : 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier )
      animation-direction : 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며)
      animation-fill-mode : 애니메이션 시작 / 끝 상태 제어 ( none / forwords / backwords / both )
      animation-play-state : 애니메이션 실행 중에 중지되었을 때 계속 진행하거나 멈추게 할 것인지를 지정 (running / paused)
      
      
  • keyframes 문법
    name - keyframes가 적용될 이름을 정합니다.
    0% - 시작할 때 적용될 구간
    100% - 끝날 때 적용될 구간

  @keyframes name{
     0%{ }
     100%{ }
	}

---

background-attachment

• 배경이미지의 스크롤 여부를 결정하는 css
  • scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다.
    fixed : 움직이지 않습니다.
    local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다.
    initial : 기본값으로 설정합니다.
    inherit : 부모 요소의 속성값을 상속받습니다.

---

svg animation

• step
  1. 일러스트 작업 -> stroke 상태에서 svg파일로 내보내기
  2. https://jakearchibald.github.io/svgomg/ : svg 경량화 및 코드 정리해주기
  3. css -> stroke-dasharray(점선을 만들어주는 속성), stroke-dashoffset(어디부터 시작할 것인지 정해주는 속성) 값을 조절하여 애니메이션 입혀주기