【CSS】transition、transform以及animation

1.CSS transition

介绍

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

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

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

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

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

css 复制代码
.transition {
    transition: property duration timing-function delay;
}

其中,要成功实现过渡效果,必须定义 transition-propertytransition-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 一同使用。

如下

html 复制代码
<!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

示例如下:

html 复制代码
<!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 属性:

css 复制代码
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 属性也可以设置多组过渡效果,每组之间使用逗号进行分隔,示例代码如下:

html 复制代码
<!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属性调整元素转换的基点。

css 复制代码
div{
    transform-origin: left top;
    transform: rotate(45deg); 
} 

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

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

css 复制代码
div{
    transform-origin: 50px 100px;
    transform: rotate(45deg); 
} 

效果如下:

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

可以看下面这张图:

4.倾斜 --- skew

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

例如:

css 复制代码
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 为例:

css 复制代码
.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);
}

即绕坐标系的 X 轴旋转

其他属性可参考:

CSS 3D

4.CSS animation - 动画

参考:https://zhuanlan.zhihu.com/p/456713454

这篇文章里面对于CSS动画的介绍相当全面,其中还有不少有意思的实例

相关推荐
brief of gali3 分钟前
记录一个奇怪的前端布局现象
前端
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome