MOTION / 047
Grow X
左端から伸びる
左端を支点に、横幅が伸びていきます。
実際のHTML・CSSで描かれた見本です。
ひとつ試すなら
どこが変わるかを観察して、似た表現と見比べてみよう。
こんなときに
進捗バーや、見出しの下線を描くとき。
仕組みと使い方
この見本はscaleXを使い、レイアウト上の幅は変更しません。
対応状況は使用する機能と端末により異なります。公式資料も参照してください。
表現名には通称や説明のための名称を含みます。デモと掲載コードはこの図鑑のオリジナルです。作者について
実装コードを見る
<div class="demo"><i></i><i></i><i></i><i></i><i></i></div>
<style>
.demo {
display:flex; gap:7px; align-items:center; height:90px;
color: #30323c;
animation: grow-x 1200ms ease-out infinite both;
}
.demo i { display:block; width:13px; height:70%; background:currentColor; border-radius:20px; }
.demo i:nth-child(2), .demo i:nth-child(4) { height:100%; }
@keyframes grow-x {
0% { transform: scaleX(0); transform-origin: 0 50%; }
100% { transform: scaleX(1); transform-origin: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
.demo { animation: none; }
}
</style>