この記事では、CSS のトランジション (トランジション) プロパティとトランスフォーム (アニメーション) プロパティについて紹介します。これら 2 つのプロパティのパラメータは、確かに比較的複雑です。これらのプロパティにより、移動、回転、アニメーションなど、CSS の基本的なアニメーション効果を作成できます。 ...ちょっと待ってください、これらは私が初期に CSS を学習した際の難しくて忘れられない側面でもあるので、今日はそれらについて詳しくまとめます。
1: トランジション トランジション
トランジションは、属性の名前などの CSS トランジション効果を作成できます。トランジション、トランジションまでの時間、トランジションの遅延待ち時間、トランジションの速度変更（トランジションタイプ）...etc.
transition 共通プロパティ:
-
transition-property: トランジションに参加するプロパティの名前を指定するために使用されます。
-
transition -duration: トランジションの継続時間を指定するために使用されます
-
#transition-delay:トランジションの遅延待機時間を指定するために使用されます
-
transition-timing-function: トランジションのタイプを指定するために使用されます
4 つ共通の属性については、以下で 1 つずつ説明します。誰もが 1 つの文を覚えておいてください ------- 誰がトランジションを行う人は、誰にトランジション属性を追加しますか
1.1 Transition-property は遷移プロパティを指定します
##transition-property が使用されますトランジションに参加するプロパティの名前を指定するには、たとえば、長さと幅の間でトランジションしたい場合は、最後に幅と高さを書くだけです。手間を省きたい場合は、すべてを書くことができます。つまり、すべての属性が変更されます。 ##
<style>
div{
width: 200px;
height: 200px;
background-color: rgb(255, 156, 156);
transition-property: width,height; //设置要过渡的属性为宽高
}
div:hover{
width: 300px;
height: 300px;
}
</style>ログイン後にコピー
#トランジション効果: トランジション前は長さと幅が両方とも 200、トランジション後は 300 になります
1.2 移行期間 移行時間
transition-duration
使用 トランジション時間を指定するには、最後に希望のトランジション時間を追加するだけです。プロパティに対応するトランジション時間を個別に設定することも、すべてに適用される 1 つだけを設定することもできます。 <style>
div{
width: 200px;
height: 200px;
background-color: rgb(255, 156, 156);
transition-property: width,height;
transition-duration: 3s,1s;
}
div:hover{
width: 300px;
height: 300px;
}
</style>ログイン後にコピー
トランジション効果: トランジション前、長さと幅は両方とも 200 でした。長さ 3 秒、幅 1 秒のトランジション後、長さと幅は両方とも 300
1.3 移行遅延 移行遅延
##トランジション遅延 トランジションの遅延待ち時間、つまり何秒後にトランジションが開始されるかを指定するために使用されます。待ち時間は最後に追加するだけです。待機時間を設定できます。すべて
<style>
div{
width: 200px;
height: 200px;
background-color: rgb(255, 156, 156);
transition-property: width,height;
transition-duration: 3s;
transition-delay: 2s;
}
div:hover{
width: 300px;
height: 300px;
}
</style>ログイン後にコピー
トランジション効果: カーソルを置いた後、トランジションを開始する前に 2 秒待機します
#1.4 遷移タイミング関数の遷移タイプ
##transition-timing-function これは、次の一般的なタイプを持つ遷移のタイプを設定するために使用できます。容易さ: 最初に加速してから減速します
リニア: 均一速度
- 容易度- in: 加速
- イーズアウト: 減速
- イーズインアウト: 最初に加速してから減速します (速度変化を容易にするよりも効果がより明らかです)
- cubic-bezier:ベジェ曲線
- #速度の変化は似ていますが、変化の速度が異なります。ここでの唯一の違いは、イーズインの例を示します
-
<style>
div{
width: 200px;
height: 200px;
background-color: rgb(255, 156, 156);
transition-property: width,height;
transition-duration: 3s;
transition-timing-function: ease-in;
}
div:hover{
width: 300px;
height: 300px;
}
</style>ログイン後にコピー
##
1.5 过渡的连写形式
我们过渡中最常用的还是连写形式，连写形式过渡属性我们方便起见写作 all 即可，然后别的过渡属性跟在后面空格隔开即可，哪个元素要做过渡就把过渡加给哪个元素，此处是div鼠标放上后扩大，但是是div做过渡，所以过渡属性加给div
<style>
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
transition: all 2s linear;
}
div:hover{
width: 300px;
height: 300px;
}
</style>ログイン後にコピー
二：transform 2D动画效果
transform 可以让过渡元素产生一些常规的 2D 动画效果，例如旋转，位移，缩放，扭曲......等等，以及 3D 的立体效果。
-
transform-origin：基点
-
transform：translate：平移效果
-
transform-rotate：旋转效果
-
transform-scale：缩放效果
下面会对这六个常用属性做出逐个讲解，有个注意点要提醒：大多数情况下，如果既有旋转也有移动，要先写移动再写旋转
2.1 transform-origin 基点
基点就是位移或者旋转等变形围绕的中心，默认都是中心点，例如先举个旋转的例子（旋转后面会讲到）大家体会一下基点的概念。切记：基点设置给要过渡的元素
基点的值：
基点的值可以是具体数值例如 transform-origin：20px 30px; 第一个为x方向，第二个为y方向，也可以是方位名词 transform-origin：top left; 此处先写x或先写y方向都可以，此处 top left 表示基点为左上角，bottom right 表示右下角......
2.1.1 默认的基点
默认基点为元素正中心
<style>
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
margin: 100px auto;
transition: all 2s linear;
}
div:hover{
transform: rotateZ(90deg);
}
</style>ログイン後にコピー
ログイン後にコピー
2.1.2 设置后的基点
设置基点为 transform-origin：bottom left; （左下角）
<style>
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
margin: 100px auto;
transition: all 2s linear;
transform-origin: left bottom;
}
div:hover{
transform: rotateZ(90deg);
}
</style>ログイン後にコピー
2.2 transform：translate 平移
平移可分为以下几种：
-
transform：translateX 沿水平方向平移
-
transform: translateY 沿竖直方向平移
-
transform: translateZ 沿Z方向移动的距离，不加透视的话看不出来效果，这个放在后面3D板块讲解
-
transform：translate(x, y, z) 沿和向量方向平移，第一个为x方向移动距离，第二个为y方向移动的距离，第三个为z轴移动的距离，中间要求逗号隔开
案例中我们只举例第最后一个组合写法，其它都是单独的朝某个方向移动较为简单
<style>
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
transition: all 2s linear;
}
div:hover{
transform:translate(200px,200px)
}
</style>ログイン後にコピー
效果为水平走200px，竖直走200px
2.3 transform：rotate 旋转
旋转的角度单位为 deg，要旋转360度即为 360deg
旋转可分为以下几种：
-
transform：rotateX 以x为轴旋转，不加3D透视看不出立体3D效果，后面讲到3D再讲解
-
transform: translateY 以y为轴旋转，不加3D透视看不出立体3D效果，后面讲到3D再讲解
-
transform: translateZ 沿Z为轴旋转，为2D平面旋转，可以设置基点
此处先讲第三个不需要加3D透视的沿z轴旋转
<style>
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
margin: 100px auto;
transition: all 2s linear;
}
div:hover{
transform: rotateZ(90deg);
}
</style>ログイン後にコピー
ログイン後にコピー
效果为绕z轴旋转了90度
2.4 transform：scale 放缩
此处放缩的优点在于其是不影响其他页面布局的位置的，并且可以设置基点，默认基点为中心，放缩默认为围绕中心向外扩大或向内缩小，参数直接填写 要放缩的倍数即可，例如要放缩2倍： transform：scale(2)
<style>
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
transition: all 2s linear;
margin: 100px auto;
transform-origin: top left;
}
div:hover{
transform:scale(2)
}
</style>ログイン後にコピー
效果为以左上角为基点扩大了两倍
三：transform 3D动画效果
这一板块就要开始我们的3D效果了，上述案例中的沿z位移，绕x/y旋转等等，其实都是3D的动画效果，我们需要加上透视属性才能有用：perspective: 1000px; 数值是视距可以自己设置，这个值大小可以根据自己的视觉感受调整满意即可。
举个例子感受下透视perspective的重要性：
3.1 不加透视的绕x轴旋转
<style>
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
transition: all 2s linear;
margin: 100px auto;
}
div:hover{
transform:rotateX(360deg)
}
</style>ログイン後にコピー
不加透视视觉效果毫无立体感
3.2 加透视的绕x轴旋转
透视要加给需要3D效果的元素的父元素，此处div的父元素为body，所以给body加透视
<style>
body{
perspective: 500px; //透视
}
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
transition: all 2s linear;
margin: 100px auto;
}
div:hover{
transform:rotateX(360deg)
}
</style>ログイン後にコピー
加上透视后有了近大远小的立体呈现感，不同的透视值对应的效果也不同，自己觉得合适即可，绕 y 旋转同理。
3.3 加透视的沿z轴平移
加上透视后沿z轴移动，我们想想是不是效果应该是慢慢变大或变小
<style>
body{
perspective: 500px;
}
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
transition: all 2s linear;
margin: 100px auto;
}
div:hover{
transform:translateZ(200px)
}
</style>ログイン後にコピー
沿z平移200px，视觉上立体感为盒子放大了
3.4 重要属性：是否开启3D效果呈现
这个属性为 transform-style，默认值为 flat ，即不开启子盒子3D效果保持呈现，如果值改为 preserve-3d，则开启子盒子3D效果保持呈现，这个属性和透视一样也是 写给父级，但是影响的是子盒子3D效果是否保持呈现
- transform-style：flat 默认值，代表不开启保持子盒子3D效果
- transform-style：preserve-3d 代表开启保持子盒子3D效果
举例子说明一下 ：
例如我们想做出这个效果，理论上只需要让蓝色的子盒子绕x旋转一定角度，再让外部粉色大盒子绕y旋转一定角度即可呈现
第一步：
让蓝色子盒子绕x旋转一定角度，并且记得父盒子添加透视
.out{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
margin: 100px auto;
perspective: 500px;
}
.inner{
width: 200px;
height: 200px;
background-color: rgb(71, 142, 219);
transform: rotateX(60deg);
}ログイン後にコピー
成功呈现出以下效果：
第二步：
让外部粉色父盒子绕y旋转一定角度即可，由于外部大盒子也需要透视效果，所以给其父元素body也要加上透视
<style>
body{
perspective: 500px;
}
.out{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
margin: 100px auto;
transition: all 2s;
perspective: 500px;
}
.inner{
width: 200px;
height: 200px;
background-color: rgb(71, 142, 219);
transform: rotateX(60deg);
}
.out:hover{
transform: rotateY(50deg);
}
</style>ログイン後にコピー
出现了很严重的问题，蓝色子盒子的透视效果没有呈现出来
这时候就需要我们这个很重要的属性了 transform-style：preserve-3d 开启子元素的3D效果保持
第三步：
开启内部蓝色盒子的3D效果保持 transform-style：preserve-3d，注意要写给父级。另外我们的透视可以写给父亲的父亲，所以此处当父子两个盒子都需要透视时，只需要给父亲的父亲body加上透视即可，父亲不需要再加透视。
<style>
body{
perspective: 500px;
}
.out{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
margin: 100px auto;
transition: all 2s;
transform-style: preserve-3d; //开启子元素3D保持
}
.inner{
width: 200px;
height: 200px;
background-color: rgb(71, 142, 219);
transform: rotateX(60deg);
}
.out:hover{
transform: rotateY(50deg);
}
</style>ログイン後にコピー
更多编程相关知识，请访问：编程视频！！
以上がCSS3 プロパティ: トランジションとトランスフォームについて説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
