키프레임실전퍼블리싱3 CSS code error check!

좋은 강의 감사드립니다. 키프레임 실전 퍼블리싱 3편 CSS에서 circle rotation 이 잘 안되서 코드를 올립니다.어디가 잘못됬는지 한번 봐 주시면 합니다. 감사합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>더블보더 애니메이셩 만들기</title>
    <link rel="stylesheet" href="keyframe_ani.css">
    
 </head>
<body>
    <div class="square">
        <span></span>
        <span></span>
        <span></span>
        
    </div>
</body>
</html>


@import url('https://fonts.googleapis.com/css? family=Raleway&display=swap');

body{
    font-family: 'Raleway', sans-serif;
    line-height: 1.5rem;
    margin: 0;
    font-weight: 300;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
a {
    text-decoration: none;
}
.square {
    width: 400px;
    height: 400px;
    position: relative;

}
.square span {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius:40% 60% 65% 30% / 40% 60% 68% 35%;
    transition:0.5s;
}
.square:hover span {
    background-color: crimson;
    border: none;
}
.square span:nth-child(1) {
    animation: cicle 5s linear  infinite;
   }
.square span:nth-child(2) {
    animation: cicle 4s linear  infinite;
    animation-direction: reverse ;
}
.square span:nth-child(3) {
    animation: cicle 8s linear  infinite;
}
.square:hover span:nth-child(1){
    opacity: 0.3;
}
.square:hover span:nth-child(2){
    opacity: 0.6;
}
.square:hover span:nth-child(3){
    opacity: 0.8;
    
}@keyframes circle {
    0% {
    transform: rotate(0);
    }
    100% {
    transform: rotate(360deg);
    }
}

인프런 커뮤니티 질문&답변