CSS3 过渡动画（Transitions）测试

可通过顶部的JSON模式开关控制动画播放。

css3, 基础知识

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.transition-1 {
    transition: linear 500ms;
}
.transition-2 {
    transition: linear 200ms;
}
.transition-3 {
    transition: ease 300ms;
}
.transition-4 {
    transition: ease-in 300ms;
}
.transition-5 {
    transition: ease-out 300ms;
}
.transition-6 {
    transition: cubic-bezier(0.05, 0.69, 0.14, 1) 500ms;
}
.json {
    background: #252b3a;
    box-sizing: border-box;
    color: #fff;
    flex: 0 0 50%;
    font-family: monospace;
    font-size: 120%;
    margin-right: -50%;
    padding: 20px;
    transition-property: all;
}
.json--on {
    margin-right: 0;
}
.form {
    flex: 1;
    overflow: scroll;
    padding: 20px;
}
.form .fieldset {
    clear: both;
    margin: 0 0 40px;
}
.form .fieldset__options label {
    margin-right: 10px;
}
.form .fieldset__options label input {
    margin-right: 5px;
    width: auto;
}
.form label {
    display: block;
    font-size: .8em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.form input {
    background: #f2f2f2;
    border: 2px solid transparent;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
}
.form input:focus {
    border: 2px solid #9351e5;
    outline: none;
}
body {
    color: #333;
    font-family: -apple-system, "Helvetica Neue";
    height: 100%;
    line-height: 1.4;
}
h3 {
    margin-bottom: 0;
}
p,
ul,
ol {
    color: #555;
    font-size: 14px;
}
code {
    background-color: #f9f2f4;
    border-radius: 4px;
    color: #c7254e;
    font-size: 90%;
    padding: 2px 4px;
}
header {
    background: #f9f9f9;
    border-bottom: 1px solid #eaebed;
    height: 20px;
    position: fixed;
    padding: 20px;
    text-align: right;
    width: 100%;
}
main {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    padding-top: 60px;
}
.toggle {
    margin-left: -999px;
    visibility: hidden;
}
.toggle + label {
    border-radius: 60px;
    cursor: pointer;
    float: left;
    font-size: 12px;
    height: 10px;
    outline: none;
    padding: 6px;
    position: relative;
    text-indent: 40px;
    user-select: none;
}
.toggle + label:before,
.toggle + label:after {
    content: "";
    bottom: 1px;
    display: block;
    left: 1px;
    position: absolute;
    top: 1px;
    width: 40px;
}
.toggle + label:before {
    background-color: #f1f1f1;
    border: 1px solid #eaebed;
    border-radius: 60px;
    right: 1px;
    transition: background 0.4s;
}
.toggle + label:after {
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
    width: 20px;
}
.toggle:checked + label:before {
    background-color: #8ce196;
}
.toggle:checked + label:after {
    margin-left: 20px;
}

HTML

<main>
    <div class="form">
        <div class="fieldset fieldset__options">
            <label>Select a transition</label>
            <label>
                <input type="radio" name="transition" value="1" checked="checked"><code>linear 500ms</code>
            </label>
            <label>
                <input type="radio" name="transition" value="2"><code>linear 200ms</code>
            </label>
            <label>
                <input type="radio" name="transition" value="3"><code>ease 300ms</code>
            </label>
            <label>
                <input type="radio" name="transition" value="4"><code>ease-in 300ms</code>
            </label>
            <label>
                <input type="radio" name="transition" value="5"><code>ease-out 300ms</code>
            </label>
            <label>
                <input type="radio" name="transition" value="6"><code>cubic-bezier(.05, .69, .14, 1) 500ms</code>
            </label>
            <label>
                <input type="radio" name="transition" value="custom">Custom</label>
        </div>

<div class="fieldset">
            <label for="id">Custom transition (timing speed)</label>
            <input type="text" placeholder="e.g. cubic-bezier(.03,.43,.95,.66) 500ms" name="custom-transition" value="cubic-bezier(.03,.43,.95,.66) 500ms">
        </div>

<div class="fieldset">
            <label for="id">Some other field</label>
            <input type="text">
        </div>

<h3>What is this?</h3>
        <p>Experimenting with different transition speeds and methods for toggling in JSON configuration mode for a form. Prototype for <a href="https://mesosphere.com">Mesosphere</a> where we have a JSON option in DC/OS to configure and launch Docker containers.</p>
        <p>Some good reading:
            <ul>
                <li><a href="https://valhead.com/2016/05/05/how-fast-should-your-ui-animations-be/">How fast should your UI animations be?</a>
                </li>
                <li><a href="https://www.smashingmagazine.com/2016/08/css-animations-motion-curves/">CSS Animation with motion curves</a>
                </li>
                <li><a href="https://blog.alexmaccaw.com/css-transitions">All you need to know about CSS transitions</a>
                </li>
                <li><a href="https://cubic-bezier.com/#.17,.67,.83,.67">Cubic Bezier tool</a>
                </li>
            </ul>
        </p>
    </div>

可通过顶部的JSON模式开关控制动画播放。

css3, 基础知识

编辑器支持Emmet

快捷键

可通过顶部的JSON模式开关控制动画播放。

css3, 基础知识

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

使用H5动画演示CSS3变换原点（transform-origin）工作原理

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：