css的animation动画

这篇具有很好参考价值的文章主要介绍了css的animation动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


css 动画的语法

创建动画序列,需要使用 animation 属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes 规则实现

属性 描述
animation-name 指定由 @keyframes 描述的关键帧名称
animation-duration 设置动画一个周期的时长
animation-delay 设置延时,即从元素加载完成之后到动画序列开始执行的这段时间
animation-direction 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行
animation-iteration-count 设置动画重复次数, 可以指定 infinite 无限次重复动画
animation-play-state 允许暂停和恢复动画
animation-timing-function 设置动画速度, 即通过建立加速度曲线,设置动画在关键帧之间是如何变化
animation-fill-mode 规定元素在不播放动画时的样式(在开始前、结束后,或两者同时)

keyframes 规则的设定

  • 使用百分比
@keyframes test {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
  • 使用 from 及 to
@keyframes test {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
  • 当然,当我们的关键帧不止 2 帧的时,更推荐使用百分比定义的方式

  • 除此之外,当动画的起始帧等同于 CSS 规则中赋予的值并且没有设定 animation-fill-mode,0% 和 from 这一帧是可以删除的

animation-delay 详解

animation-delay 就比较有意思了,它可以设置动画延时,即从元素加载完成之后到动画序列开始执行的这段时间

  • animation 属性,也可以简写为 animation: test 2s 1s,第一个时间值表示持续时间,第二个时间值表示延迟时间
div {
  width: 100px;
  height: 100px;
  background: #000;
  animation-name: test;
  animation-duration: 2s;
}

div:nth-child(2) {
  animation-delay: 1s;
}

@keyframes test {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(200px);
  }
}

animation-delay 可以为负值

关于 animation-delay,最有意思的技巧在于,它可以是负数。也就是说,虽然属性名是动画延迟时间,但是运用了负数之后,动画可以提前进行

  • 下面是一个三球旋转的 dome:
.div:nth-child(1) {
  animation: test 3s infinite linear;
}
.div:nth-child(2) {
  animation: test 3s infinite -1s linear;
}
.div:nth-child(3) {
  animation: test 3s infinite -2s linear;
}

animation-duration 和 animation-delay 构建随机效果

同一个动画,我们利用一定范围内随机的 animation-duration 和一定范围内随机的 animation-delay,可以有效的构建更为随机的动画效果,让动画更加的自然

  • animation-direction 属性可接受以下值:

    • normal - 动画正常播放(向前)。默认值
    • reverse - 动画以反方向播放(向后)
    • alternate - 动画先向前播放,然后向后
    • alternate-reverse - 动画先向后播放,然后向前
  • 我们利用 sass 的循环和 random() 函数,让 animation-duration 在 2-4 秒范围内随机,让 animation-delay 在 1-2 秒范围内随机,这样,我们就可以得到非常自然且不同的上升动画效果,基本不会出现重复的画面,很好的模拟了随机效果

@for $i from 1 to 11 {
  li:nth-child(#{$i}) {
    animation-duration: #{random(2000) / 1000 + 2}s;
    animation-delay: #{random(1000) / 1000 + 1}s;
  }
}

animation-timing-function 缓动函数

缓动函数在动画中非常重要,它定义了动画在每一动画周期中执行的节奏

  • 缓动主要分为两类:

    • cubic-bezier-timing-function 三次贝塞尔曲线缓动函数
    • step-timing-function 步骤缓动函数
  • animation-timing-function 属性可接受以下值:

    • ease - 动画以低速开始,然后加快,在结束前变慢(默认)
    • linear - 匀速,动画从头到尾的速度是相同的
    • ease-in - 动画以低速开始
    • ease-out - 动画以低速结束
    • ease-in-out - 动画以低速开始和低速结束
    • cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值
  • 这里有个非常好用的网站 – https://cubic-bezier.com/ 用于创建和调试生成不同的贝塞尔曲线参数

步骤缓动函数的几种表现形态

{
    animation-timing-function: step-start;
    animation-timing-function: step-end;

    animation-timing-function: steps(6, start)
    animation-timing-function: steps(4, end);
}
  • 在 CSS 中,使用步骤缓动函数最多的,就是利用其来实现逐帧动画,我们利用 animation-timing-function: steps(6) 可以将其用一个 CSS 动画串联起来
.box {
  width: 256px;
  height: 256px;
  background: url('@/assets/img/test.jpg');
  animation: test 0.6s steps(6, end) infinite;
}
@keyframes test {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1536px 0;
  }
}
  • 首先要知道,刚好 256 x 6 = 1536,所以上述图片其实可以刚好均分为 6 段:
    • 我们设定了一个大小都为 256px 的 div,给这个 div 赋予了一个 animation: sprite .6s steps(6) infinite 动画
    • 其中 steps(6) 的意思就是将设定的 @keyframes 动画分为 6 次(6 帧)执行,而整体的动画时间是 0.6s,所以每一帧的停顿时长为 0.1s
    • 动画效果是由background-position: 0 0 到 background-position: -1536px 0,由于上述的 CSS 代码没有设置 background-repeat,所以其实 background-position: 0 0 是等价于 background-position: -1536px 0,就是图片在整个动画过程中推进了一轮,只不过每一帧停在了特点的地方,一共 6 帧
  • 其实在动画过程中,background-position 的取值其实只有 background-position: 0 0,background-position: -256px 0,background-position: -512px 0 依次类推一直到 background-position: -1536px 0,由于背景的 repeat 的特性,其实刚好回到原点,由此又重新开始新一轮同样的动画

