웹다이어리

Animation

종류	예시
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)	버지니아 곡선 값을 만들어서 설정합니다.

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%;}
}

step-start

step-end

steps

.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 gOadbKK by HyunJi (@ahjee12) on CodePen.

cubic-bezier(0,.54,.08,1.05)

cubic-bezier(0,.54,1,1.59)

cubic-bezier(0,.78,1,.19)

cubic-bezier(0,1.66,.32,.75)

cubic-bezier(0,1.66,.28,-0.49)

cubic-bezier(.8,-0.01,1,.19)

.circle12.show{animation: move 3s 10 cubic-bezier(0,.54,.08,1.05);}
.circle13.show{animation: move 3s 10 cubic-bezier(0,.54,1,1.59);}
.circle14.show{animation: move 3s 10 cubic-bezier(0,.78,1,.19);}
.circle15.show{animation: move 3s 10 cubic-bezier(0,1.66,.32,.75);}
.circle16.show{animation: move 3s 10 cubic-bezier(0,1.66,.28,-0.49);}
.circle17.show{animation: move 3s 10 cubic-bezier(.8,-0.01,1,.19);}

cubic-bezier(0,.54,.08,1.05)

cubic-bezier(0,.54,1,1.59)

cubic-bezier(0,.78,1,.19)

cubic-bezier(0,1.66,.32,.75)

cubic-bezier(0,1.66,.28,-0.49)

cubic-bezier(.8,-0.01,1,.19)

.circle18.show{animation: move 3s 10 cubic-bezier(0,.54,.08,1.05) 0.1s;}
.circle19.show{animation: move 3s 10 cubic-bezier(0,.54,1,1.59) 0.2s;}
.circle20.show{animation: move 3s 10 cubic-bezier(0,.78,1,.19) 0.3s;}
.circle21.show{animation: move 3s 10 cubic-bezier(0,1.66,.32,.75) 0.4s;}
.circle22.show{animation: move 3s 10 cubic-bezier(0,1.66,.28,-0.49) 0.5s;}
.circle23.show{animation: move 3s 10 cubic-bezier(.8,-0.01,1,.19) 0.6s;}

circle24

.sBox {
    height: 500px;
}

.circle24.normal {
    animation: move2 3s 10 cubic-bezier(.8, -0.01, 1, .19) normal;
}

.circle24.reverse {
    animation: move2 3s 10 cubic-bezier(.8, -0.01, 1, .19) reverse;
}

.circle24.alternate {
    animation: move2 3s 10 cubic-bezier(.8, -0.01, 1, .19) alternate;
}

.circle24.alternate-reverse {
    animation: move2 3s 10 cubic-bezier(.8, -0.01, 1, .19) 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;
    }
}

.circle25.show {
    animation: move 2s ease 1;
}

.circle26.show {
    animation: move 2s ease 2;
}

.circle27.show {
    animation: move 2s ease 3;
}

.circle28.show {
    animation: move 2s ease infinite;
}

circle26

.sBox.s7 {
    height: 500px;
}

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

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

circle30

참고 사이트 animate.style/#documentation

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

@keyframes bounce {

    from,
    11.1%,
    to {

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

    22.2% {

        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {

        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {

        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {

        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {

        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {

        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {

        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

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

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

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

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

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

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

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

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

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

@keyframes wobble {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

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

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

@keyframes backInDown {
    0% {
        -webkit-transform: translateY(-1200px) scale(0.7);
        transform: translateY(-1200px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        -webkit-transform: translateY(0px) scale(0.7);
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

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

@keyframes backOutDown {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    20% {
        -webkit-transform: translateY(0px) scale(0.7);
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        -webkit-transform: translateY(700px) scale(0.7);
        transform: translateY(700px) scale(0.7);
        opacity: 0.7;
    }
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

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

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

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

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

CSS ANIMATIONv1.0 </doc>

Animation

Animation

Transition

Timing-fuction

Animation-timing-function1Click

Animation-timing-function1Click

Animation-timing-function : cubic-bezierClick

Animation-delayClick

Animation-direction normal reverse alternate alternate-reverse

Animation-iteration-countClick

Animation-play-state running paused

Animation-effect bounce rubberband wobble backInDown backOutDown fadeIn fadeInDown fadeOutTopRight