css / animation

animation (키프레임) 

시작(0%) - 끝(100%)

2가지 작성(css에서 작성)

1. 모션에 관한 내용

@keyframes 애니메이션명ex)test {
0% {} 괄호안에는 어떤 애니메이션이 들어가는지
<서서히 나타나게하고싶으면 opacity:0; 
100% {} opacity:1; 이렇게 시작과 끝에 각각 넣어줌>
}

@keyframes ani{
0% { transform: translate (0,0);}
100% { transform: translate (100px,100px);}
}

2. 모션을 동작시키는 내용 

p { animation: test 1s; } 필수 기입 2가지 - 애니메이션명과 동작시간 
h1 { animation: test 3s; } 이렇게 무제한으로 기입할수있음  

div { animation: ani 5s; } 

*반복횟수 속성 
{ animation: ani 5s infinite;}- 무한반복 infinite말고 3 이렇게적으면 3번 반복 

animation 속성은 delay, direction, fill-mode 등 다양하지만 
저 세가지가 많이 쓰임 


0% 
25%
50%
75%
100%
이걸 10s로 했을때 100프레임이라 치고  0%에서 25%가는데 2.5초
0% 40% 50% 이렇게 하면 시작은 느리게되는거지 
프레임 숫자가 작을수록 효과가 빠름

 

0% 100%는 무조건 들어가는건데 내가 주고싶은 효과에 따라 키프레임을 추가로 넣는다