幫我優化語句
嗨大家好，我是Eric！
今天我們來談談如何在HTML、CSS和JavaScript中使用自定義CSS屬性（CSS Variables）。這是一個實用的技巧，特別是當你需要在不同的元素或條件下使用相同的屬性值。

HTML 結構
首先，我們準備一個圓形在容器中來回移動的例子來演示，怎麼使用 CSS 及 JS style.property() 來完成這個動畫。

.container {
  width: 80%;
  height: 300px;
  border: 1px solid #000;
  position: relative;
  margin: 0 auto;
}
.item {
  display: block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  left: 0;
  top: 50%;
  animation: move 4s linear infinite;
}

<div class="container">
  <div class="item"></div>
</div>

下面我們定義 move animation，如果要計算子元素在父元素的移動距離，計算方式為：「父元素的寬度 - 子元素的寬度，但是在這裡 父元素 container 的寬度是為 80%，是一個變動的值，所以我們沒辦法直接把寬度寫死，所以先定一個 --w 變數，等等由 JS 來賦值。

@keyframes move {
  50% {
    transform: translateX(calc(var(--w) - 100%));
  }
}

// 取得 父元素
const container = document.querySelector('.container')

// 取得 子元素
const item = document.querySelector('.item')

// 取得 --w 寬度
item.style.setProperty('--w', `${container.clientWidth}px`)

這樣一來，--w 在CSS中就會取得這個動態設定的值，並用於動畫計算

結論
這個技巧允許我們更靈活地控制CSS屬性和動畫，特別是當這些值需要動態計算或改變時。自定義CSS屬性在這裡發揮了很大的作用，讓我們能夠在 CSS 和 JavaScript 之間輕鬆地共享數據，這次分享就到這邊，謝謝大家，明天見~