同个动画效果的补间动画和逐帧动画演绎对比

  • 上述的三次贝塞尔曲线缓动和步骤缓动,其实就是对应的补间动画和逐帧动画
  • 通过设置steps将补间动画变成逐帧动画
.box {
  animation: test 2s steps(10) infinite;
}
@keyframes test {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

animation-play-state 控制动画的状态

animation-play-state,顾名思义,它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一

  • 它的取值只有两个(默认为 running):animation-play-state: paused | running;

  • 使用起来也非常简单,看下面这个例子,我们在 hover 按钮的时候,实现动画的暂停:

.box {
  width: 100px;
  height: 100px;
  background: deeppink;
  animation: test 2s linear infinite alternate;
}

@keyframes test {
  100% {
    transform: translate(100px, 0);
  }
}

.stop:hover ~ .box {
  animation-play-state: paused;
}

animation-fill-mode 控制元素在各个阶段的状态

  • animation-fill-mode 属性可接受以下值:

    • none - 默认值。动画在执行之前或之后不会对元素应用任何样式
    • forwards - 元素在动画开始之前的样式为 CSS 规则设定的样式,而动画结束后的样式则表现为由执行期间遇到的最后一个关键帧计算值(也就是停在最后一帧)
    • backwards - 元素在动画开始之前(包含未触发动画阶段及 animation-delay 期间)的样式为动画运行时的第一帧,而动画结束后的样式则恢复为 CSS 规则设定的样式
    • both - 综合了 animation-fill-mode: backwards 和 animation-fill-mode: forwards 的设定。动画开始前的样式为动画运行时的第一帧,动画结束后停在最后一帧

animation-iteration-count/animation-direction 动画循环次数和方向

  • animation-iteration-count 控制动画运行的次数,可以是数字或者 infinite,注意,数字可以是小数

  • animation-direction 控制动画的方向,正向、反向、正向交替与反向交替

  • 在上面讲述 animation-fill-mode 时,我使用了动画运行时的第一帧替代了@keyframes 中定义的第一帧这种说法,因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向 animation-directionanimation-iteration-count 的影响

  • 在 CSS 动画中,由 animation-iteration-countanimation-direction 共同决定动画运行时的第一帧和最后一帧的状态

    • 动画运行的第一帧由 animation-direction 决定
    • 动画运行的最后一帧由 animation-iteration-countanimation-direction 决定
.box {
  animation: test 4s linear;
  animation-play-state: paused;
  transform: translate(0, 0);
}
@keyframes test {
  0% {
    transform: translate(100px, 0);
  }
  100% {
    transform: translate(300px, 0);
  }
}
  • 元素没有设置位移 transform: translate(0, 0),而在动画中,第一个关键帧和最后一个关键的 translateX 分别是 100px、300px,配合不同 animation-direction 初始状态如下

    • 不设置 animation 的情况下 – 初始状态为 transform:translate(0,0)
    • 设置 animation-fill-mode:backwards;animation-direction:normal;的情况下,初始状态为@keyframes 中的 transform:translate(100px,0)
    • 设置 animation-fill-mode:backwards;animation-direction:reverse;的情况下,初始状态为@keyframes 中的 transform:translate(300px,0)

动画的分治与复用

这里我们实现了一个 div 块下落动画,下落的同时产生透明度的变化:文章来源地址https://www.toymoban.com/news/detail-459322.html

div {
  width: 100px;
  height: 100px;
  background: #000;
  animation: combine 2s;
}
@keyframes combine {
  100% {
    transform: translate(0, 150px);
    opacity: 0;
  }
}

/* or */

div {
  animation: falldown 2s, fadeIn 2s;
}

@keyframes falldown {
  100% {
    transform: translate(0, 150px);
  }
}
@keyframes fadeIn {
  100% {
    opacity: 0;
  }
}
  • 在 CSS 动画规则中,animation 是可以接收多个动画的,这样做的目的不仅仅只是为了复用,同时也是为了分治,我们对每一个属性层面的动画能够有着更为精确的控制

到了这里,关于css的animation动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 神仙般的css动画参考网址,使用animate.css

    Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. https://animate.style/ 这里面有很多简单的css样式,可以引这个包,但是也可以根据他的源码改动一下,很简

    2024年02月11日
    浏览(33)
  • CSS笔记——触发式动画Transition、主动式动画Animation、Transfrom 动画、CSS 3D 动画、阴影和滤镜样式

    一、触发式动画Transition transition过渡动画, 一般配合伪类使用 属性值: transition-duration: 指定过渡效果的持续时间,以秒或毫秒为单位。 transition-timing-function: 指定过渡效果的时间函数,即控制过渡速度的函数。常用的值有 ease、linear、ease-in、ease-out、ease-in-out 等。 transi

    2024年02月07日
    浏览(52)
  • HTML之CSS Animation 属性常用动画

    引入下面的样式表后 -webkit-animation: tada 1s ease 0.3s infinite both; -webkit-animation: name duration timing-function delay iteration_count direction animation 各个参数详细用法请看 https://www.w3school.com.cn/css/css3_animations.asp cubic-bezier 生成器 https://cubic-bezier.com

    2024年01月19日
    浏览(48)
  • animation.css无法显示动画效果问题解决

    在使用【微信开发者工具】开发微信小程序时发现无法在开发者工具中展示出动画效果来 但是真机调试中可以正常的显示动画效果 【关于微信小程序中如何使用animation.css,参考微信小程序使用animation.css_THE WHY的博客-CSDN博客 】 同时发现在官网上点击各个动画并不能展示动

    2024年02月16日
    浏览(43)
  • css3之animation 提交按钮简单的动画

     

    2024年02月11日
    浏览(42)
  • 011:vue结合css动画animation实现下雪效果

    GIF录屏文件太卡有点卡,实际是很丝滑的 在 src 下新建 components 文件,创建 VabSnow.vue 组件文件 没啥注意的,主要是scss的变量操作及css动画 😎

    2024年01月19日
    浏览(53)
  • css3动画基础详解(@keyframes和animation)

    动画是使元素从一种样式逐渐变化为另外一种效果,CSS3动画的生成,主要依赖 @keyframes 定义动画, animation 执行动画。 @keyframes 通过  @keyframes  规则创建动画。 @keyframes keyframes-name {keyframes-selector {css-styles;}} keyframes-name  帧列表的名称。 名称必须符合 CSS 语法中对标识符的定

    2024年02月04日
    浏览(50)
  • Unity中Animation创建的动画如何指定播放

    使用Unity自带的Animation制作的动画如何指定帧播放和结束? 1.选择需要播放的动画,Inspector面板右键Debug,勾选Legacy 2.添加脚本,挂载脚本

    2024年02月03日
    浏览(51)
  • CSS3 高级- 复杂选择器、内容生成、变形(transform)、过渡(transition)、动画(animation)

    兄弟选择器:选择平级元素的唯一办法 -适用:通过已知元素选择之后的平级兄弟元素时 1、相邻兄弟选择器: 2、通用兄弟选择器: 属性选择器: -通过元素的属性来定位元素 1、通用:基本用不着,太泛了 2、自定义:4种 1、精确条件: 2、模糊条件: 3、模糊条件:很少用,

    2024年04月09日
    浏览(51)
  • css空间转换/视距/空间旋转/立体呈现/3d导航案例/空间缩放/animation动画/走马灯案例/精灵动画/多组动画/全民出游案例

    空间:是从坐标轴角度定义xyz三条坐标轴构成了一个立体空间按,z轴位置与视线方向相同。 属性:transform         transform:translate3d(x,y,z);         transform:translatex();         transform:translatey();         transform:translatez(); 取值(正负均可)         像素

    2024年04月22日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包