CSS 的常用动画

一、平移、缩放、旋转

1. 设置元素的中心

/*
    -- 参数 x 和 y 用空格隔开
    -- 针对缩放、旋转
    -- 默认的中心点是元素的中心(50% 50%),等价于center center
    -- 设置 像素、方位名词、百分比
        -- npx
        -- 50%
        -- top、bottom、left、right、center
*/
transform-origin: x y;

2. 平移

/* 右边是正值，左边是负值 */
transform: translateX(x);

/* 下面是正值，上面是负值 */
transform: translateY(y);

/* 向外是正值，向里是负值  */
transform: translateZ(z);

/* x,y,z对应的值不能省略，不需要时用 0 进行填充 */
transform: translate(x, y);
transform: translate3d(x, y, z);

transform: translateX(n) translateY(n) translateZ(n);

3. 缩放

用来控制元素的放大与缩小

/*
    -- x y 是倍数的含义，所以不需要加单位
    -- x与y之间用逗号进行分隔
    -- 如果只写了一个参数，第二个参数就和第一个参数一致
    -- 而且不影响其他盒子
    -- 缩放时会把盒子的阴影一起放大
*/
transform: scale(x, y);

4. 旋转

transform: rotate(360deg);
transform: rotateX(60deg);
transform: rotateY(60deg);
transform: rotateZ(60deg);

5. 复合写法

transform: translateX(100px) translateY(500px) rotateZ(45deg) scale(2);

二、透视和 3D 效果

1. 透视

/*
    -- 透视理解为视距，所谓的视距就是人的眼睛到屏幕的距离
    -- 距离视觉点越近的在电脑平面成像越大，越远成像越小
    -- 透视的单位是像素
    -- 透视写在被视察元素的父盒子上面
*/
perspective: 500px;

2. 开启盒子子元素的 3D 效果

/*
    -- flat：不开启（默认）
    -- preserve-cd：开启
    -- 代码写给父级，但影响的是子元素
*/
transform-style: preserve-3d;

三、过渡

谁做动画给谁做过渡

transition: all .5s;

四、动画

1. 定义动画

@keyframes move {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

2. 调用动画

div {
    /* 1. 调用动画时：动画的名称（无默认值） */
    animation-name: move;
                
    /* 2. 动画的持续时长：（无默认值） */
    animation-duration: 2s;
                
    /* 3. 动画速度曲线：（默认值：ease），见过渡里有关速度曲线的说明 */
    animation-timing-function: ease-in-out;
                
    /* 4. 延迟时间：（默认值：0s） */
    animation-delay: 2s;
                
    /* 5. 播放次数：（默认值：1，或者 infinite：无限循环） */
    animation-iteration-count: infinite;
                
    /* 6. 规定动画是否在下一周期逆向播放：（normal是不逆序播放，alternate是逆序播放，默认值：normal） */
    animation-direction: alternate;
                
    /* 7. 动画结束之后的状态：（保持原状态是forwards，回到起始是backwards，默认值：forwards） */
    animation-fill-mode: forwards;

    /* 8. 规定动画是否暂停或者播放 （默认值：running） running 或 paused */
    animation-play-state: paused; 
}

3. 动画的复合写法

animation: 动画名称 持续时间【一定要待单位's'】 运动曲线 何时开始【一定要待单位's'】 播放次数 是否反方向 起始与结束状态
animation: logoScrollLine 6s ease-in-out 0s infinite normal backwards;