2021-07-30 (109일차) css animation, 애니메이션, keyframes

  167강 ~ 168강 (애니메이션 기초,  floating효과)  

  GSAP와 스크롤트리거 11강~12강 

  php 연습시간  

 

 

※ 구글에서 www css animation 검색하면 animation에 대한 정보가 나온다.

 

- css animation 사용방법

  anmation-name으로 애니메이션 이름 지정 후,

  keyframes로 움직이게 하는 원리

 

anmation-duration : ?s; = ?초 동안 움직이게 하기

 

anmation-play-state : paused; = 정지 상태

anmation-play-state : running; = 작동 상태

 

animation-fill-mode : forwards; = 애니메이션 작동 후 , 끝난 그 위치에 머물게 함

 

animation-iteration-count : ?; = 애니메이션 작동횟수 ?회 지정

animation-iteration-count : infinite; = 애니메이션 무한반복

 

animation-delay : ?s; = ?초 후에 애니메이션 시작

---

- 이미지가 화면을 따라오게 하는 방법

  jquery와 gsap 가져오기

  

  section 안에 div 2개  만들기

    div-1 > img : 움직일 이미지

    div-2 : 고정시켜놓을 텍스트

html

rangeFixed 수정하기