diff --git "a/\345\221\250\347\221\236\345\207\257/20241028\342\200\224\342\200\224\345\212\250\347\224\2732.md" "b/\345\221\250\347\221\236\345\207\257/20241028\342\200\224\342\200\224\345\212\250\347\224\2732.md" new file mode 100644 index 0000000000000000000000000000000000000000..c1f694c6375763db63377c5accaaac7b2e845ea2 --- /dev/null +++ "b/\345\221\250\347\221\236\345\207\257/20241028\342\200\224\342\200\224\345\212\250\347\224\2732.md" @@ -0,0 +1,196 @@ +# 动画 +## 动画步骤 +- 通过@keyframes定义动画 +- 将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性 +- 在指定元素里，通过 animation 属性调用动画 + +## 动画属性 + +``` +定义动画： + @keyframes 动画名{ + from{ 初始状态 } + to{ 结束状态 } + } + 调用： + animation: 动画名称 持续时间； +``` +animation属性格式如下 +animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) + +``` + + animation: move1 1s alternate linear 3; + animation: move2 4s; + +``` + +- 动画名称 +``` +animation-name: move; +``` +- 执行一次动画的持续时间 +``` +animation-duration: 4s; +``` + +备注:上面两个属性是必选项，且顺序固定 + +- steps() 表示动画不是连续执行，而是间断地分成几步执行 + +``` +animation: move2 4s steps(2); +``` +## 效果图 + +GIF3.gif + +## 代码 +```html + +``` +```html + +``` +```html + +```