CSS3 Grid离散宽度调整动画和Flexbox平滑扩展动画

使用css3 grid-column和flex-grow实现的列宽度调整动画比较。

css3, grid, flexbox

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*  Pardon my functional CSS  */
/* (still a work in progress) */
/*----------- GRID -----------*/

.grid {
    display: -ms-grid;
    display: grid
}
.of-12-cols {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr)
}
.ga1 {
    -webkit-animation: 4s grid-bounce infinite;
    animation: 4s grid-bounce infinite
}
.ga2 {
    -webkit-animation: 4s grid-bounce-2 infinite;
    animation: 4s grid-bounce-2 infinite
}
.ga3 {
    -webkit-animation: 4s grid-bounce-3 infinite;
    animation: 4s grid-bounce-3 infinite
}
.ga4 {
    -webkit-animation: 4s grid-bounce-4 infinite;
    animation: 4s grid-bounce-4 infinite
}
.span-1 {
    -ms-grid-column: span 1;
    grid-column: span 1
}
.span-2 {
    -ms-grid-column: span 2;
    grid-column: span 2
}
.span-3 {
    -ms-grid-column: span 3;
    grid-column: span 3
}
.span-4 {
    -ms-grid-column: span 4;
    grid-column: span 4
}
.span-5 {
    -ms-grid-column: span 5;
    grid-column: span 5
}
.span-6 {
    -ms-grid-column: span 6;
    grid-column: span 6
}
/*----------- FLEX -----------*/

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
.f1 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}
.f2 {
    -webkit-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2
}
.f3 {
    -webkit-box-flex: 3;
    -ms-flex-positive: 3;
    flex-grow: 3
}
.f4 {
    -webkit-box-flex: 4;
    -ms-flex-positive: 4;
    flex-grow: 4
}
.f5 {
    -webkit-box-flex: 5;
    -ms-flex-positive: 5;
    flex-grow: 5
}
.f6 {
    -webkit-box-flex: 6;
    -ms-flex-positive: 6;
    flex-grow: 6
}
.fs1 {
    -ms-flex-negative: 1;
    flex-shrink: 1
}
.fs2 {
    -ms-flex-negative: 2;
    flex-shrink: 2
}
.fs3 {
    -ms-flex-negative: 3;
    flex-shrink: 3
}
.fs4 {
    -ms-flex-negative: 4;
    flex-shrink: 4
}
.fs5 {
    -ms-flex-negative: 5;
    flex-shrink: 5
}
.fs6 {
    -ms-flex-negative: 6;
    flex-shrink: 6
}
.fb1 {
    -ms-flex-preferred-size: calc(100vw / 12);
    flex-basis: calc(100vw / 12)
}
.fb2 {
    -ms-flex-preferred-size: calc(200vw / 12);
    flex-basis: calc(200vw / 12)
}
.fb3 {
    -ms-flex-preferred-size: calc(300vw / 12);
    flex-basis: calc(300vw / 12)
}
.fb4 {
    -ms-flex-preferred-size: calc(400vw / 12);
    flex-basis: calc(400vw / 12)
}
.fb5 {
    -ms-flex-preferred-size: calc(500vw / 12);
    flex-basis: calc(500vw / 12)
}
.fb6 {
    -ms-flex-preferred-size: calc(600vw / 12);
    flex-basis: calc(600vw / 12)
}
.fa1 {
    -webkit-animation: 4s flex-bounce infinite;
    animation: 4s flex-bounce infinite
}
.fa2 {
    -webkit-animation: 4s flex-bounce-2 infinite;
    animation: 4s flex-bounce-2 infinite
}
/*----------- KEYFRAMES -----------*/

@-webkit-keyframes grid-bounce {
    0%, 100% {
        grid-column: span 3
    }
    16%,
    83% {
        grid-column: span 4
    }
    33%,
    66% {
        grid-column: span 5
    }
    50% {
        grid-column: span 6
    }
}
@keyframes grid-bounce {
    0%, 100% {
        -ms-grid-column: span 3;
        grid-column: span 3
    }
    16%,
    83% {
        -ms-grid-column: span 4;
        grid-column: span 4
    }
    33%,
    66% {
        -ms-grid-column: span 5;
        grid-column: span 5
    }
    50% {
        -ms-grid-column: span 6;
        grid-column: span 6
    }
}
@-webkit-keyframes grid-bounce-2 {
    0%, 100% {
        grid-column: span 2
    }
    16%,
    83% {
        grid-column: span 1
    }
}
@keyframes grid-bounce-2 {
    0%, 100% {
        -ms-grid-column: span 2;
        grid-column: span 2
    }
    16%,
    83% {
        -ms-grid-column: span 1;
        grid-column: span 1
    }
}
@-webkit-keyframes grid-bounce-3 {
    0%, 16%, 83%, 100% {
        grid-column: span 2
    }
    33%,
    66% {
        grid-column: span 1
    }
}
@keyframes grid-bounce-3 {
    0%, 16%, 83%, 100% {
        -ms-grid-column: span 2;
        grid-column: span 2
    }
    33%,
    66% {
        -ms-grid-column: span 1;
        grid-column: span 1
    }
}
@-webkit-keyframes grid-bounce-4 {
    0%, 33%, 66%, 100% {
        grid-column: span 2
    }
    50% {
        grid-column: span 1
    }
}
@keyframes grid-bounce-4 {
    0%, 33%, 66%, 100% {
        -ms-grid-column: span 2;
        grid-column: span 2
    }
    50% {
        -ms-grid-column: span 1;
        grid-column: span 1
    }
}
@-webkit-keyframes flex-bounce {
    0%, 100% {
        -webkit-box-flex: 3;
        flex-grow: 3;
        flex-shrink: 3;
        flex-basis: calc(300vw / 12)
    }
    50% {
        -webkit-box-flex: 6;
        flex-grow: 6;
        flex-shrink: 6;
        flex-basis: calc(600vw / 12)
    }
}
@keyframes flex-bounce {
    0%, 100% {
        -webkit-box-flex: 3;
        -ms-flex-positive: 3;
        flex-grow: 3;
        -ms-flex-negative: 3;
        flex-shrink: 3;
        -ms-flex-preferred-size: calc(300vw / 12);
        flex-basis: calc(300vw / 12)
    }
    50% {
        -webkit-box-flex: 6;
        -ms-flex-positive: 6;
        flex-grow: 6;
        -ms-flex-negative: 6;
        flex-shrink: 6;
        -ms-flex-preferred-size: calc(600vw / 12);
        flex-basis: calc(600vw / 12)
    }
}
@-webkit-keyframes flex-bounce-2 {
    0%, 100% {
        -webkit-box-flex: 2;
        flex-grow: 2;
        flex-shrink: 2;
        flex-basis: calc(200vw / 12)
    }
    50% {
        -webkit-box-flex: 1;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: calc(100vw / 12)
    }
}
@keyframes flex-bounce-2 {
    0%, 100% {
        -webkit-box-flex: 2;
        -ms-flex-positive: 2;
        flex-grow: 2;
        -ms-flex-negative: 2;
        flex-shrink: 2;
        -ms-flex-preferred-size: calc(200vw / 12);
        flex-basis: calc(200vw / 12)
    }
    50% {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        -ms-flex-preferred-size: calc(100vw / 12);
        flex-basis: calc(100vw / 12)
    }
}
/*        Irrelevant, but so pretty        */
/*----------- IRRELEVANT STYLES -----------*/

