CSS animationで背景を設定する2

背景画像をCSSでanimationします。

1. 素材を用意します。
2. Adobe Photoshop 2020で編集します。
   1. レベル補正２パターン
   2. カラールックアップ２パターン
   3. jpgで書き出し２パターン

code

CSS

main{
  animation-name: animate;
  animation-duration: 13s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: .8;
}

@keyframes animate{
  0%, 50%, 100%{
    background: url('img/css-animation2-1.webp') no-repeat center fixed;
  }
  25%, 75%{
    background: url('img/css-animation2-2.webp') no-repeat center fixed;
  }
}