这些css 动画效果你一定要收藏

CSS 动画是一种让网页内容生动活泼的有效手段。以下是一些常见的 CSS 动画效果，它们可以应用在各种元素和场景中。

1. 淡入淡出效果

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

2. 滑入滑出效果

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s;
}
.slide-enter-from, .slide-leave-to {
  transform: translateX(10px);
}

3. 旋转加缩放效果

.rotate-scale-enter-active {
  transition: all 0.5s ease-in-out;
}
.rotate-scale-leave-active {
  transition: all 0.2s ease-in-out;
  position: absolute;
}
.rotate-scale-enter-from, .rotate-scale-leave-to {
  transform: scale(0) rotate(180deg);
}

4. 渐变背景色效果

.color-change-enter-active, .color-change-leave-active {
  transition: background-color 0.5s;
}
.color-change-enter-from, .color-change-leave-to {
  background-color: #ff0000;
}

5. 图片轮播效果

.carousel-enter-active, .carousel-leave-active {
  transition: all 1s;
}
.carousel-enter-from, .carousel-leave-to {
  transform: translateX(100px);
  opacity: 0;
}

这些 CSS 动画效果可以通过 Vue.js 或 React.js 等现代前端框架中的 <transition> 或 <animated> 组件来应用。

例如，在 Vue.js 中使用一个淡入淡出效果：

<template>
  <div id="app">
    <transition name="fade">
      <div v-if="show">Hello World!</div>
    </transition>
    <button @click="show = !show">Toggle</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>
 
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

以上代码中的 <transition name="fade"> 是关键部分，它会根据 show 数据属性的变化来应用淡入淡出动画。