前端知识速记--css篇:CSS3中的常见动画及实现方式

前端知识速记--css篇:CSS3中的常见动画及实现方式

常见的CSS3动画

1. 过渡 (Transitions)

过渡是一种非常简单的动画效果,允许你在元素的状态变更时平滑过渡到新状态。

语法格式

css 复制代码
transition: property duration timing-function delay;
  • property:指定要过渡的CSS属性,例如 background-color
  • duration:过渡的持续时间,例如 0.5s
  • timing-function:过渡的速度曲线,例如 ease
  • delay(可选):延迟时间,例如 0.2s

实现示例

css 复制代码
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: red;
}

分析 :当用户将鼠标悬停在 .box 元素上时,背景颜色会在0.5秒内从蓝色平滑过渡到红色。

2. 关键帧动画 (Keyframe Animations)

关键帧动画允许开发者定义动画的多个状态,可以创建复杂的动画效果。

语法格式

css 复制代码
@keyframes animation-name {
  from { /* 关键帧样式 */ }
  to { /* 关键帧样式 */ }
  
  /* 或者使用百分比 */
  0% { /* 关键帧样式 */ }
  50% { /* 关键帧样式 */ }
  100% { /* 关键帧样式 */ }
}

.animation-class {
  animation: animation-name duration timing-function iteration-count direction;
}
  • animation-name:动画名称。
  • duration:动画的持续时间,例如 1s
  • timing-function:动画的速度曲线,例如 infinite(无限循环)。
  • iteration-count:迭代次数,例如 infinite
  • direction:动画方向,例如 alternate

实现示例

css 复制代码
@keyframes example {
  0% {transform: translateY(0);}
  50% {transform: translateY(-20px);}
  100% {transform: translateY(0);}
}

.box {
  animation: example 1s infinite;
}

分析 :这个示例中,.box 元素向上移动20像素后再回到原位,整个动画持续1秒,并且会无限循环。

3. 动画延迟和方向

CSS3动画支持延迟和方向控制,可以为动画提供更多个性化效果。

语法格式

css 复制代码
.animation-class {
  animation-delay: time;
  animation-direction: direction;
}
  • time:延迟时间,例如 0.5s
  • direction:动画方向,例如 normal(正常)、reverse(反向)、alternate(交替)。

实现示例

css 复制代码
.box {
  animation: example 1s infinite alternate;
  animation-delay: 0.5s;
}

分析 :此示例使用 alternate,使得动画在完成一个周期后反向执行,并且使用 animation-delay 延迟0.5秒开始。

4. 缩放和旋转

通过 CSS3 的 transform 属性,可以对元素进行缩放和旋转。

语法格式

css 复制代码
transform: scale(sx, sy);
transform: rotate(deg);
  • sxsy:分别表示在 X 轴和 Y 轴上的缩放倍数。
  • deg:旋转角度。

实现示例

css 复制代码
.box {
  transform: scale(1);
  transition: transform 0.3s ease;
}

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

分析:当元素被悬停时,它会在0.3秒内逐渐放大至1.2倍。

动画总结表

动画类型 特性 语法格式 示例代码
过渡 (Transitions) 简单状态变更,平滑过渡 transition: property duration timing-function delay; .box:hover { background-color: red; }
关键帧动画 (Keyframes) 定义多个动画状态,复杂效果 @keyframes name { ... } animation: name duration; @keyframes example { ... } .box { animation: example 1s infinite; }
动画延迟与方向 支持延迟和反向执行 animation-delay: time; animation-direction: direction; .box { animation: example 1s infinite alternate; }
缩放和旋转 对元素进行缩放和旋转 transform: scale(sx, sy); transform: rotate(deg); .box:hover { transform: scale(1.2); }
相关推荐
伍哥的传说28 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783830 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊41 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为