dede网站后台,海外网络服务器,成都网站界面设计,怀化优化办文章目录 简单介绍 CSS 动画CSS 动画的作用CSS 动画语法介绍CSS 动画属性animation-nameanimation-durationanimation-delayanimation-directionanimation-iteration-countanimation-play-stateanimation-timing-functionanimation-fill-modeanimation 简单介绍 CSS 动画
引用… 文章目录 简单介绍 CSS 动画CSS 动画的作用CSS 动画语法介绍CSS 动画属性animation-nameanimation-durationanimation-delayanimation-directionanimation-iteration-countanimation-play-stateanimation-timing-functionanimation-fill-modeanimation 简单介绍 CSS 动画
引用 MDN 对 CSS 动画的说明 CSS 动画模块CSS Animation可以让你通过使用关键帧对 CSS 属性的值进行动画处理例如背景位置和变换。每个关键帧都描述了动画元素在动画序列中的某个特定时间应该如何呈现。你可以使用动画模块中的属性来控制动画的持续时间、重复次数、延迟启动等方面。 简单讲CSS 动画是用于实现元素从一个 CSS 样式配置转换到另一个 CSS 样式配置的呈现效果。
CSS 动画的作用 CSS 动画使得您能够实现一些难以置信的效果点缀您的页面或者应用程序。MDN CSS 动画语法介绍
动画语法包括两个部分
描述动画的样式规则。指定动画开始、结束以及中间点样式的关键帧。
示例代码
/* 指定动画的样式规则 */
.div {width: 200px;height: 200px;animation: change 3s;
}/* 指定动画开始、结束点样式的关键帧。 */
keyframes change {0% {background-color: #f00;}100% {background-color: #fff;}
}结合上例对一个元素创建动画需要在元素的 CSS 选择器上使用animation属性或其子属性来配置动画时长、动画呈现方式及其他动画运行时相关参数而动画在不同时间点的关键帧的表现样式则需要通过keyframes来配置。
CSS 动画属性
animation-name
指定由 keyframes 定义动画名称标识多个使用逗号隔开。
animation-duration
设置动画一个周期的时长值必须为正数或 0单位秒s或毫秒ms。 示例说明本文示例代码由 vue3 element-plus 构建
templateel-card headeranimation-durationdiv classani-box slow :class{ running: playState }div10s/div/divdiv classani-box fast :class{ running: playState }div3s/div/divel-button typeprimary clickhandleAnimationRunning播放动画/el-button/el-card
/templatestyle scoped.ani-box {width: 80px;height: 80px;background-color: darkcyan;border-radius: 40px;animation-name: move;animation-fill-mode: forwards;animation-play-state: paused;text-align: center;line-height: 80px;color: wheat;font-size: 20px;margin-bottom: 20px;}.ani-box.slow {animation-duration: 10s;}.ani-box.fast {animation-duration: 3s;}.ani-box.running {animation-play-state: running;}keyframes move {0% {transform: translateX(0px);}100% {transform: translateX(500px);}}
/stylescript setupimport { ref } from vue;const playState ref(false);const handleAnimationRunning () {playState.value true;};
/script运行结果
animation-delay
设置延时指定从应用动画到元素开始执行之前等待的时间值可以是负值单位秒s或毫秒ms。
默认值为 0s表示动画应立即开始。正值表示动画应在指定的时间量过去后开始。负值会导致动画立即开始但是从动画循环的某个时间点开始。
示例代码
templateel-card headeranimation-delaydiv classani-box default :class{ running: playState }div0s/div/divdiv classani-box positive :class{ running: playState }div5s/div/divdiv classani-box negative :class{ running: playState }div-5s/div/divel-button typeprimary clickhandleAnimationRunning播放动画/el-button/el-card
/template
style scoped.ani-box {width: 80px;height: 80px;background-color: darkcyan;border-radius: 40px;text-align: center;line-height: 80px;color: wheat;font-size: 20px;margin-bottom: 20px;animation-name: move;animation-fill-mode: forwards;animation-play-state: paused;animation-duration: 10s;animation-timing-function: linear;}.ani-box.default {animation-delay: 0s;}.ani-box.positive {animation-delay: 5s;}.ani-box.negative {animation-delay: -5s;}.ani-box.running {animation-play-state: running;}keyframes move {0% {transform: translateX(0px);}100% {transform: translateX(500px);}}
/style
script setupimport { ref } from vue;const playState ref(false);const handleAnimationRunning () {playState.value true;};
/script运行结果
animation-direction
设置动画是正向播放、反向播放、还是在正向和反向之间交替播放。可选值
normal动画在每个循环中正向播放。即每次动画循环时动画将重置为起始状态并重新开始。默认值。reverse动画在每个循环中反向播放。即每次动画循环时动画将重置为结束状态并重新开始。alternate动画在每个循环中正反交替播放第一次是正向播放。alternate-rever动画在每个循环中正反交替播放第一次是反向播放。
示例代码
templateel-card headeranimation-directiondiv classani-box normal :class{ running: playState }divnormal/div/divdiv classani-box reverse :class{ running: playState }divreverse/div/divdiv classani-box alternate :class{ running: playState }divalternate/div/divdiv classani-box alternate-reverse :class{ running: playState }divalternate-reverse/div/divel-button typeprimary clickhandleAnimationRunning播放动画/el-button/el-card
/template
style scoped.ani-box {width: 80px;height: 80px;background-color: darkcyan;border-radius: 40px;text-align: center;line-height: 1;display: flex;align-items: center;justify-content: center;color: wheat;font-size: 16px;margin-bottom: 20px;animation-name: move;animation-fill-mode: forwards;animation-play-state: paused;animation-duration: 2s;animation-timing-function: linear;animation-iteration-count: 4;}.ani-box.normal {animation-direction: normal;}.ani-box.reverse {animation-direction: reverse;}.ani-box.alternate {animation-direction: alternate;}.ani-box.alternate-reverse {animation-direction: alternate-reverse;}.ani-box.running {animation-play-state: running;}keyframes move {0% {transform: translateX(0px);}100% {transform: translateX(500px);}}
/style
script setupimport { ref } from vue;const playState ref(false);const handleAnimationRunning () {playState.value true;};
/script运行结果
animation-iteration-count
设置动画在停止前应播放的次数。可选值
infinite无限循环播放动画。数值动画重复次数默认 1可以是小数如 0.5 将动画播放一半负值无效。
示例代码
templateel-card headeranimation-iteration-countdiv classani-box half :class{ running: playState }div0.5次/div/divdiv classani-box once :class{ running: playState }div1次/div/divdiv classani-box twice :class{ running: playState }div2次/div/divel-button typeprimary clickhandleAnimationRunning播放动画/el-button/el-card
/template
style scoped.ani-box {width: 80px;height: 80px;background-color: darkcyan;border-radius: 40px;text-align: center;line-height: 80px;color: wheat;font-size: 20px;margin-bottom: 20px;animation-name: move;animation-fill-mode: forwards;animation-play-state: paused;animation-duration: 6s;animation-timing-function: linear;}.ani-box.half {animation-iteration-count: 0.5;}.ani-box.once {animation-iteration-count: 1;}.ani-box.twice {animation-iteration-count: 2;}.ani-box.running {animation-play-state: running;}keyframes move {0% {transform: translateX(0px);}100% {transform: translateX(500px);}}
/style
script setupimport { ref } from vue;const playState ref(false);const handleAnimationRunning () {playState.value true;};
/script运行结果
animation-play-state
设置动画运行状态运行或暂停。可选值
running设置动画为运行状态。paused设置动画为暂停状态。
示例代码
templateel-card headeranimation-play-statediv classani-box running51BLOG/divel-alerttitle鼠标悬浮时运行动画离开时暂停动画。:closablefalseshow-icontypewarning/el-alert/el-card
/template
style langscss scoped.ani-box {width: 80px;height: 80px;background-color: darkcyan;border-radius: 4px;text-align: center;line-height: 80px;color: wheat;font-size: 16px;text-shadow: 1px 2px 1px red;margin-bottom: 30px;cursor: pointer;animation-name: move;animation-fill-mode: forwards;animation-play-state: paused;animation-duration: 5s;animation-timing-function: linear;}.ani-box:hover {animation-play-state: running;}keyframes move {0% {transform: rotate(0);}100% {transform: rotate(360deg);}}
/style运行结果
animation-timing-function
设置动画在每个周期的持续时间内如何进行。支持三种类型值
关键字值 ease 默认值表示动画在中间加速在结束时减速。等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0)ease-in 表示动画一开始较慢随着动画属性的变化逐渐加快直至完成。等同于 cubic-bezier(0.42, 0, 1.0, 1.0)ease-out 表示动画一开始较快随着动画的进行逐渐减速。等同于 cubic_bezier(0, 0, 0.58, 1.0)ease-in-out 表示动画一开始缓慢变化随后加速变化最后再次减速变化。等同于 cubic_bezier(0.42, 0, 0.58, 1.0)linear 表示动画以匀速运动。等同于 cubic-bezier(0.0, 0.0, 1.0, 1.0)step-start 等同于 steps(1, jump-start)step-end 等同于 steps(1, jump-end) ease、ease-in、ease-out、ease-in-out、linear 称之为非阶跃non-step关键字值代表了固定的四点值的三次贝塞尔曲线
示例代码
templateel-card headeranimation-timing-function: easediv classani-box ease :class{ running: playState }divease/div/divdiv classani-box ease-in :class{ running: playState }divease-in/div/divdiv classani-box ease-out :class{ running: playState }divease-out/div/divdiv classani-box ease-in-out :class{ running: playState }divease-in-out/div/divdiv classani-box linear :class{ running: playState }divlinear/div/divdiv classani-box cubic-bezier :class{ running: playState }divcubic-bezier/div/divel-button typeprimary clickhandleAnimationRunning播放动画/el-button/el-card
/template
style scoped.ani-box {width: 80px;height: 80px;background-color: darkcyan;border-radius: 40px;text-align: center;line-height: 1;display: flex;justify-content: center;align-items: center;color: wheat;font-size: 16px;margin-bottom: 20px;animation-name: move;animation-fill-mode: forwards;animation-play-state: paused;animation-duration: 10s;animation-timing-function: linear;}.ani-box.ease {animation-timing-function: ease;}.ani-box.ease-in {animation-timing-function: ease-in;}.ani-box.ease-out {animation-timing-function: ease-out;}.ani-box.ease-in-out {animation-timing-function: ease-in-out;}.ani-box.linear {animation-timing-function: linear;}.ani-box.cubic-bezier {animation-timing-function: cubic-bezier(0.19, 1, 0.86, 0.01);}.ani-box.running {animation-play-state: running;}keyframes move {0% {transform: translateX(0px);}100% {transform: translateX(800px);}}
/style
script setupimport { ref } from vue;const playState ref(false);const handleAnimationRunning () {playState.value true;};
/script运行结果
函数值 cubic-bezier(0.1, 0.7, 1, 0.1) 开发者自定义的三次贝塞尔曲线其中 p1 和 p3 的值必须在 0 到 1 的范围内。 Step 函数关键字语法steps(n, jumpterm) 语法解析按照 n 个定格在过渡中显示动画迭代每个定格等长时间显示。 例如如果 n 为 5则有 5 个步骤。 动画是否在 0%、20%、40%、60%、80%处或 20%、40%、60%、80%、100%处暂停或动画在 0%和 100%之间的 5 个定格又或者在包括 0%和 100%的情况下设置 5 个定格0%、25%、50%、75%、100%处取决于 jumpterm 的值 jump-start 表示一个左连续函数因此第一个跳跃发生在动画开始时。jump-end 表示一个右连续函数因此第一个跳跃发生在动画结束时。jump-none 两端都没有跳跃。jump-both 在 0% 和 100% 标记处停留有效地在动画迭代过程中添加一个步骤。start 等同于 jump-startend 等同于 jump-end 示例代码
templateel-card headeranimation-timing-function: steps(n, jumpterm)div classani-box jump-start :class{ running: playState }divjump-start/div/divdiv classani-box jump-end :class{ running: playState }divjump-end/div/divdiv classani-box jump-none :class{ running: playState }divjump-none/div/divdiv classani-box jump-both :class{ running: playState }divjump-both/div/divel-button typeprimary clickhandleAnimationRunning播放动画/el-button/el-card
/template
style scoped.ani-box {width: 80px;height: 80px;background-color: darkcyan;border-radius: 40px;text-align: center;line-height: 1;display: flex;justify-content: center;align-items: center;color: wheat;font-size: 16px;margin-bottom: 20px;animation-name: move;animation-fill-mode: none;animation-play-state: paused;animation-duration: 10s;}.ani-box.jump-start {animation-timing-function: steps(5, jump-start);}.ani-box.jump-end {animation-timing-function: steps(5, jump-end);}.ani-box.jump-none {animation-timing-function: steps(5, jump-none);}.ani-box.jump-both {animation-timing-function: steps(5, jump-both);}.ani-box.running {animation-play-state: running;}keyframes move {0% {transform: translateX(0px);}100% {transform: translateX(800px);}}
/style
script setupimport { ref } from vue;const playState ref(false);const handleAnimationRunning () {playState.value true;};
/script运行结果
animation-fill-mode
设置动画在执行之前和之后如何将样式应用于其目标。可选值
none 当未执行动画时动画将不会将任何样式应用于目标而是以已经赋予该元素的样式来显示。这是默认值。forward 动画执行完之后目标将保留由执行遇到的最后一个关键帧计算值最后一个关键帧取决于 animation-direction 和 animation-iteration-count 的值。backwards 动画将在应用于目标时执行前立即应用第一个关键帧中定义的值并在 animation-delay 期间保留此值。第一个关键帧取决于 animation-direction 的值。both 动画将遵循 forwards 和 backwards 的规则从而在两个方向上扩展动画属性。
示例代码
templateel-card headeranimation-fill-modediv classani-box none :class{ running: playState }divnone/div/divdiv classani-box forwards :class{ running: playState }divforwards/div/divdiv classani-box backwords :class{ running: playState }divbackwards/div/divdiv classani-box both :class{ running: playState }divboth/div/divel-button typeprimary clickhandleAnimationRunning播放动画/el-button/el-card
/template
style scoped.ani-box {width: 80px;height: 80px;background-color: darkcyan;border-radius: 40px;text-align: center;line-height: 80px;color: wheat;font-size: 16px;margin-bottom: 20px;animation-name: move;animation-play-state: paused;animation-duration: 5s;animation-timing-function: linear;animation-delay: 1s;}.ani-box.none {animation-fill-mode: none;}.ani-box.forwards {animation-fill-mode: forwards;}.ani-box.backwords {animation-fill-mode: backwards;}.ani-box.both {animation-fill-mode: both;}.ani-box.running {animation-play-state: running;}keyframes move {0% {transform: translateX(200px);}100% {transform: translateX(500px);}}
/style
script setupimport { ref } from vue;const playState ref(false);const handleAnimationRunning () {playState.value true;};
/script运行结果
animation
animation 是上面这些属性的一个简写属性形式。后续会单独写篇文章来详细介绍。
