CSS // animation

먼저 @keyFrames를 만들어줘야한다.

@keyframes change-color {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
    border-radius: 50%;
  }
}

change-color이란 이름의 애니메이션이다.

 

 

.box1 {
  animation-name: change-color;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

 

그리고 적용하고 싶은 html css에 저shape라는 애니메이션을 적용하면된다.

무한하게 1초동안 change color 애니메이션이 반복되는걸 볼수있다.

 

@keyframes change-color {
  from {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  to {
    background-color: blue;
    border-radius: 50%;
  }
}

50퍼센트 시점에서 노란색으로 변하는것도 추가할수있다

 

 

애니매이션 여러개 적용하기

.box1 {
  animation-name: change-color, change-shape;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

 

 

단축표현

.box1 {
  animation: change-color 1s infinite;
}

 

 

mdn에서 속성을 찾아보자~