CSSのlinear-gradient()をアニメーションさせる今どきの方法

1
/* ボタン1 */
2
.button--01 {
3
  background: linear-gradient(to right, var(--color-1), var(--color-2));
4
  transition: background .5s; /* これは機能しない */
5
}
6

7
@media (any-hover: hover) {
8
  .button--01:hover {
9
    background: linear-gradient(to right, var(--color-2), var(--color-1));
10
  }
11
}

1
/* ボタン2 */
2
.button--02 {
3
  position: relative;
4
  z-index: 1;
5
  background: linear-gradient(to right, var(--color-1), var(--color-2)); /* 親要素の背景 */
6
}
7

8
.button--02::before {
9
  content: "";
10
  position: absolute;
11
  inset: 0;
12
  z-index: -1;
13
  background: linear-gradient(to right, var(--color-2), var(--color-1)); /* 擬似要素の背景 */
14
  opacity: 0; /* 初期状態は非表示 */
15
  transition: opacity 0.5s;
16
}
17

18
@media (any-hover: hover) {
19
  .button--02:hover::before {
20
    opacity: 1; /* ホバーで表示 */
21
  }
22
}

1
/* ボタン3 */
2
@property --color-3 {
3
  syntax: "<color>";
4
  inherits: false;
5
  initial-value: #13547a;
6
}
7

8
@property --color-4 {
9
  syntax: "<color>";
10
  inherits: false;
11
  initial-value: #80d0c7;
12
}
13

14
.button--03 {
15
  background: linear-gradient(to right, var(--color-3), var(--color-4));
16
  transition: --color-3 0.5s, --color-4 0.5s;
17
}
18

19
@media (any-hover: hover) {
20
  .button--03:hover {
21
    --color-3: #80d0c7;
22
    --color-4: #13547a;
23
  }
24
}

1
@property --color-3 {
2
  syntax: "<color>";
3
  inherits: false;
4
  initial-value: #13547a;
5
}
6

7
@property --color-4 {
8
  syntax: "<color>";
9
  inherits: false;
10
  initial-value: #80d0c7;
11
}

1
.button--03 {
2
  transition: --color-3 0.5s, --color-4 0.5s;
3
}
4

5
@media (any-hover: hover) {
6
  .button--03:hover {
7
    --color-3: #80d0c7;
8
    --color-4: #13547a;
9
  }
10
}

1
@property --my-color {
2
  syntax: "<color>";
3
  inherits: false;
4
  initial-value: var(--another-color); /* これは動作しない */
5
}

1
:root {
2
  --color-1: #13547a;
3
  --color-2: #80d0c7;
4
}
5

6
@property --color-3 {
7
  syntax: "<color>";
8
  inherits: false;
9
  initial-value: #13547a;
10
}
11

12
@property --color-4 {
13
  syntax: "<color>";
14
  inherits: false;
15
  initial-value: #80d0c7;
16
}
17

18
.button--03 {
19
  --color-3: var(--color-1); /* グローバルな値で上書き */
20
  --color-4: var(--color-2); /* グローバルな値で上書き */
21
  background: linear-gradient(to right, var(--color-3), var(--color-4));
22
  transition: --color-3 0.5s, --color-4 0.5s;
23
}
24

25
@media (any-hover: hover) {
26
  .button--03:hover {
27
    --color-3: #80d0c7;
28
    --color-4: #13547a;
29
    --color-3: var(--color-2); /* グローバルな値で上書き */
30
    --color-4: var(--color-1); /* グローバルな値で上書き */
31
  }
32
}

1
/* ボタン4 */
2
.button--04 {
3
  background: linear-gradient(
4
    90deg,
5
    var(--color-1),
6
    var(--color-2) 50%,
7
    var(--color-1)
8
  ); /* グラデーションに3つの色を指定 */
9
  background-size: 200% 100%; /* グラデーションの幅を2倍に */
10
  background-position: 0 0;
11
  transition: background-position 0.3s;
12
}
13

14
@media (any-hover: hover) {
15
  .button--04:hover {
16
    background-position: 100% 0; /* グラデーションの開始位置（x）を100%に移動 */
17
  }
18
}