SOURCE

<div class="box">
    <img class="rotate" src="https://img.mukewang.com/5b8558e40001a7e600640064.jpg" />
</div>
<section>
    <h1>jump & dance</h1>
    <h2>动画方面相关知识点</h2>
    <em>transform、transition、animation三者的区别</em>
    <p>transform是变换，并不产生动画效果，transition与animation都是通过属性的变化实现动画效果，不同在于transition不能显示的控制动画过程中每一帧的状态，animation则可以，除此之外，transtion需要事件触发，animation可以自动开始不需要触发。</p>
    <h3>transform</h3>
    <p>transform在3D变化时的几个注意点:</p>
    <ul>
        <li>scale(-1, 1)可以实现正反的反转</li>
        <li>transform-style: preserve-3d 是实现3d变换的关键，使其内部嵌套元素在3d空间中呈现</li>
    </ul>
    <h3>animation属性</h3>
    <ul>
        <li>name: 动画名</li>
        <li>duration： 持续时间</li>
        <li>timing-function: 动画函数</li>
        <li>delay: 延时开始时间</li>
        <li>interation-count： 重复次数/ 取值： n/infinite</li>
        <li>fill-mode: 动画不播放时的应用模式: / 取值： none不改变默认状态/forwards保持最后一个属性值/backwards delay的那段时间内保持初始值状态/both同时使用forwards和backwards</li>
        <li>direction: 动画方向 / 取值：alternate动画应该轮流反向播放。</li>
        <li>play-state: 运行、暂停 / 取值： running/paused</li>
    </ul>
    <h3>bezier函数</h3> 
    <p>参考 <a href="http://yisibl.github.io/cubic-bezier">http://yisibl.github.io/cubic-bezier</a></p>

</section>

html, body {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    position: relative;
    animation: jump .5s linear infinite alternate;
}

.rotate {
    animation: dance 10s cubic-bezier(.645,.045,.355,1) .5s infinite;
}

section {
    max-width: 1000px;
    margin-left: 100px;
}

@keyframes jump {
    0% {
        transform: translateY(-180px) scaleY(1);
        animation-timing-function: cubic-bezier(.895,.03,.685,.22);
    }
        80% {
        transform: scaleY(2) scaleX(.6);
    }
        90% {
        transform: scaleY(.4) scaleX(1);
    }
        100% {
        transform: scaleY(.25) scaleX(2);
    }
}

@keyframes dance {
    0% {
        transform: rotate(0deg);
    }
    21% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }
    28% {
        transform: rotate(-1turn);
    }
    71% {
        transform: rotate(-1turn);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }
    78% {
        transform: rotate(1turn);
    }
    100% {
        transform: rotate(1turn);
    }
}