.body {
    padding-top: 0.67em
}
.bg-primary {
    background: #EFEFEF
}
.bg-secondary {
    background: #F9F9F9
}
.h-family {
    font-family: helvetica, sans-serif
}
.m0 {
    margin: 0
}
.font-body {
    color: #333
}
.font-primary {
    color: #FE4365
}
.fw1 {
    font-weight: 100
}
.fw3 {
    font-weight: 300
}
.pl10 {
    padding-left: 10px
}
.b1 {
    border: 1px solid #FF6B6B
}
.bb1 {
    border-bottom: 1px solid #FF6B6B
}
.ht-sm {
    height: 2.5em
}
.ht-md {
    min-height: 125px
}
.container,
.description {
    padding: 20px 10px;
    margin: 20px 0;
    box-shadow: 5px 5px 5px #CCC
}
.normalize {
    margin: -0.67em 0 0;
}

HTML

<div class="body font-body h-family fw1 m0 bg-primary">
    <section class="container bg-secondary ht-md normalize">
        <h1 class="bb1 pl10 fw3 font-primary">Grid vs Flexbox Animations</h1>
        <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid" class="font-primary">MDN</a> identifies grid properties as allowing discrete animation, but what does that mean? And how does it compare to flexbox (which allows continuous animation
            "as each of the properties of the [<code class="font-primary">flex</code>] shorthand")?</p>
    </section>
    <section class="container bg-secondary ht-md">
        <h2 class="font-primary fw3">Grid Expand Animation (Discrete)</h2>
        <div class="grid of-12-cols">
            <span class="span-1 ga0 b1 ht-sm">Lorem, ipsum.</span>
            <span class="span-3 ga1 b1 ht-sm">Iusto, voluptatibus!</span>
            <span class="span-1 ga0 b1 ht-sm">Earum, fugiat!</span>
            <span class="span-1 ga0 b1 ht-sm">Vel, expedita.</span>
            <span class="span-2 ga2 b1 ht-sm">Odit, aliquid.</span>
            <span class="span-2 ga3 b1 ht-sm">Adipisci, distinctio.</span>
            <span class="span-2 ga4 b1 ht-sm">Dolor, laboriosam?</span>
        </div>
        <p>Grid properties such as <code class="font-primary">grid-column</code> accept the animation properties, but do not backfill transitions between states</p>
    </section>
    <section class="container bg-secondary ht-md">
        <h2 class="font-primary fw3">Flexbox Expand Animation (Continuous)</h2>
        <div class="flex">
            <span class="f1 fs1 fb1 fa0 b1 ht-sm">Lorem, ipsum.</span>
            <span class="f3 fs3 fb3 fa1 b1 ht-sm">Iusto, voluptatibus!</span>
            <span class="f1 fs1 fb1 fa0 b1 ht-sm">Earum, fugiat!</span>
            <span class="f1 fs1 fb1 fa0 b1 ht-sm">Vel, expedita.</span>
            <span class="f2 fs2 fb2 fa2 b1 ht-sm">Odit, aliquid.</span>
            <span class="f2 fs2 fb2 fa2 b1 ht-sm">Adipisci, distinctio.</span>
            <span class="f2 fs2 fb2 fa2 b1 ht-sm">Dolor, laboriosam?</span>
        </div>
        <p>Flex Box properties <code class="font-primary">flex-grow</code>, <code class="font-primary">flex-shrink</code>, and <code class="font-primary">flex-basis</code> accept the animation properties as well as backfill any transitions between states.</p>
    </section>
</div>

使用css3 grid-column和flex-grow实现的列宽度调整动画比较。

css3, grid, flexbox

编辑器支持Emmet

快捷键

使用css3 grid-column和flex-grow实现的列宽度调整动画比较。

css3, grid, flexbox

使用CSS3 border-image和SVG实现的美丽边界图形

使用CSS3弹性框布局flex-grow方法实现列宽弹性伸展动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：