CSS3 动画切换效果：transition 和 animation 属性详解

要设置动画切换效果，可以使用 CSS3 的 transition 或者 animation 属性。

1. 使用 transition 属性：

   • 首先，给需要添加动画效果的元素添加一个过渡属性，比如 'width'、'height'、'opacity' 等。
   • 然后，使用 transition 属性来定义过渡效果的时长、延迟、过渡类型等。
   • 最后，通过改变元素的样式属性值来触发过渡效果。

   例如，将一个元素的宽度从 100px 过渡到 200px，可以这样设置：

   .element {
     width: 100px;
     transition: width 0.5s ease-in-out;
   }
   
   .element:hover {
     width: 200px;
   }
   

   这样，当鼠标悬停在元素上时，宽度会过渡到 200px，过程时间为 0.5 秒，效果为缓入缓出。

2. 使用 animation 属性：

   • 首先，通过 @keyframes 规则定义动画的关键帧，即动画开始和结束时的状态。
   • 然后，使用 animation 属性来定义动画的时长、延迟、动画类型等。
   • 最后，将动画属性应用到需要添加动画效果的元素上。

   例如，将一个元素的透明度从 0 过渡到 1，可以这样设置：

   @keyframes fade-in {
     0% {
       opacity: 0;
     }
     100% {
       opacity: 1;
     }
   }
   
   .element {
     animation: fade-in 1s ease-in-out;
   }
   

   这样，元素会在 1 秒内从完全透明过渡到完全不透明，效果为缓入缓出。

注意：transition 和 animation 属性都可以设置过渡效果的时长、延迟、过渡类型等，具体可以根据需求进行调整。