---
tags: Gsap
---
###### tags: `gsap`
# GSAP3 基本動畫

gsap.to(".green", {              // "選擇目標"
  x: 100,                        // "向X移動100px"
  rotation: 45,                  // "旋轉45度"
  duration: 2,                   // "動畫執行時間2秒"
  autoAlpha: 0.1,                // "透明度"
  repeat: 2,                     // "重覆執行2次"
  repeatDelay: 0.5               // "重覆執行每次間隔0.5秒"
});
gsap.to(".red", {                // "選擇目標"
  x: 100,                        // "向X移動100px"
  duration: 1.5,                 // "動畫執行時間1.5秒"
  delay: 0.5,                    // "延遲0.5再開始"
  opacity: 0.5,                  // "透明度"
  height: 96,                    // "高變成96px"
  repeat: 3,                     // "重覆執行3次"
  yoyo: true,                    // "來回執行"
});
gsap.to(".orange", {             // "選擇目標"
  x: 100,                        // "向X移動100px"
  y: -10,                         // "向Y移動-10px"
  duration: 2,                   // "動畫執行時間2秒"
  backgroundColor: "blue",       // "CSS運用 要用駝峰式寫法"
  borderRadius: 24,              // "CSS運用 要用駝峰式寫法"
  borderWidth: 10,               // "CSS運用 要用駝峰式寫法"
  borderColor: "yellow",         // "CSS運用 要用駝峰式寫法"
  borderStyle: "solid",          // "CSS運用 要用駝峰式寫法"
  marginLeft: -5,                // "CSS運用 要用駝峰式寫法"
  opacity: 1,                    // "透明度"
  startAt: {                     // "定義任何屬性的起始值"
    x: 300,
    y: -150,
    opacity: 0.1
  }
});

<iframe height="330" style="width: 100%;" scrolling="no" title="gsap basic 1" src="https://codepen.io/juest/embed/bGwzMBK?height=265&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/juest/pen/bGwzMBK'>gsap basic 1</a> by gt.juest
(<a href='https://codepen.io/juest'>@juest</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## gasp // css transform

x: 100 // transform: translateX(100px)
y: 100 // transform: translateY(100px)
z: 100 // transform: translateZ(100px)
xPercent: 50 // transform: translateX(50%)
yPercent: -50 // transform: translateY(-50%)
scale: 2 // transform: scale(2)
scaleX: 2 // transform: scaleX(2)
scaleY: 2 // transform: scaleY(2)
scaleZ: 2 // transform: scaleZ(2)
skew: 15 // transform: skew(15deg)
skewX: 15 // transform: skewX(15deg)
skewY: 15 // transform: skewY(15deg)
rotation: 180 // transform: rotate(180deg)
rotationX: 180 // transform: rotateX(180deg)
rotationY: 180 // transform: rotateY(180deg)
rotationZ: 180 // transform: rotateZ(180deg)
perspective: 1000 // transform: perspective(1000px)
transformOrigin: '50% 50%' // transform-origin: 50% 50%