css3动画 · uniapp

[TOC] ### 定义动画关键帧 @keyframes #### from -> to > 变换颜色，并且旋转 ```css @keyframes moveRight { from { background-color: red;transform: rotate(0deg); } /* 动画开始时的位置 */ to { background-color: green;transform: rotate(360deg);} /* 动画结束时的位置 */ } ``` > 动画的目标元素必须设置为相对定位（position: relative）或绝对定位（position: absolute），否则 left、top 等属性可能无法生效。 ```css @keyframes move { from {left: 100%;opacity: 0; } /* 初始位置 */ to {left: 0;opacity: 1;} /* 结束位置 */ } ``` #### 0% -> x% -> 100% > 例如： ```css @keyframes myAnimation { 0% { transform: translateX(0); } /* 动画开始时的样式 */ 50% { transform: translateX(100px); } /* 动画中间的样式 */ 100% { transform: translateX(0); } /* 动画结束时的样式 */ } ``` #### transform 属性 > transform 是CSS的一个属性，用于对元素进行二维或三维的变换。它可以实现平移、旋转、缩放和倾斜等效果。 > 常见的 transform 函数 > translate(x, y)：水平和垂直方向移动元素。 > rotate(angle)：旋转元素。 > scale(x, y)：缩放元素。 > skew(x-angle, y-angle)：倾斜元素 > matrix(a, b, c, d, e, f)：通过矩阵变换元素。 > 元素向右移动50像素，旋转45度，并放大1.5倍。 ``` css div { transform: translateX(50px) rotate(45deg) scale(1.5); } ``` > 在 0% 和 100% 时，元素的 transform 是 translateY(0) scale(1)，即元素在原始位置且大小正常。 > 在 50% 时，元素的 transform 是 translateY(-50px) scale(0.5)，即元素向上移动50像素并缩小到一半大小。 ```css @keyframes bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-50px) scale(0.5); } } ``` ### 应用动画 (animation) 及 animation子属性以下是开发中常用的 `animation` 子属性及其用法： #### 1. **`animation-name`** - **作用**：指定动画名称，需与 `@keyframes` 中定义的名称一致。 - **示例**： ```css animation-name: fadeInOut; ``` #### 2. **`animation-duration`** - **作用**：设置动画周期时间。 - **常用值**： - `0s`（默认，瞬间完成） - `1s`（1秒） - `2s`（2秒） - `500ms`（0.5秒） - **示例**： ```css animation-duration: 2s; ``` #### 3. **`animation-timing-function`** - **作用**：定义动画速度曲线。 - **常用值**： - `linear`（匀速） - `ease`（默认，动画开始时加速，结束时减速。） - `ease-in`（动画开始时加速） - `ease-out`（动画结束时减速） - `ease-in-out`（动画开始时加速，结束时减速） - **示例**： ```css animation-timing-function: ease-in-out; ``` #### 4. **`animation-delay`** - **作用**：设置动画延迟时间。 - **常用值**： - `0s`（默认，立即开始） - `1s`（延迟1秒） - `2s`（延迟2秒） - **示例**： ```css animation-delay: 1s; ``` #### 5. **`animation-iteration-count`** - **作用**：设置动画播放次数。 - **常用值**： - `1`（默认，播放一次） - `infinite`（无限循环） - **示例**： ```css animation-iteration-count: infinite; ``` #### 6. **`animation-fill-mode`** - **作用**：定义动画的填充模式。 - **常用值**： - `none`（默认，动画完成后恢复原始状态） - `forwards`（保留最后一帧样式） - `backwards`（显示第一帧样式） - `both`（结合 `forwards` 和 `backwards`） - **示例**： ```css animation-fill-mode: forwards; ``` #### 7. **`animation-direction`** - **作用**：定义动画播放方向。 - **常用值**： - `normal`（默认，正常顺序） - `reverse`（反向播放） - `alternate`（正序和反序交替） - **示例**： ```css animation-direction: alternate; ``` #### 8. **常用写法** > 提示：在使用 `animation` 简写属性时，各个子属性的顺序并不严格要求，但通常建议按照以下顺序书写，以便更清晰地表达： ```css animation: fadeInOut 2s ease forwards; animation: fadeInOut 2s ease 1s forwards; animation: fadeInOut 2s ease 1s infinite forwards; ```