アニメーション研究

seya 2021/04/03

Typing を CSS だけで実現するアニメーション
https://codepen.io/denic/pen/GRoOxbM

文字が増えていくのは以下で実現。
steps っていうの知らんかったぜよ。これのおかげで width がニュイーんとは伸びないから typing っぽく見えてる

width: 22ch
animation: typing 2s steps(22)

@keyframes typing {
  from {
    width: 0
  }
}

seya 2021/04/03

いい記事

seya 2021/04/04

文字がスッと出てくるやつは親と子が逆方向に translate させることで実現している。

<h1 class="title">
    <span>TEXT ANIMATION</span>
  </h1>

.title {
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  color: #aa8f7b;
  font-family: 'Josefin Sans', sans-serif;
}

.title span {
  display: block;
  transform: translate(100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

https://codepen.io/sakaccho/pen/gOwEvMd

seya 2021/04/10

ピカピカ光るテキスト

animation: lightText 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;

keyfreme {
0% {
    opacity: 0;
}
50% {
    opacity: 0.2;
}
70% {
    opacity: 0.2;
}
75% {
    opacity: 1;
    filter: brightness(150%);
}
80% {
    opacity: 0.2;
    filter: brightness(100%);
}
85% {
    opacity: 1;
    filter: brightness(150%);
}
90% {
    opacity: 0.2;
}
95% {
    opacity: 0.8;
    filter: brightness(150%);
}
100% {
    opacity: 1;
    filter: brightness(100%);
}
}