ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSトランジションとは何ですか？ CSS のトランジション要素の簡単な紹介

CSSトランジションとは何ですか？ CSS のトランジション要素の簡単な紹介

不言オリジナル: 2018-08-10 10:28:493253ブラウズ

この記事の内容は、CSSトランジションとは何か？ CSS のトランジション要素についての簡単な説明は、必要としている友人が参考にできることを願っています。

CSS トランジション: あるスタイルから別のスタイルに徐々に変化する要素の効果。
遷移に必要な条件:

1. 遷移される要素には CSS スタイルが必要です。

2. 移行時間が必要です。

以下は、transition 要素の属性です:

transition: 短縮属性。1 つの属性に 4 つの遷移属性を設定するために使用されます。

transition-property: トランジションを適用する CSS プロパティの名前を指定します。

transition-duration: 移行に要した時間。

transition-timing-function: 遷移要素の時間曲線。属性値は、linear (均一な速度のプロセス)、ease (徐々に遅くなるプロセス)、ease-in (一定の速度のプロセス) です。加速)、イーズアウト (減速のプロセス) 、cubic-bezier(0,0,0,0) ベジェ曲線

transition-lay: 遷移の開始時間 (つまり、遷移にかかる時間を指定します)実行を開始)、デフォルトは 0 です

通常、マウスをスライドまたはクリックした後、マウスのスライドを例に挙げます:

1 の幅は 120% になります。オリジナル

2. マウスをスライドすると影が追加されます

3. マウスをスライドするとパン、回転、拡大縮小、歪み、その他の効果が得られます。

transform(2D変換)

属性値は:translate(平行移動)、rotate(回転)、scale(ズーム)、skew(歪み)

html部分

<body>
	<div id="box">
			
	</div>
</body>

css部分:

#box{
			height: 200px;
			width: 200px;
			border:1px solid #000;
			/*1.鼠标滑过宽度变为原来的120%*/
			transition-property: width; /*所要过渡的属性名称*/
			transition-duration: 1s;/*过渡的时间*/
			transition-timing-function: linear;/*过渡的时间曲线*/
			transition-delay: 0;/*过渡的开始时间*/
			/*2.鼠标滑过加上阴影*/
			transition-property: box-shadow; /*所要过渡的属性名称*/
			transition-duration: 1s;/*过渡的时间*/
			transition-timing-function: linear;/*过渡的时间曲线*/
			transition-delay: 0;/*过渡的开始时间*/
			
			/*以上写法比较麻烦所以可以简写成：*/
			transition: all 1s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/
			
			-ms-transition: all 1s linear 0s;/*兼容IE10+*/
			-moz-transform: all 1s linear 0s;/*兼容 Firefox */
			-o-transition: all 1s linear 0s;/* 兼容Opera */
			-webkit-transform:  all 1s linear 0s;/* 兼容Safari and Chrome */;
			
		}
		
		/*transform(2D转换)
		属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)*/
		
		#box:hover{
			width: 120%;
			box-shadow: 0px 0px 5px orange;
			
	       /*3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果*/
			/*1.平移*/
			transform: translate(50px,50px);  /*translate() 如果一个值表示x轴需要平移的距离，两个值则表示x、y轴需要平移的距离*/
			-webkit-transform: translate(50px,50px);/* 兼容Safari and Chrome */;
			-ms-transform: translate(50px,50px);/*兼容IE10+*/
			-moz-transform: translate(50px,50px);/*兼容 Firefox */
			-o-transform: translate(50px,50px);/* 兼容Opera */
			/*只让x轴平移*/
			transform: translateX(50px); 
			
			-webkit-transform: translateX(50px);/* 兼容Safari and Chrome */;
			-ms-transform: translateX(50px);/*兼容IE10+*/
			-moz-transform: translateX(50px);/*兼容 Firefox */
			-o-transform:  translateX(50px);/* 兼容Opera */
			/*只让y轴平移*/
			transform: translateY(50px);
			
			-webkit-transform: translateY(50px);/* 兼容Safari and Chrome */;
			-ms-transform: translateY(50px);/*兼容IE10+*/
			-moz-transform: translateY(50px);/*兼容 Firefox */
			-o-transform:  translateY(50px);/* 兼容Opera */
			
			/*2.旋转*//*兼容性同 平移*/
			transform:rotate(45deg); /*正值表示顺时针旋转，负值表示逆时针旋转*/
			 /*只让x轴旋转*/
			 transform:rotateX(45deg);
			 /*只让y轴旋转,相当一3D旋转*/
			 transform:rotateY(45deg);
			 
			 
			/*3.缩放*//*兼容性同 平移*/
			transform:scale(0,0.2); /*两个值，第一个表示水平缩放，第二个表示竖直缩放*/
			
			/*4.扭曲*//*兼容性同 平移*/
			
			transform:skew(30deg, 30deg); /*第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。*/
	
		}

CSSトランジションとは何ですか？ CSS のトランジション要素の簡単な紹介

関連記事