cssテキストアニメーション

テキストをふんわり下から表示するcssテキストアニメーション

See the Pen textup by 阪井真実 (@dkvcfvga-the-styleful) on CodePen.

上記以外のアニメーション

See the Pen Untitled by 阪井真実 (@dkvcfvga-the-styleful) on CodePen.

アニメーションプロパティ
animation-delay (遅延)
animation-direction (再生の向き)
animation-duration (所要時間)
animation-fill-mode (停止時の状態)
animation-iteration-count (実行回数)
animation-name (名前)
animation-play-state (再生状態)
animation-timing-function (イージング)


animation-name: fadeup;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;

上記を下記の様に1つにまとめて書く事もできます
animation: fadeup 1.5s ease-out forwards;

Animation Simulatorさんのサイトでアニメーションプロパティ デモを公開されているので実際に動かして確認すると分かりやすかも!

スクロールで発火させる場合はこちら


テキストにグラデーションが動くアニメーション

See the Pen Untitled by 阪井真実 (@dkvcfvga-the-styleful) on CodePen.

background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); //グラデーションのカラーはここで変更

グラデーションのジェネレーター

グラデーションの角度、色、方向を視覚的に確認!
簡単にCSSのコードを生成してくれる便利なジェネレーターです。

グラデーションの色や角度、変化するアニメーションのCSSのコードを生成してくれる便利なジェネレーターです。


cssのみで実装されたアニメーションです。

Topics