CSS3 keyframes动画：错时摇晃渐次加载

stagger animation，常用于页面列表元素的加载动画。

css3, animation, stagger

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3307
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

[data-state="Bad"] {
    --duration: 800ms;
    --delay: 300ms;
    --color: #FAE5E5;
    --faded-color: rgba(238, 159, 159, 0.3);
}
[data-state="Good"] {
    --duration: 400ms;
    --delay: 100ms;
    --color: #E7EEF8;
    --faded-color: rgba(172, 196, 231, 0.3);
}
#app {
    width: 100%;
    padding: 2rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--color);
}
#app:before {
    content: attr(data-state);
    font-family: monospace;
    margin-bottom: .5em;
    opacity: 0.8;
}
.state {
    font-size: 1.5rem;
    margin: 0 0 1rem;
    text-align: center;
}
/* ---------------------------------- */

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-width: 20rem;
    color: #000;
    background-color: #fff;
    box-shadow: 0 1rem 2.5rem var(--faded-color);
    border-radius: 1vmin;
    padding: 1rem;
    z-index: 2;
}
li {
    border-radius: .4rem;
    padding: 1rem;
    background-color: var(--color);
    margin-bottom: .5rem;
    -webkit-animation: enter var(--duration) cubic-bezier(0.5, 0, 0.2, 1) both;
    animation: enter var(--duration) cubic-bezier(0.5, 0, 0.2, 1) both;
}
li:last-child {
    margin-bottom: 0;
}
li:nth-child(1) {
    -webkit-animation-delay: calc(1 * var(--delay));
    animation-delay: calc(1 * var(--delay));
}
li:nth-child(2) {
    -webkit-animation-delay: calc(2 * var(--delay));
    animation-delay: calc(2 * var(--delay));
}
li:nth-child(3) {
    -webkit-animation-delay: calc(3 * var(--delay));
    animation-delay: calc(3 * var(--delay));
}
li:nth-child(4) {
    -webkit-animation-delay: calc(4 * var(--delay));
    animation-delay: calc(4 * var(--delay));
}
li:nth-child(5) {
    -webkit-animation-delay: calc(5 * var(--delay));
    animation-delay: calc(5 * var(--delay));
}
@-webkit-keyframes enter {
    from {
        opacity: 0;
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
}
@keyframes enter {
    from {
        opacity: 0;
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
}
p {
    font-size: .65rem;
    line-height: 1.5;
    margin: 0;
    font-weight: bold;
    opacity: 0.3;
    font-family: monospace;
}
.title {
    font-weight: bold;
    opacity: 0.5;
    margin-bottom: .5rem;
    font-family: monospace;
}
/* ---------------------------------- */

*,
*:before,
*:after {
    box-sizing: border-box;
    position: relative;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

HTML

<div id="app" data-state="Good">
    <ul>
        <li>
            <div class="title">Some list item</div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ipsa odit accusantium, facilis blah blah.</p>
        </li>
        <li>
            <div class="title">Some list item</div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ipsa odit accusantium, facilis blah blah.</p>
        </li>
        <li>
            <div class="title">Some list item</div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ipsa odit accusantium, facilis blah blah.</p>
        </li>
        <li>
            <div class="title">Some list item</div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ipsa odit accusantium, facilis blah blah.</p>
        </li>
        <li>
            <div class="title">Some list item</div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ipsa odit accusantium, facilis blah blah.</p>
        </li>
    </ul>
</div>
<div id="app" data-state="Bad">
    <ul>
        <li>
            <div class="title">Some list item</div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ipsa odit accusantium, facilis blah blah.</p>
        </li>
        <li>
            <div class="title">Some list item</div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ipsa odit accusantium, facilis blah blah.</p>
        </li>
        <li>
            <div class="title">Some list item</div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ipsa odit accusantium, facilis blah blah.</p>
        </li>
        <li>
            <div class="title">Some list item</div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ipsa odit accusantium, facilis blah blah.</p>
        </li>
        <li>
            <div class="title">Some list item</div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ipsa odit accusantium, facilis blah blah.</p>
        </li>
    </ul>
</div>

stagger animation，常用于页面列表元素的加载动画。

css3, animation, stagger

编辑器支持Emmet

快捷键

stagger animation，常用于页面列表元素的加载动画。

css3, animation, stagger

CSS3 Minecraft 带贴图的3D立方体加载动画

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：