【CSS】transition、transform以及animation

news2024/11/23 12:32:13

1.CSS transition

介绍

通常当 CSS 的属性值更改后，浏览器会立即更新相应的样式。

在 CSS3 中加入了一项过渡功能，通过该功能，我们可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画，但无需借助 flash 或 JavaScript。

CSS3 中，提供了4个相关属性来实现过渡效果：

transition-property — 用于指定应用 transition 效果的 CSS 属性名
transition-duration — 指定 transition 效果需要多久完成
transition-timing-function — 指定 transition 效果的动画曲线
transition-delay — 指定设置过渡效果延迟的时间

当然这些属性可以通过 transition 统一设置：

.transition {
    transition: property duration timing-function delay;
}

其中，要成功实现过渡效果，必须定义 transition-property、transition-duration 属性。

下面对四个属性进行详细说明.

1.transition-property

transition-property 属性用来设置元素中参与过渡的属性名称，语法格式如下：

transition-property: none | all | property;

各参数如下：

none — 没有属性参与过渡效果
all — 表示该元素上的所有属性都参与过渡效果
property — CSS 属性名称列表，多个属性名称之间使用逗号进行分隔。

2.transition-duration

transition-duration 属性用来设置过渡需要花费的时间（单位为秒或者毫秒），语法格式如下：

transition-duration: time;

如果有多个参与过渡的属性，也可以依次按transition-property中声明的顺序，为这些属性设置过渡需要的时间，多个属性之间使用逗号进行分隔，例如transition-duration: 1s, 2s, 3s;。

当然，也可以使用一个时间来为所有参与过渡的属性设置过渡所需的时间。

现在，我们了解了成功实现过渡效果的两个必要属性，下面可以尝试实现一个过渡效果：

在业务场景中，transition 往往会与 :hover 一同使用。

如下

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果如下：

在这里插入图片描述

3.transition-timing-function

transition-timing-function 属性用来设置过渡动画的类型，属性的可选值如下：

在这里插入图片描述

默认值为linear。

示例如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: 5s, 1s;
        }
        div:hover {
            width: 1500px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

现在为其加上transition-timing-function 属性：

div {
    width: 100px;
    height: 100px;
    border: 3px solid black;
    margin: 10px 0px 0px 10px;
    transition-property: width, background;
    transition-duration: 5s, 1s;
    transition-timing-function: linear;
}

效果如下：

在这里插入图片描述

下面是各属性值的动画运动曲线：

在这里插入图片描述

4.transition-delay

transition-delay 属性用来设置过渡效果何时开始，属性的语法格式如下：

transition-delay: time;

5.用 transition 同时设置过渡、设置多组属性的过渡

transition 属性是上面四个属性的简写形式，通过该属性可以同时设置上面的四个属性。

另外，通过 transition 属性也可以设置多组过渡效果，每组之间使用逗号进行分隔，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition: width .25s linear 1.9s, background 1s 2s, transform 2s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

其中设置了三组 transition 效果，各组之间通过逗号分隔：

width .25s linear 1.9s
background 1s 2s
transform 2s

效果如下：

在这里插入图片描述

2.CSS transform - 2D变换

介绍

transform 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和动画，可以取代大量之前只能靠 Flash 才可以实现的效果。

1.移动 — translate

translate属性值用于定义二维平移。

例如：translate(50px, 50px)效果如下

在这里插入图片描述

可以看到，translate的效果就是将元素在水平和垂直方向上分别移动一定的距离

当然我们也可以单独指定某一方向上的偏移，translate的相关语法如下：

translate(x,y) --- X轴和Y轴同时移动
translateX(x) --- 仅X轴移动
translateY(Y) --- 仅Y轴移动

2.缩放 — scale

scale属性值对元素进行二维缩放。

例如：transform:scale(0.5,1);效果如下

在这里插入图片描述

可以看到，在x轴方向上，元素被缩放为原来的 0.5 倍，即scale属性值可以对元素进行水平和垂直方向的缩放。

scale属性值的相关语法如下：

scale(X,Y) --- X轴和Y轴同时缩放
scaleX(x) --- X轴缩放
scaleY(y) --- Y轴缩放

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

3.旋转 — rotate

rotate属性用于对元素进行旋转，正值表示顺时针旋转，负值表示逆时针旋转。

例如：transform:rotate(45deg);效果如下

在这里插入图片描述

deg 表示 degree，即旋转的度数。

另外，我们可以使用transform-origin属性调整元素转换的基点。

div{
    transform-origin: left top;
    transform: rotate(45deg); 
}

效果如下，改变元素原点到左上角，然后进行顺时旋转45度

在这里插入图片描述

如果要粗略的通过元素的4个边角作为基点，可以使用上面的方式，但如果想要精确地确定基点的位置，可以用 px 指定其精确位置：

div{
    transform-origin: 50px 100px;
    transform: rotate(45deg); 
}

效果如下：

在这里插入图片描述

即将x轴上50px、y轴上100px处作为旋转的基点。

可以看下面这张图：

在这里插入图片描述

4.倾斜 — skew

skew 属性值用于将元素沿 x 轴、y 轴倾斜。

例如：

div{
    transform: skew(20deg, 10deg);
}

效果如下：

在这里插入图片描述

未指定第二个参数时，默认为0。另外，这两个参数值可以为负值！

5.matrix

…

3.CSS transform - 3D变换

CSS transform 还支持3D转换。要实现3D转换，首先需要了解 CSS 中的三维坐标系。

CSS 中的三维坐标系与左手3D坐标系有一定区别，CSS 中的三维坐标系相当于将左手3D坐标系绕其x轴旋转180度：

在这里插入图片描述

可以看到，坐标轴y轴负方向在上方，z轴的负方向在后方，所以可以这样记：

x 轴向左为负值，向右为正值
y 轴向上为负值，向下为正值
z 轴向内为负值，向外是正值

以 rotateX 为例：

.div1 {
    width: 100px;
    height: 100px;
    /* border: 3px solid black; */
    background-color: yellow;
    color: red;
    margin: 10px 0px 0px 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: all 0.5s ease 0s;
}
.div1:hover {
    transform: rotateX(180deg);
}