ピンで留まるメモリストPinned Memo Board
.cg-ls-pin {
list-style: none;
margin: 0;
padding: 10px 0 0;
width: 280px;
}
/* 紙: 上から落ちる → 着地で潰れる → 揺り戻して止まる */
.cg-ls-pin li {
position: relative;
margin: 0 0 12px;
padding: 14px 16px 14px 34px;
background: #FFFDF6;
border: 1px solid #E0DACB;
border-radius: 3px;
font-size: 14px;
color: #1B1A17;
transform-origin: 22px 8px;
animation: cg-ls-pin-drop 4.2s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-ls-pin li:nth-child(2) { animation-delay: .28s; }
.cg-ls-pin li:nth-child(3) { animation-delay: .56s; }
/* 影: 紙が落ちてくるほど締まる副次レイヤー */
.cg-ls-pin li::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: -5px;
height: 8px;
border-radius: 50%;
background: rgba(27, 26, 23, .18);
filter: blur(4px);
animation: cg-ls-pin-shadow 4.2s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-ls-pin li:nth-child(2)::after { animation-delay: .28s; }
.cg-ls-pin li:nth-child(3)::after { animation-delay: .56s; }
/* ピン: 紙が着地した瞬間に刺さる。刺さり際だけ横に潰す */
.cg-ls-pin-head {
position: absolute;
left: 14px;
top: 8px;
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle at 32% 30%, #FF8A4C, #E8590C 60%, #A93F08);
box-shadow: 0 2px 3px rgba(27, 26, 23, .35);
transform: scale(0);
animation: cg-ls-pin-stick 4.2s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-ls-pin li:nth-child(2) .cg-ls-pin-head { animation-delay: .28s; }
.cg-ls-pin li:nth-child(3) .cg-ls-pin-head { animation-delay: .56s; }
/* 文字: 紙が止まってから遅れて読める(視線誘導) */
.cg-ls-pin-txt {
display: block;
opacity: 0;
animation: cg-ls-pin-text 4.2s ease-out infinite;
}
.cg-ls-pin li:nth-child(2) .cg-ls-pin-txt { animation-delay: .28s; }
.cg-ls-pin li:nth-child(3) .cg-ls-pin-txt { animation-delay: .56s; }
@keyframes cg-ls-pin-drop {
0% { opacity: 0; transform: translateY(-26px) rotate(-7deg) scale(1, 1.06); }
14% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1.04, .9); }
22% { transform: translateY(0) rotate(2.2deg) scale(1, 1.02); }
30% { transform: translateY(0) rotate(-1deg) scale(1); }
38%, 86% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
96%, 100% { opacity: 0; transform: translateY(-26px) rotate(-7deg) scale(1, 1.06); }
}
@keyframes cg-ls-pin-shadow {
0% { opacity: 0; transform: scaleX(1.25); filter: blur(7px); }
14% { opacity: 1; transform: scaleX(.86); filter: blur(3px); }
30%, 86% { opacity: .8; transform: scaleX(1); filter: blur(4px); }
96%, 100% { opacity: 0; transform: scaleX(1.25); filter: blur(7px); }
}
@keyframes cg-ls-pin-stick {
0%, 12% { transform: scale(0); }
17% { transform: scale(1.35, .78); }
23% { transform: scale(.94, 1.08); }
30%, 86% { transform: scale(1); }
94%, 100% { transform: scale(0); }
}
@keyframes cg-ls-pin-text {
0%, 22% { opacity: 0; transform: translateX(-6px); }
34%, 86% { opacity: 1; transform: translateX(0); }
96%, 100% { opacity: 0; transform: translateX(-6px); }
}
/* 動きを止めたときは「全部ピンで留まった状態」で静止させる */
@media (prefers-reduced-motion: reduce) {
.cg-ls-pin li,
.cg-ls-pin li::after,
.cg-ls-pin-head,
.cg-ls-pin-txt { animation: none; }
.cg-ls-pin li { opacity: 1; transform: none; }
.cg-ls-pin li::after { opacity: .8; transform: scaleX(1); }
.cg-ls-pin-head { transform: scale(1); }
.cg-ls-pin-txt { opacity: 1; transform: none; }
}
<ul class="cg-ls-pin">
<li><i class="cg-ls-pin-head" aria-hidden="true"></i><span class="cg-ls-pin-txt">検品リストを倉庫に共有</span></li>
<li><i class="cg-ls-pin-head" aria-hidden="true"></i><span class="cg-ls-pin-txt">配送ラベルの刷り直し</span></li>
<li><i class="cg-ls-pin-head" aria-hidden="true"></i><span class="cg-ls-pin-txt">月次の在庫棚卸し</span></li>
</ul>