使用Animation实现自定义动画

使用Animation实现自定义动画

在 CSS 中,@keyframesanimation 属性可以用来创建自定义动画。通过定义关键帧(@keyframes)和设置动画属性(如持续时间、延迟、重复次数等),可以实现复杂的动画效果。

1. 基本语法

1.1 定义关键帧(@keyframes

@keyframes 用于定义动画的关键帧,指定动画从开始到结束的样式变化。

css 复制代码
@keyframes 动画名称 {
  0% {
    /* 初始状态 */
  }
  50% {
    /* 中间状态 */
  }
  100% {
    /* 结束状态 */
  }
}

1.2 应用动画(animation

通过 animation 属性将动画应用到元素上。

css 复制代码
.element {
  animation: 动画名称 持续时间 动画速度曲线 延迟 重复次数 方向 填充模式;
}

2. 动画属性详解

属性 描述
animation-name 指定动画名称(与@keyframes 定义的名称一致)。
animation-duration 动画的持续时间(如2s500ms)。
animation-timing-function 动画的速度曲线(如easelinearease-in-out)。
animation-delay 动画开始前的延迟时间(如1s)。
animation-iteration-count 动画的重复次数(如2infinite)。
animation-direction 动画的方向(如normalreversealternatealternate-reverse)。
animation-fill-mode 动画执行前后的样式状态(如noneforwardsbackwardsboth)。
animation-play-state 控制动画的播放状态(如runningpaused)。

3. 实现自定义动画

示例 1:简单的淡入淡出动画

css 复制代码
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.element {
  animation: fadeInOut 3s ease-in-out infinite;
}

示例 2:元素从左到右移动

css 复制代码
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

.element {
  animation: moveRight 2s linear infinite alternate;
}

示例 3:旋转动画

css 复制代码
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.element {
  animation: rotate 2s linear infinite;
}

示例 4:复杂动画(结合多个属性)

css 复制代码
@keyframes complexAnimation {
  0% {
    transform: translateX(0) rotate(0deg);
    background-color: red;
  }
  50% {
    transform: translateX(200px) rotate(180deg);
    background-color: blue;
  }
  100% {
    transform: translateX(0) rotate(360deg);
    background-color: red;
  }
}

.element {
  animation: complexAnimation 4s ease-in-out infinite;
}

4. 控制动画播放

暂停和播放动画

通过 animation-play-state 控制动画的播放状态。

css 复制代码
.element {
  animation: moveRight 2s linear infinite;
  animation-play-state: paused; /* 默认暂停 */
}

.element:hover {
  animation-play-state: running; /* 悬停时播放 */
}

动画结束后保持最终状态

通过 animation-fill-mode 设置动画结束后的样式状态。

css 复制代码
.element {
  animation: moveRight 2s linear forwards;
}

5. 多动画组合

可以为同一个元素应用多个动画。

css 复制代码
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

.element {
  animation: fadeIn 2s ease-in-out, scaleUp 2s ease-in-out;
}

6. 实际应用示例

按钮点击效果

css 复制代码
@keyframes clickEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.button:active {
  animation: clickEffect 0.2s ease-in-out;
}

加载动画

css 复制代码
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

总结

  • 使用 @keyframes 定义动画的关键帧。
  • 通过 animation 属性将动画应用到元素上。
  • 可以控制动画的持续时间、速度曲线、延迟、重复次数等。
  • 支持多动画组合和动态控制播放状态。

通过灵活运用 CSS 动画,可以为网页添加丰富的交互效果,提升用户体验。

更多vue相关插件及后台管理模板可访问vue admin reference,代码详情请访问github

相关推荐
用户35212019560几秒前
React-router v7(下)
前端
枫,为落叶几秒前
【vue】设置时间格式
前端·javascript·vue.js
郝学胜-神的一滴22 分钟前
Linux系统函数link、unlink与dentry的关系及使用注意事项
linux·运维·服务器·开发语言·前端·c++
昔人'1 小时前
css`text-wrap:pretty`
前端·css
勇敢di牛牛1 小时前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
詩句☾⋆᭄南笙1 小时前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单
IT_陈寒1 小时前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌1 小时前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip2 小时前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙2 小时前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome