CSS animationで背景を設定する3

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

1. 素材を用意します。
2. Adobe Photoshop 2020で編集します。
   1. 白黒にします。
   2. カラーパーツを作成します
   3. 書き出します。

code

CSS

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

    @keyframes animate{
      0%, 100%{
        opacity: .8;
        background: url('img/css-animation3-0.webp') no-repeat fixed;
      }
      10%, 90%{
        opacity: 1;
        background: url('img/css-animation3-1.webp') no-repeat fixed;
      }
      20%, 80%{
        opacity: 1;
        background: url('img/css-animation3-2.webp') no-repeat fixed;
      }
      30%, 70%{
        opacity: 1;
        background: url('img/css-animation3-3.webp') no-repeat fixed;
      }
      40%, 60%{
        opacity: 1;
        background: url('img/css-animation3-4.webp') no-repeat fixed;
      }
    }