CSS实现动画效果

冬至已至
60 阅读3分钟

一. CSS过渡

transitions (过渡) transitions 的特点是被动触发。它会等待某个 CSS 属性（例如颜色、宽度）发生变化时，将这个变化过程以平滑的方式呈现出来。如果没有 transitions，属性的变化会是瞬间完成的。 因此，transitions 最适合用于响应用户的交互行为，比如当鼠标悬停 (:hover) 或元素获得焦点 (:focus) 时，为其添加平滑的视觉效果。 基于此，我们来用代码写一个按钮点击的动画，看看这个按钮会被什么样的代码控制以及呈现出怎样的效果

.btn:hover {
 transform: translateY(-10px);
}

这串代码可以让你在鼠标移动到按钮上的时候按钮向上移动10像素，就像是平时我们点击各个网页的某个按钮时按钮给出的反馈一样，但是我们发现这个反馈似乎过于生硬，按钮就和瞬移一样从下往上生硬地移动，在观感上让我不舒服，所以我要给这个移动的动画加点过渡的效果

.btn {
  transition-property: transform;
  }

.btn:hover {
  transform: translateY(-10px);
}

transition-property: transform ：指定只有transform属性的变化会触发过渡动画；有它在前，我们便可以肆无忌惮地对过渡动画做些不可描述的事

.btn {
  transition-property: transform;
  transition-duration: 0.3s;
  }

transition-duration：0.3s ：动画持续时间为 0.3 秒； 我们给这个过渡动画加了0.3秒的持续时间，似乎一下就变得不那么生硬了

.btn {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  }

transition-timing-function: ease：动画速度曲线是 “慢→快→慢” 的ease效果； 对于transition-timing-function，其实除了ease之外，他们家族的其他成员大家也有必要认识一下

  1. ease（默认值）

    • 效果：动画速度「慢 → 快 → 慢」，是最自然的过渡效果。

    1. linear

    • 效果：匀速动画，速度全程保持一致。

    自我认为这是最不常用的一个了，因为它的动画表现离现实太远，在现实中物体的运动是没有绝对的匀速直线的，用它来做动画的过渡效果脱离现实，会导致不太生动

    1. ease-in

    • 效果：「加速动画」，开始时很慢，逐渐变快。

    1. ease-out

    • 效果：「减速动画」，开始时很快，逐渐变慢。

    1. ease-in-out

    • 效果：「先加速后减速」，开始和结束都慢，中间快（比ease更对称）。
.btn {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
}

transition-delay用于设置在过渡发生前会延迟多久，我这里将值设置为0，因为大家会发现，除了0以外的值只会给我们带来当鼠标放在按钮上时的延迟感，因为动画会在你鼠标放置后的多少多少时间后出现，会影响观感

其实以上的代码可以用transition简写成

transition: transform 0.3s ease 0s;

在简写属性中，第一个时间值总是duration，其实在简写属性中，ease和0s都是transition-timing-function和transition-delay的默认值，他们甚至可以直接省略不写，自此代码也就变成了

transition: transform 0.3s;

到这里，这个按钮的动画就已经很丝滑了哈哈 但有的时候，你的动画效果应该包含多个属性的变化，除了按钮向上移动10个像素以外，我还要让按钮背景色和文字颜色产生变化

.btn:hover {
  /* 1. 元素位置变化 */
  transform: translateY(-10px);
  /* 2. 背景色变化 */
  background-color: var(--clr-accent);
  /* 3. 文字颜色变化 */
  color: var(--clr-light);
}

动画依旧生硬，那么此时，我们就应该给添加所有需要过渡的属性，并且用，分割它们

transition: transform 0.3s， background-color 0.3s，color 0.3s;

这些过渡的动画为了保证观感的一致，在过渡时间上我都使用的0.3s，那么我就可以使用all来替换这些属性名，让过渡对所有属性生效

transition: all 0.3s;
avatar
文章
阅读
粉丝