css动画

可以参考之前的gsap动画来看，css动画的支持是gsap的基础。

transform

.位移{
    transform: translate(12px, 50%);
    transform: translateX(2em);
    transform: translateY(3in);
}
.缩放{
    transform: scale(2, 0.5);
    transform: scaleX(2);
    transform: scaleY(0.5);
}
.旋转{
    transform: rotate(0.5turn);
    transform: rotate(90deg);
}
.倾斜从一个角度去看的侧视效果{
    transform: skew(30deg, 20deg);
    transform: skewX(30deg);
    transform: skewY(1.07rad);
}
.多个效果{
     transform: translate(30px, 20px) rotate(20deg);
}

transform-box

有多种取值，但是没必要仔细阅读解释。只要记住，常规的dom元素，用fill-box就行。

比较复杂的svg元素，默认的box是viewport，那就是整个svg。

例如指定transform-origin是50% 50%，实际上是整个svg的中心而不是当前元素的中心点，需要手动设置为fill-box。

简言之，如果是在正常dom中其实不需要改这个值，就是符合预期的。如果是svg中一般是需要改为fill-box是符合预期的。

• view-box(default)
• border-box
• fill-box

transform-origin

transform变换的原点，默认是center，如果出现了不符合预期的情况，基本都是由于transform-box导致的。

/* 中心点，上下左右的中点(默认是center) */
transform-origin: center; 
transform-origin: 50%;

/* 左上角，其他四个角类似 */
transform-origin: top left; 

/* 上面中间 */
transform-origin: top center;

/* 其实还有个z轴，是第三个参数 */
transform-origin: 0 50% 10px;

动画

利用关键帧可以实现动画

.rect{
    transform-box: fill-box;
    transform-origin: 0 0;
    animation: mymov 1s forwards;  /*animation 指定动画名和持续时间，结束后保持*/ 
}
@keyframes mymov{ /*动画通过关键帧来声明，可以直接声明100%的样式，0%默认对应的就是静态css效果*/
    100%{
        /* 这里可以指定任何css样式，例如width，backgroud等 */
        transform: rotate(45deg); 
    }
}

animation第一个参数指定动画，第二个指定时间，但是还有更多的参数。

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

• timing-function: 默认是ease低速开始加速，然后减速。还支持linear、ease-in、ease-out、ease-in-out等
• delay: 延时执行，如1s，默认是0s，注意不是0，必须是0s，后面说为啥。
• iteration-count: 动画重复次数，infinity是无限循环
• direction: 动画方向normal正向，reverse反向，alternate正向然后反向回来，如果设置了次数一个来回算两次。
• animation-fill-mode: forwards使动画结束后样式保留，而不是复原。backwards复原。

为啥delay不能是0必须是0s，因为css是可以写部分参数的，只要顺序对就行。如果delay允许写0，也就是纯数字，那就和repeat纯数字混淆导致无法解析了。比如mov 1s 0就不知道0是delay0s还是repeat0次了，所以delay不能是0，必须写0s，这样mov 1s 0就能确定是0次repeat。

transition

transition是一个非常简单的css属性，例如可以写 transition: 2s。这样如果这个元素，css样式有任何变化，都会变成2s的渐变效果，例如颜色变化，或者坐标变化，都会变成动画效果。配合hover非常简单而且实用。

transition与关键帧不要一起实用，transition是更简单的思路实现常用的动画效果，配置了transition后，只需要直接修改dom的样式，就能自动实现动画渐变效果。

而keyframes则是更精细的去控制，不同的时间的动画样式效果。