이 글은 인프런의 "HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)" 강좌를 들으며 정리한 내용이다.

사각형 임의로 찌그러뜨리기

슬래시 이용함.

.square span {
  position: absolute;
  width: inherit;
  height: inherit;
  border: 1px solid #fff;
  border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%;//사각형 찌그러뜨림.
  transition: 0.5s;
}

애니메이션 역방향 설정

reverse 설정하면 됨

.square span:nth-child(2) {
  animation: circle 4s linear infinite;
  animation-direction: reverse;
}