CSS元素动画篇:基于当前位置的变换动画(一)

基于当前位置的变换动画(一)

前言

CSS元素动画一般分为两种:一种是元素基于当前位置的变换动画,通过不明显的位移、缩放等方式,实现动画效果,如弹跳、闪烁、抖动等;另一种是元素基于页面位置的变换动画,通过位移、旋转等方式,实现动画效果,如飞入/飞出等。

基于当前位置的变换动画,我又将根据动画实现效果将其分为4类:

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

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

位移效果类元素动画

水平抖动效果

水平抖动效果:通过元素水平方向上的来回快速抖动实现,其效果图如下所示:

效果预览

代码实现

html 复制代码
<style>
/* 水平抖动效果 */
@keyframes shakeX {
  /* 元素开始和结束位置不变 */
  0%, 100% {
    transform: translateX(0);
  }
  /* 左右交替动画 */
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
.shake-x {
  display: inline-block;
  height: 100px;
  font-size: 100px;
  font-weight: bold;
}
.shake-x:hover {
  animation: shakeX 1s 1;
}
</style>

<body>
  <span class="shake-x">水平抖动</span>
</body>

垂直抖动效果

垂直抖动效果:通过元素垂直方向上的来回快速抖动实现,其效果图如下所示:

效果预览

代码实现

html 复制代码
<style>
/* 垂直抖动效果 */
@keyframes shakeY {
  /* 元素开始和结束位置不变 */
  0%, 100% {
    transform: translateY(0);
  }
  /* 上下交替动画 */
  10%, 30%, 50%, 70%, 90% {
    transform: translateY(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateY(10px);
  }
}
.shake-y {
  display: inline-block;
  height: 100px;
  font-size: 100px;
  font-weight: bold;
}
.shake-y:hover {
  animation: shakeY 1s 1;
}
</style>

摇头动画效果

摇头动画效果:类型于水平动画效果,但抖动幅度比水平效果要轻,且动画细节更复杂,其效果图如下所示:

效果预览

代码实现

html 复制代码
<style>
/* 摇头动画效果 */
@keyframes shakeX {
  /* 元素开始和结束位置不变 */
  0%, 100% { transform: translateX(0);}
  13% { transform: translateX(-6px) rotateY(-9deg); }
  29% { transform: translateX(5px) rotateY(7deg); }
  63% { transform: translateX(-3px) rotateY(-5deg); }
  97% { transform: translateX(2px) rotateY(3deg); }
}
.shake-head {
  display: inline-block;
  height: 100px;
  font-size: 100px;
  font-weight: bold;
}
.shake-head:hover {
  animation: shakeX 0.5s 1;
}
</style>

<body>
  <span class="shake-head">摇头动画</span>
</body>

点头动画效果

点头动画效果:类型于垂直动画效果,但抖动幅度比垂直效果要轻,且只会向下位移,动画细节更复杂,其效果图如下所示:

效果预览

代码实现

html 复制代码
<style>
 @keyframes nod {
  /* 元素开始和结束位置不变 */
  0%, 100% { transform: translateY(0); }
  /* 向下位移 */
  50% { transform: translateY(10px); }
 }
 .nodding {
   display: inline-block;
   height: 100px;
   font-size: 100px;
   font-weight: bold;
 }
.nodding:hover {
  animation: nod 1s 2 ease-in-out;
}
</style>

<body>
  <span class="nodding">点头动画</span>
</body>

结语

本文主要介绍了几种常见的位移效果类元素动画,你还知道哪些位移效果类元素动画?欢迎在评论区留言分享!

相关推荐
满分观察网友z1 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构7 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙14 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1115 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆19 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er24 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0627 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444029 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆30 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子33 分钟前
Web开发中的文件下载
前端·javascript·面试