중간보고
animation과 @keyframes는 애니메이션 효과를 줄 수 있다.
animation
animation-name : 만들어줄 애니메이션의 이름 입력
animation-duration : 만들어줄 애니메이션의 지속시간(.2s)
animation-timing-function : 만들어줄 애니메이션이 움직이는 속도
(ease: 기본값 느리게-빠르게-느리게 linear:느리게 steps(숫자):쪼갠 수대로)
animation-delay : 만들어줄 애니메이션의 지연시간
animation-iteration-count : 만들어줄 애니메이션의 반복
animation-direction : 만들어줄 애니메이션의 방향
(normal:기본값,정방향 reverse:역방향 alternate:왕복)
animation-play-state : 만들어줄 애니메이션의 재생,멈춤
(running:기본값,재생중 paused:멈춤 주로 해당 태그를 :hover시 사용)
animation-fill-mode: 만들어줄 애니메이션의 시작 또는 종료지점의 위치지정
(none:기본값 forwards: backwards: both:forwards+backwards)
@keyframe
키프레임은 애니메이션을 적용할 요소의 animation-name 을 정의하고 그 키프레임 코드 블럭에 재생할 프레임별 시간 비율을 작성한다.
0% : 애니메이션의 시작 프레임이다.
100% : 애니메이션의 마지막 프레임이다.
from : 애니메이션의 시작 프레임이다. 0% 와 같다.
to : 애니메이션의 마지막 프레임이다. 100% 와 같다.
일일보고
부족한 점: @keyframe을 처음 접해보아서 처음할 때 익숙하지 않았다.
스스로 시도해본 점: @keyframe을 통해서 다양한게 아무거나 시도를 많이 해보았다.
회고: 기존에 알던 것에서 @keyframe을 알게 되었다.
새로운 기술이 계속해서 나오고 계속해서 공부를 해야갰다는 생각이 들었다.
