CSS3 过渡与动画

CSS 过渡（Transition）和动画（Animation）为更改元素的样式提供了平滑、渐进的方式，但是它们的工作方式有些不同。

这是它们之间的主要区别：

• 创建一个从一个 CSS 值到另一个值平滑的过渡。
• 你需要触发器去运行 CSS 过渡。例如，你可以使用 :hover 伪类 在用户指针悬停在元素上时运行过渡。
• 过渡只有两个状态：初始态和最终态。你不能创建中间步骤。
• 只运行一次。
• 最适合用在基础样式的更改。

CSS3 过渡

CSS3 过渡属性提供了一种平滑、渐进的方式去更改指定的 CSS 属性值，适用于鼠标单击、获得焦点等事件。

快速入门示例

<div></div>

div {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  transition: all 0.5s; /* 添加过渡效果 */
}
div:hover {
  height: 300px;
}

transition 属性详解

• transition-property: 指定过渡的 CSS 属性
• transition-duration: 指定过渡所需的时间
• transition-timing-function: 指定过渡函数
• transition-delay: 指定过渡的延迟时间

过渡示例

div {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  transition: background-color 2s, height 5s;
}
div:hover {
  height: 300px;
  background-color: pink;
}

过渡事件

在 JS 中可以使用 transitionend 事件监听过渡效果结束：

var div = document.getElementById("oDiv");
div.onclick = function() {
  div.style.height = "400px";
}
div.ontransitionend = function() {
  console.log("过渡结束后触发");
}

CSS3 动画

CSS3 动画模块可制作类似 flash 的动画。

快速入门示例

<div></div>

div {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  position: absolute;
  animation: test 5s;
}
@keyframes test {
  0% { left: 0; top: 0; }
  25% { left: 400px; top: 0; }
  40% { left: 400px; top: 200px; }
  65% { left: 0; top: 200px; }
  100% { left: 0; top: 0; }
}

动画属性详解

• animation-name: 绑定到选择器的关键帧名称
• animation-duration: 动画完成所需时间
• animation-timing-function: 动画速度曲线
• animation-delay: 动画启动前的延迟
• animation-iteration-count: 动画播放次数
• animation-direction: 是否反向播放动画
• animation-fill-mode: 动画不播放时应用的样式
• animation-play-state: 动画是否正在运行或暂停

动画事件

• animationstart: 动画开始后触发
• animationiteration: 动画重复播放时触发
• animationend: 动画完成后触发

参考链接

CSS 过渡与动画手册

总结

CSS 过渡和动画是增强用户体验的重要工具。通过使用这些技术，可以创建更动态和交互性的网页。