CSS基础-CSS3过渡与动画

/* 定义一个简单的过渡效果 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s; /* 当宽度改变时，过渡效果在1秒内完成 */
}
 
.box:hover {
  width: 200px; /* 鼠标悬停时宽度变为200px */
}
 
/* 使用关键帧定义复杂动画 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
/* 应用动画到元素 */
.animated-box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example; /* 指定动画名称 */
  animation-duration: 4s; /* 动画周期为4秒 */
  animation-iteration-count: infinite; /* 动画无限次数播放 */
}

这段代码展示了如何使用CSS3的过渡和动画效果。.box类定义了一个当宽度改变时触发的过渡效果，而.animated-box类则使用了@keyframes规则来定义了一个从红色到黄色的背景色变化动画，并将其应用到该类的元素上。