在不断发展的Web开发环境中，创建迷人的用户体验是一个至关重要的目标。级联样式表（CSS）提供了一系列工具来增强交互并吸引用户。在本文中，我们将研究CSS转换，过渡和动画的领域，从而发现它们将静态设计转化为动态和沉浸式网络体验的潜力。

让我们开始开始ð

1. Tranforms
2. Transitions
3. Animations

转换

它是用于旋转，扩展，移动，偏斜等的CSS属性。元素。

与转换属性一起使用的2D方法是：

1. translate
2. rotate
3. scale
4. skew
5. matrix

翻译（x，y）：

此属性用于沿其包含元素的X和/或y轴移动一个元素，而不会影响文档的正常流或周围元素的布局。

语法：

.box1{
  tansform: translate(30px,100px);
}

注意：translate（x，y）：第一个值应偏移x轴，第二个值应偏移y轴。

在上面的代码epen中，我们创建了一个高度为10VH（viewport height）的盒子，宽度为10VW（viewport width）。使用翻译属性，我们从X轴（偏移偏移）和Y轴（偏移偏移）中将框30 PX移动了。

单值语法用于翻译：

.box1{
  tansform: translateX(30px);
}

/*OR*/

.box1{
  tansform: translateY(100px);
}

/*OR*/

.box1{
  tansform: translateX(30px) translateY(100px); /*This will work same as translate(30px,100px) */
}

有关翻译财产的更多信息，请访问：
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

旋转：

CSS旋转属性用于围绕指定点或轴旋转元素（例如图像，文本或容器）。它使您可以更改元素的视觉取向，使其具有旋转的外观。

旋转以程度指定，正值沿顺时针方向旋转元件，而负值则以逆时针方向旋转。默认旋转点是元素的中心，但是您也可以使用“转换 - 原始”属性指定一个不同的点。

变换 - 原始特性：

CSS转换原始属性确定使用转换属性以其他方式旋转，缩放或转换元素的点。 它使您可以控制转换的枢轴点或轴，从而影响元素在视觉上的变化。

该属性采用从元素上左上角指定水平和垂直偏移的值，，或者您可以使用中心，顶部，底部，左和右键等关键字来定义相对于元素边缘的来源。

注意：必须与变换属性一起使用转换 - 原始属性。

旋转语法：

.box1{
  tansform: rotate(45deg);
}

tranform-Origin的语法：

.box1{
  transform-origin: top right; 
  tansform: rotate(45deg);
}

在上面的编码epen中，我们使用旋转属性从中心来源（默认情况下）旋转了45度的框。

现在，让我们尝试使用变换原属性旋转不同的框架。

您可以调整转换 - 原始值以控制枢轴点并达到所需的转换效果。

注意：|转化原始：X y |第一个值应偏移x轴，第二个值应偏移y轴。

有关旋转财产的更多信息，请访问：
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

有关转换原产属性的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

比例：

此属性用于更改元素的大小，使其在保持比例的同时看起来更大或更小。

“比例”属性采用一个或两个值，代表沿水平和垂直轴的缩放系数。单个值平等地缩放两个轴，而两个值允许您独立扩展它们。

值小于1降低尺寸（收缩），值大于1的尺寸（扩大）。

语法：

.box1{
  tansform: scale(2,0.5);
}

练习：尝试将光标放在上面代码epen中的箭头图像上。

请参阅其如何改变大小。这是使用“比例”属性和“悬停”属性实现的。

刻度的单值语法：

.box1{
  tansform: scaleX(2);
}

/*OR*/

.box1{
  tansform: scaleY(0.5);
}

有关标准财产的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

偏斜：

该特性用于通过沿水平和/或垂直轴倾斜元件来扭曲元素的形状。

偏斜属性将一个或两个角度作为值，代表沿X轴（水平）和Y轴（垂直）偏斜的量。正角向元素朝着一定方向倾斜，而负角则向相反的方向倾斜。

语法：

.box1{
  tansform: skew(45deg, 20deg);
}

在上面的编码epen中，我们沿x轴偏向45度的“框2”。

有关偏斜物业的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew

矩阵：

此属性采用6个参数。借助这些参数，我们可以旋转，扩展，移动（翻译）和偏斜元素。

语法：

matrix（scalex（），skewy（），skewx（），scaley（），translatex（），translatey（））

.box1{
  tansform: matrix(2, 45deg, 12deg, 0.5, 10px, 150px);
}

有关矩阵属性的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

与变换属性一起使用的3D方法为：

1. translate3d
2. 旋转3D
3. 透视

当设置z轴的翻译和旋转属性时，在我们看到任何效果之前，还必须在父元素上设置透视属性。

透视属性确定对象与查看器之间的距离。较小的值会产生更强的3D效果，使对象显得更近且更明显，而较大的值则降低了感知的3D效果，使对象看起来更远。

在设置元素的透视属性时，是获得透视视图而不是元素本身的子元素。

语法：

.container{
  perspective:100px;
}
.box1{
  tansform: translateZ(10px) rotateZ(45deg);
}

有关透视属性的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

有关转换财产的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/transform

现在有趣的部分开始了ð

过渡

CSS过渡属性用于在修改属性时在指定的持续时间内在元素样式中创建平滑而动画的更改。它使您可以控制元素初始状态和最终状态之间过渡的速度和易度。

过渡属性是一种强大的工具，用于创建更光滑的用户体验并在Web交互中添加视觉抛光。

过渡属性是：

1. 过渡 - 概括：要过渡的属性名称
2. 过渡效果：整体过渡的持续时间 3. 过渡 - 定时功能：这用于定义过渡动画的加速度和减速模式。
3. 过渡 - 延迟：延迟过渡

语法：

.box1{
  background-color: blue;
}

.box1:hover{
  background-color: blue;
  transition-property: background-color;
  transition-duration: 3s;
  transition-timing-function: ease-in;
  transition-delay: 1s;  
}

练习：

1. 尝试更改上述Codepen中的过渡效率
2. 尝试清除Box1元素中的所有过渡，而仅以悬停效果运行代码。您会看到这些更改，但是当使用过渡时它们不会那么平稳。因此，我们可以在过渡属性的过渡中实现平稳性。

重要说明 ：而不是单独使用上述所有属性，我们可以在一个属性中使用它们，即过渡属性的速记属性。

tp - transition -property
td - 过渡效果
ttf - 过渡 - 插入功能
tdy - 过渡 - 延迟

语法：
过渡：TP TD TTF TDY;

过渡属性的速记属性示例：

.box1{
  background-color:black;
}

.box1:hover{
  background-color:orange;
  transition : background-color 2s ease-in 1s;
}

有关过渡属性的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/transition

过渡触发器：

CSS中的过渡触发器确定何时应在元素上发生过渡效应。这些触发因素是启动从一种样式状态到另一种样式的过渡，创造出平滑且视觉上吸引人的动画的事件。常见的过渡触发器包括：

：悬停 - >当用户将光标悬停在元素上时会触发过渡。

：焦点 - >当元素接收到焦点时发生过渡。

：焦点 - > - > - >当元素或任何后代接收到焦点时发生过渡。

.box1{
  background-color:black;
  animation-name: animatebox1;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-iteration-count: infinite; 
}


@keyframes animatebox1{
  from{
    background-color:black;
  }
  to{
    background-color:orange;
  }
}

@keyframes animatebox1{
  0%{
    background-color:black;
  }
  20%{
    background-color:green;
  }
  60%{
    background-color:orange;
  }
  80%{
    background-color:blue;
  }
  100%{
    background-color:yellow;
  }
}