21.06.08

liquid를 사용하면서 html css js 까지 다양하게 배우고 있는데 

 

지금부터라도 차근차근 확인했던걸 복습하는것으로 써볼려고 합니다.

 

오늘은 css Transtions 와Animations 를 사용해 input label을 수정하는 작업을 하였다.

 

기본적으로 그냥 위치만 옴기는 것 혹은 회전시키는것은 transtions에 다있는것 같다 

 

anmations와 transtions를 조합해 이동 및 변화 에니메이션을 주고

 

그 외 사라지거나 확대 같은 것들은 또 다른 옵션이 있더라

 

방법 1

@keyframes trans_name{

    from{    }

    to{    }

}

방법 2

@keyframes trans_name{

    0%{    }

    <betwwen>{    }

    100%{    }

}

두가지 방법으로 변형할 것을 만들고 

 

적용하고 싶은 테크의 CSS에다 

기본 두가지 적용해야된다.

animation-name: trans_name;
animation-duration: 1s;

 

 

animations 의 속성들을 나열해보자.

 

animation-name : 이름                               #필수항목

animation-duration : *s (완료시간)                      #필수항목

animation-delay : *s (몇초 후 시작)

animation-iteration-count : 0 반복횟수 & 무한재생은 'infinite' 

animation-direction : 재생의 처음부터할것인지 마지막부터 할것인지

• normal : 0% - 100% reset 기본값
• reverse : 100% - 0% reset
• alternate : 0% - 100% - 0% reset
• alternate-reverse : 100% - 0% - 100% reset

animation-timing-function : 음...퍼센트로하면 상관없을것도 같은

• linear : 기본값
• ease : 
• ease-in :
• ease-out : 
• ease-in-out : 

animation-fill-mode : 에니메이션이 종료되고 형태를 어떤 유지할것인가를 본다.

• none : 기본값 설명으론 모르겠다...
• forwards : 마무리는 첫 프레임설정으로 
• backwards : 마무리 설정으로 고정
• both : 이건 적용해봐야알것 같다.

 

여기에서 봤을때 https://css-tricks.com/almanac/properties/a/animation/

animation | CSS-Tricks

animation-play-state는 무었인지 실험해봐야겠다.

• paused
• running

다른 사라지기나 그런 속성은 어디서 찾을까 

 

 

기본 출처는 여기서 학습하였으며 https://www.w3schools.com/

구글링을 통해 다양한곳에서 퍼오고