前端学习第六天——利用css做动画

前端学习第六天——利用css做动画

旋转变形

将transform属性的值设置为rotate(),即可实现旋转变形，角度为正，则顺时针方向旋转，否则逆时针方向旋转

    /* 旋转45度 */
    transform:rotate(45deg);

transform-origin属性可以设置自己的自定义变换原点

    /* 以左上角为中心原点进行旋转 */
    transform-origin:0 0;

缩放属性

将transform属性的值设置为scale()，即可实现缩放变形，当数值小于1时，表示缩小元素；大于一表示放大元素

斜切变形

将transform属性的值设置为skew()，即可实现斜切变形

    /* x斜切角度 y斜切角度 */
    transform:skew(10deg, 20deg);

位移变形

将transform属性的值设置为translate()，即可实现位移变形。和相对定位非常像，本质上仍然是在原来的位置，只不过渲染在新的地方，渲染的图形不会对页面其他元素产生任何影响。（兼容到IE9）

    /* 向右移动 向下移动 */
    transform:translate(100px, 200px);

3D旋转

将transform属性的值设置为rotateX()或者rotateY()，即可实现绕横轴、纵轴旋转
perspective属性用来定义透视强度，单位是px。
旋转的元素外面要包裹一层属性有perspective的盒子

空间移动

__当元素进行3D旋转后，__可以继续添加translateX()、translateY()、translateZ()属性让元素在空间进行移动

过渡

transition过渡可以为一个元素在不同样式之间变化添加“补间动画”。（兼容到IE10）

• 优点：动画更细腻，内存开销小

transition属性4要素

    /* 什么属性要过渡 动画时长 变化速度曲线 延迟时间 */
    transition: width 1s linear 0s;

可以参与过的的属性

• 所有数值类型的属性，都可以参与1过渡，比如width、height、left、top、border-radius
• 背景颜色和文字颜色都可以被过渡
• 所有的变形都可以被过渡

如果要所有属性都参与过渡，可以写all

    transition: all 1s linear 0s;

过渡的四个小属性

属性	意义
transition-property	要过渡的属性
transition-duration	动画时间
transition-timing-function	动画变化曲线（欢动效果）
transition-delay	延迟时间

缓动参数

变化速度曲线
常用的缓动参数：ease、linear、ease-in、ease-out、ease-in-out

贝塞尔曲线

网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数

动画的定义

使用@keyframes来定义动画，keyframes表示关键帧

    /* 定义动画  r动画的名字 */
    @keyframes r {
        /* 起始状态 */
            from {
                transform: rotate(0);
            }
        /* 结束状态 */
            to {
                transform: rotate(360deg);
            }
        }

动画的调用

定义动画以后，可以使用animation属性调用动画

    /* 动画名字 总时长 缓动效果 延迟 */
    animation:r 1s linear 0s;

第五个参数表示动画的执行次数

    /* 3表示动画执行3次 */
    animation:r 1s linear 0s 3;

如果想永远执行可以写infinite
alternate属性可以让动画的偶数次自动逆运行
forwards属性可以让动画停止在结束状态

多关键帧动画

@keyframes yd {
        0% {
            transform: rotate(45deg) translate(-300px);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            transform: rotate(45deg) translate(300px);
            opacity: 0;
        }
}