2018年08月26日(日)

異なる複数の絵文字を連続表示させる

• 0
• 1
• 1
• 0

Result

See the Pen Simple Emoji Animations by kachibito (@kachibito) on CodePen.

特に凝ったものではなく、keyframesで連続表示しています。
アニメーションをCSS関数で管理しているので割とすっきりしたコードになっています

css

.emoji { font-size: 50px; min-width: 1.4em; margin: 0.3em 0.4em; text-align: center; } .emoji::after { animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes twoFrames {/*2フレームのアニメーション*/ 50% { content: var(--emoji); } } @keyframes threeFrames {/*3フレーム*/ 33.333% { content: var(--emoji-1); ...