CSS3动画和HTML5新特性详解

CSS3动画和HTML5新特性详解

1. CSS3动画

1.1 过渡效果

CSS3引入了过渡效果，可以通过定义属性的开始值和结束值来实现平滑的过渡效果。通过使用transition属性，可以指定过渡的属性、持续时间、延迟和动画函数。下面是一个例子：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}
div:hover {
  width: 200px;
}

在上面的例子中，当鼠标悬停在div元素上时，宽度将从100px过渡到200px，持续时间为2秒。

1.2 关键帧动画

关键帧动画允许开发者定义动画的每个关键帧，从而实现更加灵活的动画效果。通过使用animation属性，可以指定关键帧的名称、持续时间、延迟、动画次数和动画函数。下面是一个例子：

@keyframes myAnimation {
  0% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(2);
  }
  
  100% {
    transform: scale(1);
  }
}
div {
  animation: myAnimation 2s infinite;
}

在上面的例子中，一个名为myAnimation的关键帧动画被定义，它会让div元素从初始状态到50%的缩放比例，然后再回到初始状态，持续时间为2秒，并无限循环播放。

2. HTML5新特性

2.1 语义化标签

HTML5引入了一些新的语义化标签，如