【初心者でもわかる】iphoneのロック画面で使われているフワッと表示する文字アニメーションを再現 - Qiita

どうも7noteです。文字をふわっとだすアニメーションを作成 iphoneのホーム画面で使われている文字のアニメーションがきれいだったので同じようなものを作ってみます。 文章の中央からフワッと文字が表示されるようなアニメーションです。 書き方 p { display: inline-block; /* beforeとafterのサイズを同じにするため */ position: relative; /* 基準位置とする */ } p::before, p::after { content: ''; /* 疑似要素に必須 */ width: 100%; /* 幅いっぱいに指定 */ height: 100%; /* 高さいっぱいに指定 */ display: block; /* ブロック要素にする */ position: absolute; /* 相対位置に指定 */ top: 0; /*