css transition / animation

transition

transition-property​ ​:

css 속성 이름을 지정합니다. 표기 )​ transition-property : width;

 

transition-duration ​:

이벤트 발생 후 동안 재생할지 지정합니다.
표기 )​ transition-duration : 1s

 

transition-timing-function ​:

이벤트 발생후 재생 속도를 지정합니다.
표기 )​ transition-timing-function : ​esae

 

transition-delay​ ​:

몇 초 후에 이벤트가 발생할지 지정합니다. 표기 )​ transition-delay : .5s

 

 

참고 사이트 :

https://www.w3schools.com/cssref/css3_pr_transition.asp

CSS transition Property

 

 

 

animation

animation​ ​:

모든 animation 속성을 다중 적용한다. 표기 )​ animation : rint 2s linear none infinite alternate;

 

animation-delay​ ​:

이벤트 발생 후 몇 초 후에 재생할지 지정합니다. 표기 )​ animation-delay : .5s

 

animation-direction​ ​:

애니메이션 진행 방향을 설정합니다. 표기 )​ animation-direction : ​alternate

 

animation-duration​ ​:

이벤트 발생 후 몇 초 동안 재생할지 지정합니다.
표기 )​ animation-duration : .5s

 

animation-iteration-count​ ​:

이벤트 발생 후 몇 번 재생할지 지정합니다.
표기 )​ animation-iteration-count : ​infinite

 

animation-name​ ​:

키프레임 이름을 지정합니다. 표기 )​ animation-name : test

 

animation-play-state​ ​:

이벤트 재생 상태를 지정합니다. 표기 )​ animation-play-state : pause

 

animation-timing-function​ ​:

이벤트 발생 후 재생속도를 지정합니다.
표기 )​ animation-timing-function : easing

 

animation-fill-mode​ ​:

애니메이션이 실행 전 또는 실행 후 스타일을 채워줌
표기 )​ animation-fill-mode : forwards

 

참고사이트:

https://www.w3schools.com/css/css3_animations.asp

CSS Animations

 

 

background gradient

linear :

https://developer.mozilla.org/ko/docs/Web/CSS/linear-gradient

radiar :

http://tcpschool.com/css/css3_module_radialGradients