アプリ起動アニメーションの改変

Question

https://baigie.me/officialblog/2021/02/25/css-tips-1/
上のサイトの
幕のように背景が上がるアニメーション
を改造したいです
まず背景の赤を上から下に動かしたいです
動くスピードをゆっくりしたいです
上の境界線を動く波線にしたいです
簡単に言うと
揺れる水が減っていく感じに改造したいです

Answer 1

SVGで背景をつくるものとしSvg Wave - A free & beautiful gradient SVG wave Generator.あたりでサンプリングして、何パターンかd値をテキストでうけとりanimateで処理すればよいでしょう

Answer 2

まず背景の赤を上から下に動かしたいです

transform を変更してはどうですか。

.bg:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #a33e46;
  /* transform: translate(0, 100%); */
  transform: translate(0, -100%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) .6s;
  content: '';
}

---

動くスピードをゆっくりしたいです

transition を変更してはどうですか。

.bg:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #a33e46;
  /* transform: translate(0, 100%); */
  transform: translate(0, -100%);
  /* transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) .6s; */
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 6s;
  content: '';
}

---

上の境界線を動く波線にしたいです

border-image でアニメーションGIFを置くのはどうですか。

Comments

[Akari0941]

コードも書いていただきありがとうございました。
とてもわかりやすかったです