CSS3 Transitions 和 Animations 属性指南

前端

2023-06-14 19:42:39

掌握CSS3动画和过渡效果，为你的网页注入活力

欢迎来到CSS3动画和过渡效果的奇幻世界，一个可以让你的网页焕发生机和吸引力的领域。如果你是一名渴望提升网页视觉效果的网页设计师，那么这篇文章将为你提供你需要了解的一切。

动画与过渡：表兄弟间的微妙差异

过渡效果 就像元素缓慢优雅的蜕变，它让你可以控制元素在状态改变时的变化，比如颜色、位置或大小。而动画效果 则更为大胆，让你可以让元素在页面上尽情舞动，旋转、移动或淡入淡出，随心所欲。

过渡属性：打造平滑的元素变化

transition-property： 决定你要改变的元素属性，比如颜色、边框或背景。
transition-duration： 控制过渡的速度，单位为秒、毫秒或百分比。
transition-timing-function： 设置过渡的节奏，有线性、缓入、缓出等选项。
transition-delay： 添加延迟效果，让过渡在指定时间后才开始。

代码示例：体验过渡效果

/* 鼠标悬停时改变按钮颜色 */
button:hover {
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  background-color: #007bff;
}

动画属性：释放元素的动态能量

animation-name： 引用你在CSS中定义的关键帧动画的名称。
animation-duration： 设置动画的持续时间，单位同上。
animation-timing-function： 控制动画的节奏，与transition-timing-function类似。
animation-delay： 添加延迟效果，让动画在指定时间后才开始。
animation-iteration-count： 指定动画播放的次数，可以是无限次或有限次。

代码示例：让元素旋转起来

/* 让元素旋转一周 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating-element {
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}