#4-4 Animations

 

 

#4-4 Animations

 

 

만약 내가 상자에 rotate-scale을 hover할 필요없이 계속 발생하기를 원한다면??

 

->> 애니메이션을 생성하면 됩니당~~~

 

 

일단, 애니메이션 이름을 지어야함.

 

@keyframe 은 css로 하여금 내가 애니메이션을 생성했다는 것을 알려준다.

 

 

@keyframe (애니메이션이름) {

    from {}

    to {}

}

 

.box{

  animation: 1.5s  애니메이션 이름 ease-in-out;

}



@keyframes scaleAndRotateSquare{
  form{
    transform:none;
  }
  to{
    transform: rotate(1turn) scale(.5, .5);
  }
}

 

 

이걸 무한반복 하고 싶다면??

 

.box{

  animation: 1.5s  애니메이션이름 infinite ease-in-out;

}



@keyframes scaleAndRotateSquare{
  form{
    transform:none;
  }
  to{
    transform: rotate(1turn) scale(.5, .5);
  }
}

 

여러가지 상태변화를 주고 싶다면, 3단계로 분리해서

0%- 50% - 100%로 변화를 줄 수 있음. 

 

이 단계는 내 맘대로 변화를 줄 수 있당.

 

.box{

  animation: 1.5s  애니메이션이름 infinite ease-in-out;

}



@keyframes scaleAndRotateSquare{
  0%{
    transform:none;
  }
  50%{
    transform: rotate(1turn) scale(.5, .5);
  }
  100%{
    transform:none;
  }
}

 

 

 

((animation-timing-function 속성))

animation-timing-function 속성은 애니메이션 효과의 시간당 속도를 설정합니다.

 

animation-timing-function 속성의 속성값으로는 다음과 같은 값을 설정할 수 있습니다.

 

1. linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.

2. ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.

3. ease-in : 애니메이션 효과가 천천히 시작됩니다.

4. ease-out : 애니메이션 효과가 천천히 끝납니다.

5. ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다.

6. cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.

 

 

---

div { animation: myShorthand 3s ease-in-out 1s 3 alternate; }

 

이런식으로 애니메이션을 한줄로 축약해서 쓸 수 있음.

 

animation: 이름 duration timing-function delay iteration-count direction;   (순서는 바뀌어도 됨)