CSS animationで背景を設定する3
背景画像をCSSでanimationします。
- 素材を用意します。
- Adobe Photoshop 2020で編集します。
- 白黒にします。
- カラーパーツを作成します
- 書き出します。
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; } }