一、动画的语法
1.定义动画
@keyframes 自定义动画名称 {
// 开始
from {
}
// 结束
to {
}
}
// 或者还可以使用百分比定义
@keyframes 动画名称 {
// 开始
0% {
}
// 结束
100% {
}
}
2.调用
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 暂停动画 执行完毕时状态
(属性写的时候不分先后顺序)
属性 | 作用 | 取值 |
animation-name
|
动画名称 | 自定义 |
animation-duration
|
动画时长 | 单位s(秒) |
animation-delay
|
延迟时间 | 单位s(秒) |
animation-timing-functio
|
速度曲线 | linear 动画从头到尾的速度是相同的 ease 默认,动画以低速开始,然后加快,在结束前变慢 ease-in 动画以低速开始 ease-out 动画以结束开始 ease-in-out 动画以低速开始和结束 |
animation-iteration-count
|
重复次数 |
infinite为无限循环
|
animation-direction
|
动画方向 | normal 按时间轴顺序 reverse 时间轴反方向运行 alternate 轮流,即来回往复进行 alternate-reverse 动画先反运行再正方向运行,并持续交替运行 |
animation-play-state
|
暂停动画 |
running 继续
paused 暂停,通常配合:hover使用
|
animation-fill-mode |
执行完毕时状态 |
none 回到动画没开始时的状态
forwards 动画结束后动画停留在最后一帧的状态
backwards 动画回到第一帧的状态
both 根据animation-direction轮流应用forwards和backwards规则
注意:与iteration-count不要冲突(动画执行无限次)
|
3D基础语法可参考我的另一篇博客:https://mp.csdn.net/mp_blog/creation/editor/127406706
三、在vue3+ts中通过动画实现骨架屏效果
以下宽高可以通过组件传值自定义,这里给的是固定宽高
<script setup lang="ts">
defineProps<{
animation: boolean
}>()
</script>
<template>
<div class="big">
<div class="little" :class="{ active: animation }"></div>
</div>
</template>
<style lang="scss" scoped>
.big {
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
overflow: hidden;
.little {
position: absolute;
left: -200px;
top: 0;
width: 200px;
height: 50px;
background: linear-gradient(to right, plum, yellowgreen, paleturquoise);
&.active {
animation: screen 0.8s infinite;
}
}
}
// 定义动画
@keyframes screen {
// 开始
from {
}
// 结束
to {
transform: translateX(600px);
}
}
</style>