CSS动画效果的介绍和举例，相关资源推荐

暗冰ཏོ

已于 2024-10-11 16:59:13 修改

阅读量1.1k

点赞数 25

文章标签： css 前端 css3 scss sass

于 2024-10-11 16:19:47 首次发布

本文链接：https://blog.csdn.net/zzwokstyle/article/details/142855908

版权

`1.animation` 属性详解

animation 属性用于在 CSS 中定义动画效果，可以简写为一个属性或使用多个子属性来控制动画的不同方面。主要属性有：

（1）animation-name

指定要应用的动画名称，对应定义的 @keyframes。

animation-name: myAnimation;

（2）animation-duration

指定动画持续时间。可以是秒 (s) 或毫秒 (ms)。

animation-duration: 2s;

（3）animation-timing-function

设置动画速度变化曲线，控制动画从头到尾的速度方式。

ease：默认值，缓慢开始和结束，中间加速
linear：匀速
ease-in：慢慢开始
ease-out：慢慢结束
ease-in-out：缓慢开始和结束
自定义 cubic-bezier 函数

animation-timing-function: ease-in-out;

（4）animation-delay

定义动画开始前的延迟时间。

animation-delay: 1s;

（5）animation-iteration-count

动画播放次数。可以是具体次数（如 3），或者 infinite（无限次播放）。

animation-iteration-count: infinite;

（6）animation-direction

控制动画在循环时是否反向播放。

normal：默认，正常播放
reverse：反向播放
alternate：正常和反向交替播放
alternate-reverse：反向开始，然后交替

animation-direction: alternate;

（7）animation-fill-mode

定义动画在播放前后如何影响元素样式。

none：默认值，动画结束时样式恢复到动画前状态
forwards：保持动画结束时的状态
backwards：应用动画开始前的样式
both：同时适用于 forwards 和 backwards

animation-fill-mode: forwards;

（8）animation-play-state

控制动画的播放状态。

running：播放动画（默认）
paused：暂停动画

animation-play-state: paused;

（9）animation 简写格式

所有动画属性可以合并为一个简写属性，顺序如下：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

例如：

animation: myAnimation 2s ease-in-out 1s infinite alternate forwards running;

2.示例：

（1）悬停动画 (Hover Animation)

当用户将鼠标悬停在图标上时，可以实现放大、旋转等效果。

.icon {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  display: inline-block;
  transition: transform 0.3s ease;
}

.icon:hover {
  transform: scale(1.2);
}

（2）旋转动画 (Rotate Animation)

你可以使用 @keyframes 创建持续旋转的图标动画。

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.icon-rotate {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  border-radius: 50%;
  display: inline-block;
  animation: rotate 2s linear infinite;
}

（3）脉冲动画 (Pulse Animation)

图标可以通过脉冲效果来引起用户注意。

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.icon-pulse {
  width: 50px;
  height: 50px;
  background-color: #2ecc71;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 1s ease-in-out infinite;
}

（4）弹跳动画 (Bounce Animation)

图标可以呈现上下弹跳的效果。

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.icon-bounce {
  width: 50px;
  height: 50px;
  background-color: #f1c40f;
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1s ease-in-out infinite;
}

（5）渐变颜色动画 (Gradient Color Animation)

图标的颜色可以通过渐变来不断变化。

@keyframes color-change {
  0% {
    background-color: #8e44ad;
  }
  50% {
    background-color: #3498db;
  }
  100% {
    background-color: #e74c3c;
  }
}

.icon-color {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  animation: color-change 3s ease infinite;
}

（6）光晕动画 (Glow Animation)

图标可以通过发光效果来吸引用户注意。

@keyframes glow {
  0% {
    box-shadow: 0 0 5px #fff;
  }
  50% {
    box-shadow: 0 0 20px #fff;
  }
  100% {
    box-shadow: 0 0 5px #fff;
  }
}

.icon-glow {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  display: inline-block;
  animation: glow 1.5s ease-in-out infinite;
}