使用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

相关推荐
dy17171 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918415 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip6 小时前
JavaScript二叉树相关概念
前端
rannn_1116 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java7 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)7 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5