CSS animationで背景を設定する

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

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

code

CSS

    main{
      position:absolute;
      animation-name: animate;
      animation-duration: 108s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }

    @keyframes animate{
      0%, 100%{
        opacity: 3;
        background: url('img/css-animation-1.jpg') no-repeat top fixed;
      }
      20%, 80%{
        background: url('img/css-animation-2.jpg') no-repeat center fixed;
      }
      50%{
        opacity: 6;
        background: url('img/css-animation-3.jpg') no-repeat bottom fixed;
      }
    }