【CSS-tips⑨】テキストにモーフィングアニメーションをつけたい
css だけで、テキストにモーフィング効果をつける方法を紹介します。
＜解説＞
CSSは次のとおりです。
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
.morphing {
position: relative;
display:flex;
justify-content:center;
align-items: center;
font-size: 18px;
background-color: #4DB6AC;
color: #222;
min-height: 50px;
filter: contrast(5) blur(1px);
}
.word {
position: absolute;
animation: word 16s infinite ease-in-out;
}
.word:nth-child(1) {
animation-delay: -16s;
}
.word:nth-child(2) {
animation-delay: -14s;
}
.word:nth-child(3) {
animation-delay: -12s;
}
.word:nth-child(4) {
animation-delay: -10s;
}
.word:nth-child(5) {
animation-delay: -8s;
}
.word:nth-child(6) {
animation-delay: -6s;
}
.word:nth-child(7) {
animation-delay: -4s;
}
@keyframes word {
0%, 5%, 100% {
filter: blur(0px);
opacity: 1;
}
20%, 80% {
filter: blur(1em);
opacity: 0;
}
}
