【CSS奇思妙想】CSS动画为你呈现千姿百态

2023-10-26 11:21:13

CSS的动画效果为你的网站带来了动感，把创意变为现实的呈现。这些动画效果包含了三位英雄：转换、过渡和关键帧。

1. 转换（Transforms）

转换，是指改变元素在屏幕上的位置、角度或大小。这些转换可以通过简单的CSS属性来实现，如transform: translate(x,y);、transform: rotate(angle);和transform: scale(x,y)。

2. 过渡（Transitions）

过渡，能让CSS的动画有流畅的感觉。通过在转换中设定一个过渡时间，元素就会以指定的时间从初始状态转变到最终状态。为此，可以运用transition-duration、transition-timing-function、transition-delay和transition-property这些属性。

3. 关键帧（Keyframes）

关键帧，能让CSS的动画拥有更为复杂的形态。利用@keyframes规则，可以自定义一个动画过程，这个过程由多个关键帧组成，每个关键帧定义了动画过程中的一个状态。

这些英雄组合可以创造出丰富多彩的动画效果，让你的网站更加引人注目。现在，就让我们一起探索这三项组合的应用吧！

案例一：物品从右到左飘过

.item {
  animation: float-left 2s ease-in-out infinite;
}

@keyframes float-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

运行后，元素会从屏幕的右边向左边移动。

案例二：元素旋转并变色

.item {
  animation: rotate-and-color 2s ease-in-out infinite;
}

@keyframes rotate-and-color {
  0% {
    transform: rotate(0deg);
    color: red;
  }
  50% {
    transform: rotate(180deg);
    color: blue;
  }
  100% {
    transform: rotate(360deg);
    color: green;
  }
}

元素会旋转并不断改变颜色。

案例三：元素缩放并淡入淡出

.item {
  animation: scale-and-fade 2s ease-in-out infinite;
}

@keyframes scale-and-fade {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}