Animation

Animation

animation : name | duration | timing-fuction | delay | iteration | direction | fill-mode | play-state

종류 예시
animation-name @keyframe에 지정된 이름을 설정합니다.
animation-duration 애니메이션이 실행되는 시간을 설정합니다.
animation-timing-function 애니메이션 키프레임 움직임을 설정합니다.
animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다.
animation-iteration 애니메이션 반복 횟수를 설정합니다.
animation-derection 애니메이션 방향을 설정합니다.
animation-fill-mode 애니메이션 끝나고 난 뒤 어떤 값을 적용할지 설정합니다.
animation-play-state 애니메이션 실행 상태를 설정합니다.

Transition

transition : property | duration | timing-fuction | delay

종류 예시
transition-property 트렌지션을 적용할 CSS 속성 대상을 설정합니다.
transition-druation 트렌지션 작동시간을 설정합니다.
transition-timing-function 트렌지션 움직임 효과를 설정합니다.
transition-delay 트렌지션이 시작되기 전까지 시간을 설정합니다.

Timing-fuction

종류 예시
linear 일정한 간격으로 설정합니다.
ease 처음에는 서서히 가속하고 마지막 부분에서 급격히 감속합니다.
ease-in 처음에는 천천히 시작하고 마지막에 가속합니다.
ease-out 처음에는 최대 속도로 시작하고 마지막에 감속합니다.
ease-in-out 처음에는 제로 속도로 시작하고, 중간 지점에서 최고 속도로 움직이고, 마지막 부분에서 서서히 감속합니다.
step-start 애니메이션을 시작점에서 설정합니다.
step-end 애니메이션을 끝점에서 설정합니다.
steps(int, start/end) 애니메이션을 단계별을 설정합니다.
cubic-bezier(n,n,n,n) 버지니아 곡선 값을 만들어서 설정합니다.

Animation-timing-function1 Click

linear
ease
ease-in
ease-out
ease-in-out
.circle1.show{animation: move 2s 1 linear;}
.circle2.show{animation: move 2s 1 ease;}
.circle3.show{animation: move 2s 1 ease-in;}
.circle4.show{animation: move 2s 1 ease-out;}
.circle5.show{animation: move 2s 1 ease-in-out;}

@keyframes move{
0%{left: 0%;}
50%{left: calc(100% - 80px);}
100%{left: 0%;}
}

Animation-timing-function2 Click

step-start
step-end
steps(4,start)
steps(4,end)
steps(10,start)
steps(10,end)
.circle6.show {
    animation: move 3s 1 step-start;
}

.circle7.show {
    animation: move 3s 1 step-end;
}

.circle8.show {
    animation: move 3s 1 steps(4, start);
}

.circle9.show {
    animation: move 3s 1 steps(4, end);
}

.circle10.show {
    animation: move 3s 1 steps(10, start);
}

.circle11.show {
    animation: move 3s 1 steps(10, end);
}

See the Pen Animation Steps by 김용태 (@sdw6545) on CodePen.

Animation--timing-function:cubic-bezierClick

cubic-bezier(0,0,0,0)
cubic-bezier(1,0,0,1)
cubic-bezier(0,.6,.2,.97)
cubic-bezier(0,.6,.49,1.79)
cubic-bezier(1,-0.85,.49,1.79)
.circle12.show {
    animation: move 3s 1 cubic-bezier(0,0,0,0);
}

.circle13.show {
    animation: move 3s 1 cubic-bezier(1,0,0,1);
}

.circle14.show {
    animation: move 3s 1 cubic-bezier(0,.6,.2,.97);
}

.circle15.show {
    animation: move 3s 1 cubic-bezier(0,.6,.49,1.79);
}

.circle16.show {
    animation: move 3s 1 cubic-bezier(1,-0.85,.49,1.79);
}

Animation-delayClick

cubic-bezier(0,.6,.2,.97) 0.1s;
cubic-bezier(0,.6,.2,.97) 0.2s;
cubic-bezier(0,.6,.2,.97) 0.3s;
cubic-bezier(0,.6,.2,.97) 0.4s;
 .circle17.show {animation: move 3s 10 cubic-bezier(0,.6,.2,.97) 0.1s;}
.circle18.show {animation: move 3s 10 cubic-bezier(0,.6,.2,.97) 0.2s;}
.circle19.show {animation: move 3s 10 cubic-bezier(0,.6,.2,.97) 0.3s;}
.circle20.show {animation: move 3s 10 cubic-bezier(0,.6,.2,.97) 0.4s;}

Animation-dierction normal reverse alternate alternate-reverse

circle21
.sBox.s5 {height: 500px;}
.circle21.normal {animation: move2 3s 10 ease normal;}
.circle21.reverse {animation: move2 3s 10 ease reverse;}
.circle21.alternate {animation: move2 3s 10 ease alternate;}
.circle21.alternate-reverse {animation: move2 3s 10 ease alternate-reverse;}
@keyframes move2 {
    0%{left: 0; top: 0;}
    25%{left: calc(100% - 80px) ; top: 0;}
    50%{left: calc(100% - 80px) ; top: calc(100% - 80px);}
    75%{left:0; top: calc(100%-80px);}
    100%{left:0; top:0;}
}

Animation-iteration-count start

circle22
circle23
circle24
circle25
.circle22.show {animation: move 2s ease 1;}
.circle23.show {animation: move 2s ease 2;}
.circle24.show {animation: move 2s ease 3;}
.circle25.show {animation: move 2s ease infinite;}

Animation-play-state running paused

circle26
circle27
circle28
circle29
.sBox.s7 {
    height: 500px;
}

.sBox.s7>div.running {
    animation: move2 3s 10 ease;
    animation-play-state: running;
}

.sBox.s7>div.paused {
    animation: move2 3s 10 ease;
    animation-play-state: paused;
}

Animation-play-state bounce rubberBand hinge zoomInRight rollIn fadeOutTopRight

circle30
circle31
circle32
circle33
circle34
circle35
circle36
circle37
circle38
circle39
.sBox.s8 {
    height: 500px;
    display: flex;
    align-items: center;
}

.sBox.s8>div {}

.sBox.s8>div.bounce {
    animation: bounce 1s 10 ease;
}

.sBox.s8>div.rubberBand {
    animation: rubberBand 1s 10 ease;
}

.sBox.s8>div.hinge {
    animation: hinge 2.5s 10 ease;
}

.sBox.s8>div.zoomInRight {
    animation: zoomInRight 2s 10 ease;
}

.sBox.s8>div.rollIn {
    animation: rollIn 1s 10 ease;
}
.sBox.s8>div.fadeOutTopRight {
    animation: fadeOutTopRight 1s 10 ease;
}


@keyframes bounce {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0) scaleX(3);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0) scaleX(1);
    }

    75% {
        transform: translate3d(-10px, 0, 0) scaleX(0.98);
    }

    90% {
        transform: translate3d(5px, 0, 0) scaleX(0.995);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes hinge {
    0% {
        animation-timing-function: ease-in-out;
    }

    20%,
    60% {
        transform: rotate3d(0, 0, 1, 80deg);
        animation-timing-function: ease-in-out;
    }

    40%,
    80% {
        transform: rotate3d(0, 0, 1, 60deg);
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.animate__zoomInRight {
    animation-name: zoomInRight;
}

@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__rollIn {
    animation-name: rollIn;
}

@keyframes fadeOutTopRight {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(100%, -100%, 0);
    }
}

.animate__fadeOutTopRight {
    animation-name: fadeOutTopRight;
}