CSS动画 学习

        css动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数。常见的动画效果很多，比如平移、旋转、缩放等，css实现动画的方式有以下几种：

1. transition：实现渐变动画
2. transform：实现转变动画
3. animation：实现自定义动画

 transition实现渐变动画介绍：

  transition 属性用于在 CSS 中实现过渡动画，它可以让元素的样式在一定时间内平滑地从一个状态变化到另一个状态。

语法：

transition: property duration timing-function delay;

• property：可选，指定要过渡的 CSS 属性名称，可以是单个属性，也可以是多个属性组成的列表，如果指定了多个属性，用逗号分隔。如果省略该属性值，则表示所有属性都会发生过渡。
• duration：必需，指定过渡动画持续的时间，可以是秒（s）或毫秒（ms）。
• timing-function：可选，指定过渡动画的时间函数，控制过渡过程中的速度变化，如 ease、linear、ease-in-out 等。
• delay：可选，指定过渡动画开始前的延迟时间。

完整示例：

        在这个示例中，.box 元素的宽度会在 1 秒内从原来的 100px 变为 200px，采用了 ease-out 的时间函数，延迟了 0.5 秒后开始动画效果。当鼠标悬停在 .box 元素上时，宽度会发生变化，触发渐变动画。

/* 定义元素hover时宽度渐变动画 */
.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: width 1s ease-out 0.5s;
}

/* hover时改变宽度 */
.box:hover {
  width: 200px;
}

transform实现转变动画介绍：

        transform属性应用于2D 或 3D转换。可以实现倾斜、移动、旋转、缩放这四类动画效果。

语法：

transform: transform-function;

• transform-function：变形函数指定了元素的具体变换效果，常见的变形函数包括：
  • translate()：平移元素。
  • rotate()：旋转元素。
  • scale()：缩放元素。
  • skew()：倾斜元素。
  • matrix()：使用 2D 转换矩阵来定义变换。

每个变形函数可以接受不同的参数，以实现不同的效果。例如，translate() 函数可以接受一个或两个参数，分别表示水平和垂直方向上的偏移量。

完整示例：

        在这个示例中，.box 元素在 hover 状态下会向右平移 50px 并顺时针旋转 45 度，采用了 ease-out 的时间函数以及 1 秒的过渡时间。这样就实现了在鼠标悬停时的平移和旋转动画效

/* 定义元素hover时平移和旋转动画 */
.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: transform 1s ease-out;
}

/* hover时改变平移和旋转 */
.box:hover {
  transform: translateX(50px) rotate(45deg);
}

animation实现自定义动画介绍：

         为了实现更灵活的动画效果，css3还提供了自定义动画的功能，通过关键帧动画@keyframes搭配 animation 属性一起使用来实现效果。

语法：

   animation 属性用于在 CSS 中实现自定义的动画效果，可以通过指定关键帧来定义动画的各个阶段。

        关键帧介绍：@keyframes 规则用于创建动画 。在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果 。必须定义动画的名称和时长 ，因为如果忽略时长, 则动画不会允许, 因为默认值是 0。同时请用百分比来规定变化发生的时间, 或用关键词 “from” 和 “to”（等同于 0% 和 100%） 。

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;

• animation-name：指定要应用的关键帧动画的名称，可以是自定义的名称或者预定义的关键字（如 none）。
• animation-duration：指定动画持续的时间，可以是秒（s）或毫秒（ms)。
• animation-timing-function：指定动画的时间函数，控制动画执行过程中的速度变化，如 ease、linear、ease-in-out 等。
• animation-delay：指定动画开始前的延迟时间，可以是秒（s）或毫秒（ms）。
• animation-iteration-count：指定动画播放的次数，数字值，关键字 infinite。
• animation-direction：指定动画播放的方向，关键字 normal、reverse、alternate、alternate-reverse。
• animation-fill-mode：指定动画执行前后元素样式的变化，默认为none。使用forwards保留最后一帧样式，backwards保留第一帧样式，both同时保留首尾帧样式。

完整示例：

        在这个示例中，定义了一个名为 slide-in 的自定义动画，使 .box 元素在水平方向上从左侧滑入到正常位置。然后，通过 animation 属性将该动画应用于 .box 元素，设置了动画持续时间为 1 秒，时间函数为 ease-out，延迟 0.5 秒开始执行，无限循环播放，并且在每次循环中改变动画的方向。

/* 定义自定义动画 */
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* 应用动画 */
.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation: slide-in 1s ease-out 0.5s infinite alternate;
}

部分属性值的取值：

         X-timing-function: 比如 transition-timing-function、 animation-timing-function

值	描述	示例效果
linear	匀速变化，属性值在整个过渡期间保持匀速变化。
ease	默认值，慢-快-慢，开始时缓慢，然后加速，最后再缓慢。
ease-in	慢-快，开始时缓慢，然后加速。
ease-out	快-慢，开始时快速，然后减速。
ease-in-out	慢-快-慢，开始和结束时缓慢，中间时加速。
cubic-bezier(n,n,n,n)	自定义时间函数，通过贝塞尔曲线控制速度变化，可定义四个参数，分别是 P1(x1, y1)、P2(x2, y2) 的两个控制点坐标。

        X-direction: 比如 transition-direction、 animation-direction

值	描述	示例效果
normal	默认值，动画按正常方向播放。
reverse	动画反向播放，动画效果将与正向播放相反。
alternate	动画交替播放，动画在正向和反向之间交替进行。
alternate-reverse	动画反向交替播放，动画先反向播放一次，然后正向播放一次，以此类推。