CSS3过渡、变换与动画详解

CSS3过渡、变换与动画详解

引用

CSDN

1.

https://blog.csdn.net/qq_62224122/article/details/146199800

本文详细介绍了CSS3中的过渡、变换与动画技术，包括过渡效果、2D变换、动画定义与调用、3D维度和变换等核心概念。通过本文，读者可以系统地学习CSS3动画的相关知识，并掌握具体的实现方法。

过渡

过渡效果可以让元素以动画形式，平滑地完成状态变化。其基本语法如下：

transition : all 2s linear 0s;

参数解释：

• 第一个参数：参与过渡的属性，一般写all
• 第二个参数：过渡完成的时间，单位是s
• 第三个参数：缓冲描述（函数），如linear（匀速）、ease（非匀速）
• 第四个参数：延迟时间，单位也是s

此外，还可以单独定义这四个单一属性：

• transition-property：参与过度属性
• transition-duration：过渡时间
• transition-timing-function：缓存描述
• transition-delay：延迟时间

参与过渡的属性包括数值型的属性以及颜色，比如width、height、border-width等。

2D变换

通过transform属性实现变换，支持多种变换方式：

• 旋转：transform:rotate(30deg)
• 缩放：transform:scale(2)
• 斜切：transform:skew(10deg,10deg)
• 移动：transform:translate(100px,100px)

多个变形可以用空格隔开，例如：

transform:rotate(360deg) scale(1.5)

动画

定义动画

使用@keyframes规则定义动画：

@-webkit-keyframes 动画名称 {
    from{}
    to{}
}

可以使用百分数表示动画状态，例如：

0% {
    transform: translate(0, 0) scale(1) rotate(0);
}
100% {
    transform: translate(0, 0) scale(0.8) rotate(30deg);
}

调用动画

使用animation属性调用动画：

animation:donghua 1.5s linear 0s 3 alternate forwards;

参数解释：

• 第一个参数：要调用的名称
• 第二个参数：完成一次动画的时间
• 第三个参数：缓冲描述
• 第四个参数：延迟时间
• 第五个参数：动画的次数
• 第六个参数：自动补全反方向的动画
• 第七个参数：保持最后一帧的状态

3D维度

3D中的坐标系有三个维度：x表示正方向向右，y表示正方向向下，z表示垂直于屏幕（需设置景深才会有效）。

3D景深

通过perspective属性设置景深，例如：

.container{
    width: 324px;
    height: 260px;
    border: 2px solid green;
    margin: 50px auto;
    transform: rotateY(30deg);
    transform-style: preserve-3d;
    perspective: 1000px;
}

3D变换

3D移动

使用translate3D(x,y,z)或单独设置translateX、translateY、translateZ。

3D缩放

使用scale3D(x,y,z)或单独设置scaleX、scaleY、scaleZ。

3D旋转

使用rotate3D(x,y,z,angle)或单独设置rotateX、rotateY、rotateZ。

正方体示例

.container {
    width: 300px;
    height: 300px;
    margin: 200px auto;
    border: 3px solid #000;
    position: relative;
    transform-style: preserve-3d;
    animation: identifier 10s;
}

.box {
    position: absolute;
    font-size: 100px;
    line-height: 300px;
    height: 300px;
    width: 300px;
    text-align: center;
    color: white;
}

.box1 {
    background-color: pink;
    transform: translateZ(150px);
}

.box2 {
    background-color: orange;
    transform: translateZ(-150px);
}

.box3 {
    background-color: skyblue;
    transform: translateX(150px) rotateY(-90deg);
}

.box4 {
    background-color: yellowgreen;
    transform: translateX(-150px) rotateY(-90deg);
}

.box5 {
    background-color: gold;
    transform: translateY(150px) rotateX(90deg);
}

.box6 {
    background-color: green;
    transform: translateY(-150px) rotateX(90deg);
}

@keyframes identifier {
    0% {
        transform: rotateX(0) rotateY(0);
    }
    25% {
        transform: rotateX(90deg) rotateY(90deg);
    }
    50% {
        transform: rotateX(180deg) rotateY(180deg);
    }
    75% {
        transform: rotateX(270deg) rotateY(270deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}