CSS的2D变化,CSS动画

发布于:2023-01-22 ⋅ 阅读:(8) ⋅ 点赞:(0) ⋅ 评论:(0)

css2D变换和过渡

transform:

1.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,不可为负值

2.移动 translate(x, y) 可以改变元素的位置,x、y可为负值;

x 在水平方向移动。

y 在垂直方向移动。

3.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针;

过渡(transition):

transition:param1 param2

param1 要过渡的属性

param2 过渡的时间.

transition-property设置过渡属性

transition-duration设置过渡时间

transition-timing-function设置过渡速度 用来控制速度linear(匀速)

ease-in ( 加速)

transition-delay设置过渡延时 超过时间后执行动画.

CSS动画

transform:

rotateX(30deg) 绕着x旋转30deg
rotateY(30deg) 绕着y旋转30deg
rotateZ(30deg) 绕着z旋转30deg
translateX(30px) 沿着x轴移动30px
translatey(30px) 沿着y轴移动30px
translatez(30px) 沿着Z轴移动30px( 必须给父盒子加透视)

anmition:

@keyframes 动画名{
    0%{
     }

    100%{

    }

    或者
    from{}
    to{}
}

动画调用:
    animation: 动画名称 动画时间  执行次数  运动曲线 延迟执行 结束后状态 是否反向;
        infinite: 无限次
        alternate: 反向执行
        forwards: 保持结束后的状态
        backwards: 保持动起开始前的状态
        steps(5): 让动画分步执行;

        动画详细属性:
            animation-name:动画名称
            animation-duration:持续时间
            animation-iteration-count:执行次数
            animation-timing-function:运动曲线
            animation-fill-mode:结束状态
            animation-direction: 动画方向
            animation-delay: 延迟时间