基础用法

gsap.to(className,options) 移动到哪里 （有动画）

• gsap.set(className,options) 移动到哪里 （无动画）

示例:
    gsap.to('.container',{
        x:200,
        duration: 2
    })
    gsap.set('.container',{
        x:200,
        duration: 2
    })
    className:容器名称 支持很多种写法 css、原生dom、数组等
    options: 配置项
参数:
    duration: 持续时间
    x: 横向移动距离 正数向右 负数向左 (绝对位移)
    y: 纵向移动距离 正数向下 负数向上 (绝对位移)
    xPercent: 横向移动距离 正数向右 负数向左 (相对于自身宽度的百分比位移)
    yPercent: 纵向移动距离 正数向下 负数向上 (相对于自身宽度的百分比位移)
    rotation: 旋转角度
    scale: 整体拉伸 scaleX: 横向拉伸 scaleY: 纵向拉伸
    skew: 倾斜 skewX: 横向倾斜 skewY:纵向倾斜
    transformOrigin:"center 40%"  变换-原点  配合 scale 可看出效果
    opacity: 透明度 0-1 
    autoAlpha: opacity的优化版 (建议使用⭐️)
    repeat:重复次数(首次动画不算在重复次数中) -1:无限
    delay: 延迟时间
    yoyo: 往返  true、false
    yoyoEach: 往返速度 true false  true时 前进的速度是什么样 返回的速度就是什么样  false时 假如前进是由快到慢 那么返回时 就是由慢到快
    stagger：交错 可以是字符串 也可以是对象 ‘0.2’  
    {
        each: 0.2,
        // 这里面的repeat针对的是每一个 而不是一个整体
        repeat: 1,
        yoyo: true
    }
    ------------------------
    opacity 和 autoAlpha 的区别 (值都为0时)
    相同点:
    1、都不可见
    2、都占位
    不同点:
    1、opacity:可点击、hover、focus
    2、autoAlpha： 不可点击、hover、focus
    ------------------------
    to 和 set 方法的区别
    to：有动画
    set：无动画

gsap.from(className,options) 从哪里移动到当前位置

示例:
    gsap.from('.container',{
        x:200,
        duration: 2,
        opacity:1
    })

gsap.fromTo(className,options,options) 从某个位置移动的某个位置

示例:
    gsap.fromTo(".container",
    {
        autoAlpha: 0, 
        x: 0 
    },
    { 
        autoAlpha: 0.5, 
        x: 200, 
        duration: 1 
    }
);