CSS3新增特性和CSS3动画

CSS3是CSS（层叠样式表）的第三个主要版本，于2011年被公布并且正在持续更新。它引入了许多新特性，包括圆角、阴影、渐变、变换等。

CSS3新特性

• 选择器（Selector）

  • 属性选择器
  • 结构伪类选择器
  • 伪元素

• 边框与背景

  • border-radius: 圆角
  • box-shadow: 阴影
  • gradient: 渐变

• 文字效果

  • text-shadow: 文字阴影
  • word-wrap: 自动换行

• 2D/3D转换

  • transform: 变换

• 动画（Animation）

  • @keyframes 规则
  • animation 属性

CSS3动画示例代码

/* 定义一个名为fadeIn的关键帧动画，从完全透明到完全不透明 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 应用动画到元素，持续时间2秒，延迟0.5秒开始 */
.element {
  animation: fadeIn 2s ease-in-out forwards 0.5s;
}

在这个例子中，.element 类将在0.5秒后开始执行名为fadeIn的淡入动画，动画在2秒内完成，并且在动画完成后保持最后的状态。

CSS3动画的JavaScript触发示例

// 获取元素
var element = document.querySelector('.element');
 
// 触发动画（例如在某个事件发生时）
element.classList.add('animate');

在这个JavaScript示例中，我们通过添加一个类来触发之前定义的CSS动画。这个类可以包含其他样式或者是一个触发动画的关键字，如animate。这种方式可以通过编程方式控制CSS动画的触发。