css：过渡transition 、转换transform、动画animation

一、过渡效果：transition 属性

transition 属性是CSS3中用来实现元素过渡效果的属性之一。它定义了元素在不同状态之间平滑过渡的效果，让元素的改变更加流畅和动态。

transition 属性包括以下几个子属性：

• transition-property：指定要过渡的CSS属性名称，可以使用通配符 all 表示所有属性都要过渡。
• transition-duration：指定过渡的持续时间，单位可以是秒（s）或毫秒（ms）。
• transition-timing-function：指定过渡的时间函数，用于控制过渡的速度曲线，常见的值有 ease、linear、ease-in、ease-out、ease-in-out 等。
• transition-delay：指定过渡的延迟时间，即过渡开始前等待的时间，单位可以是秒（s）或毫秒（ms）。

二、2D，3D转换效果：transform

“transform” 是一个 CSS 属性，可以用来对元素进行变形。它可以改变元素的位置、大小、方向和形状，以及应用旋转、缩放、倾斜和扭曲等效果。

下面是一些常用的 transform 属性值：

• translate()：平移元素的位置。它接受一个或两个参数，分别表示水平和垂直方向的偏移量。单位可以是像素、百分比或关键字（如translateX()或translateY()）。

• scale()：缩放元素的大小。它接受一个或两个参数，分别表示水平和垂直方向的缩放比例。如果只提供一个参数，则表示在两个方向上使用相同的缩放比例。

• rotate()：旋转元素。它接受一个参数，表示旋转的角度。角度可以是正负值，单位可以是度（deg）或弧度（rad）。

• skew()：倾斜元素。它接受一个或两个参数，分别表示水平和垂直方向的倾斜角度。角度可以是正负值，单位可以是度（deg）或弧度（rad）。

• matrix()：通过矩阵变换来实现复杂的变形效果。它接受六个参数，分别代表矩阵变换的各个元素。具体来说，第一个参数控制水平缩放、倾斜和旋转，第二个参数控制水平和垂直倾斜，第三个参数控制垂直缩放、倾斜和旋转，第四个参数控制水平和垂直位移，第五个和第六个参数控制透视效果。

示例

.element {
	/* 元素沿着X轴平移100像素，沿着Y轴平移100像素，即向右下方移动100像素。 */
	transform: translate(100px, 100px);
	/* 也可以分开写，只是达不到两个样式同时出现的效果*/
	/* 沿X轴向右平移100像素 */
	transform: translateX(100px);
	/* 沿Y轴向下平移100像素 */
	transform: translateY(100px);
}
 
.element {
	/* 在X轴和Y轴上均匀地缩小为原来的0.5倍 */
	transform: scale(0.5, 0.5);
	/* 也可以分开写，只是达不到两个样式同时出现的效果*/
	/* 沿着X轴的缩放，将元素的宽度缩小到原来的一半 */
	transform: scaleX(0.5);
	/* 沿着Y轴的缩放，将元素的高度缩小到原来的一半 */
	transform: scaleY(0.5);
}
 
.element {
	/* 将元素按照顺时针方向旋转45度，绕着自身的中心点进行旋转 */
	transform: rotate(45deg);
	/* 沿着X轴的旋转，使元素绕着X轴旋转45度 */
	transform: rotateX(45deg) rotateY(45deg);
}
 
.element {
	/* 元素在X轴方向上沿顺时针方向斜切30度，在Y轴方向上沿逆时针方向。transform: skew(, ); */
	transform: skew(30deg, -20deg);
}
 
.element {
	/* 使用一个2D变换矩阵来对元素进行变换。这个矩阵包含六个值，按顺序分别表示缩放、倾斜和平移。 */
	/* transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY); */
	/* scaleX和scaleY表示在X轴和Y轴上的缩放比例；skewX和skewY表示在X轴和Y轴上的倾斜角度（正值为顺时针，负值为逆时针）；translateX和translateY表示在X轴和Y轴上的平移距离。 */
	transform: matrix(1, -0.2, 0, 1.5, 0, 0);
	/* 	在X轴方向上不进行缩放（scaleX为1）
		在Y轴方向上按1.5倍进行缩放（scaleY为1.5）
		在X轴方向上按逆时针倾斜0.2弧度（skewY为-0.2）
		在Y轴方向上不进行倾斜（skewX为0）
		不进行平移（translateX和translateY都为0） 
	*/
}

三、创建动画效果的属性：animation（@keyframes）

animation 是 CSS 中用于创建动画效果的属性。它是一个复合属性，包含了多个子属性，在其中我们可以设置动画名称、持续时间、动画函数、延迟时间、重复次数、方向以及是否暂停等属性。

• animation-name: 指定要应用到元素上的关键帧动画的名称。
• animation-duration: 指定动画的持续时间，单位为秒或毫秒。
• animation-timing-function: 指定动画变化的速度曲线，也称为缓动函数。
• animation-delay: 指定动画开始之前的延迟时间，单位为秒或毫秒。
• animation-iteration-count: 指定动画播放的次数，可以使用 infinite 表示无限循环。
• animation-direction: 指定动画在每次重复时的播放方向，可以设置为 normal（正常），reverse（反转），alternate（交替）或 alternate-reverse（交替反转）。
• animation-fill-mode: 指定动画播放前和播放后应用到元素上的样式，可以设置为 none、forwards、backwards 或 both。
• animation-play-state: 指定动画的播放状态，可以设置为 running（运行中）或 paused（暂停）。

例子

<template>
	<view id="my-element">view>
template>
<script>
	export default {
		data() {
			return {
 
			}
		},
		methods: {
 
		}
	};
script>
<style>
	#my-element {
	    animation: my-animation 2s ease-in-out 1s infinite alternate forwards;
		background-color:red;
		width:100rpx;
		height:100rpx;
	}
	
	@keyframes my-animation {
	    0% {
	        opacity: 0;
	        transform: translateX(-100%);
	    }
	    50% {
	        opacity: 1;
	        transform: translateX(0);
	    }
	    100% {
	        opacity: 0;
	        transform: translateX(100%);
	    }
	}
style>