CSS元素动画篇：基于当前位置的变换动画（三）

最新推荐文章于 2025-04-30 11:05:53 发布

wuhen_n

最新推荐文章于 2025-04-30 11:05:53 发布

阅读量931

点赞数 27

分类专栏：页面特效与元素动画文章标签： css 前端 css3 html5 html

本文链接：https://blog.csdn.net/wuhen_n/article/details/147546223

版权

页面特效与元素动画专栏收录该内容

17 篇文章

订阅专栏

基于当前位置的变换动画（三）

前言
缩放效果类元素动画
结语

前言

CSS元素动画一般分为两种：一种是元素基于当前位置的变换动画，通过不明显的位移、缩放等方式，实现动画效果，如弹跳、闪烁、抖动等；另一种是元素基于页面位置的变换动画，通过位移、旋转等方式，实现动画效果，如飞入/飞出等。
基于当前位置的变换动画，我又将根据动画实现效果将其分为4类：

位移效果类：通过不明显的位移，实现元素动画效果，如：水平抖动、垂直抖动等。
旋转效果类：通过小幅度旋转，实现元素动画效果，如元素摇摆、摇晃等。
缩放效果类：通过缩放，实现元素动画效果，如脉冲效果、呼吸效果、心跳效果等。
透明度效果类：通过改变元素透明度，实现元素动画效果，如闪烁效果。

本文主要介绍缩放效果类的相关元素动画效果与代码实现。

缩放效果类元素动画

脉冲动画效果

脉冲动画效果：通过元素放大和缩小的效果，从而产生脉冲的感觉，其效果图如下所示：

效果预览

脉冲动画

代码实现

<style>
/* 脉冲动画 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
.pulse {
  display: inline-block;
  height: 100px;
  font-size: 100px;
  font-weight: bold;
}
.pulse:hover {
  animation: pulse 1s linear 1;
}
</style>

<body>
  <span class="pulse">脉冲动画</span>
</body>

橡皮筋动画效果

橡皮筋动画：通过元素伸张和缩小，让元素看起来像被拉长后迅速恢复原状，从而产生橡皮筋拉伸回弹的感觉，其效果图如下所示：

效果预览

橡皮筋动画

代码实现

<style>
/* 橡皮筋效果 */
@keyframes rubberBand {
  0%, 100% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75);
  }
  40% {
    transform: scale(0.75, 1.25);
  }
  50% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
}
.rubber-band {
  display: inline-block;
  height: 100px;
  font-size: 100px;
  font-weight: bold;
}
.rubber-band:hover {
  animation: rubberBand 1s 1;
}
</style>

<body>
  <span class="rubber-band">橡皮筋动画</span>
</body>

果冻动画效果

果冻动画效果：果冻效果和橡皮筋效果类似，只是在橡皮筋的动画基础上增加了轻微旋转，其效果图如下所示：

效果预览

果冻动画

代码实现

<style>
/* 果冻效果 */
@keyframes jello {
  0%, 100% {
	transform: skewX(0deg) skewY(0deg);
  }
  15% {
	transform: skewX(-25deg) skewY(-25deg);
  }
  30% {
	transform: skewX(20deg) skewY(20deg);
  }
  45% {
	transform: skewX(-15deg) skewY(-15deg);
  }
  60% {
	transform: skewX(10deg) skewY(10deg);
  }
  75% {
	transform: skewX(-5deg) skewY(-5deg);
  }
}
.jello {
  display: inline-block;
  height: 100px;
  font-size: 100px;
  font-weight: bold;
}
.jello:hover {
  animation: jello 1s 1;
}
</style>

<body>
  <span class="jello">果冻动画</span>
</body>

欢呼动画效果

欢呼动画效果：通过元素放大和轻微抖动，实现简单的欢呼效果，其效果图如下所示：

效果预览

欢呼动画

代码实现

<style>
/* 欢呼动画 */
 @keyframes tada {
	0%, 100% {
		transform: scale(1) rotate(0deg);
	}
	10%, 20% {
		transform: scale(0.9) rotate(-3deg);
	}
	30%, 50%, 70%, 90% {
		transform: scale(1.1) rotate(3deg);
	}
	40%, 60%, 80% {
		transform: scale(1.1) rotate(-3deg);
	}
}
.tada {
  display: inline-block;
  height: 100px;
  font-size: 100px;
  font-weight: bold;
}
.tada:hover {
  animation: tada 1s 1;
}
</style>

<body>
  <span class="tada">欢呼动画</span>
</body>

心跳动画效果

心跳动画效果：心跳动画效果和脉冲类似，只是动画细节比脉冲更赋值，动画帧更多，其效果图如下所示：

效果预览

心跳动画

代码实现

<style>
/* 心跳动画 */
@keyframes heartBeat {
  0%, 100% {
	transform: scale(1);
  }
  25%, 75% {
	transform: scale(1.1);
  }
  50% {
    transform: scale(0.9);
  }
}
.heart-beat  {
  display: inline-block;
  height: 100px;
  font-size: 100px;
  font-weight: bold;
}
.heart-beat:hover {
  animation: heartBeat 1s 1;
}
</style>

<body>
  <span class="heart-beat">心跳动画</span>
</body>