一、过渡效果：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()：通过矩阵变换来实现复杂的变形效果。它接受六个参数，分别代表矩阵变换的各个元素。具体来说，第一个参数控制水平缩放、倾斜和旋转，第二个参数控制水平和垂直倾斜，第三个参数控制垂直缩放、倾斜和旋转，第四个参数控制水平和垂直位移，第五个和第六个参数控制透视效果。
示例
css
.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(<x-angle>, <y-angle>); */
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（暂停）。
例子
html
<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>