(CSS) 애니메이션

css animation

• 요소의 현재 스타일을 다른 스타일로 변환

@keyframe

• 시작: 0%, from
• 과정: 1%, 3%, 10%, ..
• 끝: 100%, to
• 0% 5% 50% ... 100%
  장면1 장면2 장면3 끝 장면
• animation-name: 애니메이션의 이름을 설정
• animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정
  • forwards: 애니메이션 키프레임이 완료 되었을 때 마지막 프레임을 유지
• animation-direction: 애니메이션의 진행 방향을 정하는 속성
  • reverse: 반대 순서로 진행
  • alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행
  • reverse-alternate: 반대 순서로 진행했다가 다시 정해진 순서로 진행
• animation-duration: 애니메이션이 일어나는 시간을 설정
• animation-iteration-count: 애니메이션이 몇 번 반복할지 설정
  • infinite: 무한반복
  • 숫자: 숫자만큼 반복

 

CSS
    .box {
        margin-top: 100px;
        margin-left: 100px;
        padding: 20px;
        height: 60px;
        animation-name: moving;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes moving {
        from {
            width: 200px;
            background-color: gold;
            opacity: 0.5;
            transform: rotate(0deg);
        }
        to {
            width: 400px;
            background-color: greenyellow;
            opacity: 1;
            transform: rotate(360deg);
        }
    }

HTML
    <h2>animation1</h2>
    <div class="box">
        <h3>CSS3 Animation</h3>
    </div>