搜索
首页web前端css教程CSS3动画animation相关属性与关键帧规则keyframes的详细介绍

我昨天写三维正方体的时候,就用到了动画的语法 

今天就来系统复习一下
过渡transition有着它的局限性
虽然简单,但是它只能在两个状态之间改变
并且它需要事件驱动才能够进行
不能够自己运动
所以为了解决这样的问题
我们需要animation动画

动画

若想实现动画效果
仅仅有animation属性是不够的
我们还需要@keyframes规则
先来看一个例子

p class="demo"></p>
.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 2s linear;}@keyframes change {
    0% {        background-color: red;    }
    50% {        background-color: purple;    }
    100% {        background-color: lime;    }}

当鼠标悬浮时,元素先变红然后过渡到紫色有过渡到绿色

我们先来看看@keyframes 规则

keyframes

在@keyframes中,我们定义动画关键帧
然后animation会按照keyframes关键帧里我们指定的帧状态进行过渡执行
0% - 100% 就代表动画的时间过渡
规则中的0%和100%,
可以替换成from和to关键字

@keyframes xxx {    from {        ......
    }
    to {
        ......
    }
}

如果我们省略了起始帧,浏览器会按照它最初的样式进行过渡

@keyframes change {
    100% {        background-color: lime;    }}


除此之外,我们还可以把相同的帧写在一起像这样

@keyframes change {    from,to {        background-color: red;    }
    50% {        background-color: blue;    }}

animation

animation是一个复合属性,有以下子属性

  • animation-name
    指定keyframes动画的名称

  • animation-duration
    指定动画执行时间

  • animation-timing-function
    指定动画的速度曲线,默认“ease”缓动

  • animation-delay
    指定动画延迟时间,默认“0”无延迟

  • animation-iteration-count
    指定动画播放的次数,默认“1”执行1次

  • animation-direction
    规定动画执行方向,默认“normal”

这个复合属性比我们的transition要复杂一些
前四个属性就不多解释了,类似于我们的transition
忘了的同学,戳这里->传送门

animation-iteration-count动画播放次数我们除了填写数字之外
还可以使用一个常用的关键字infinite无限循环

animation-direction除了normal以外还有如下属性值

  • reverse
    反向播放动画

  • alternate
    轮流播放动画

  • alternate-reverse
    反向轮流播放动画

通过一个例子来解释

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 1s 2 linear;}@keyframes change {    to {        width: 200px;    }}

默认normal

两次测试动画:
100px -> 200px
100px -> 200px


.demo:hover {    animation: change 1s 2 linear reverse; /*改*/}

reverse

两次测试动画:
200px -> 100px
200px -> 100px


.demo:hover {    animation: change 1s 2 linear alternate; /*改*/}

alternate

两次测试动画:
100px -> 200px
200px -> 100px


.demo:hover {    animation: change 1s 2 linear alternate-reverse; /*改*/}

alternate-reverse

两次测试动画:
200px -> 100px
100px -> 200px

animation-fill-mode

下面我要讲的两个属性都不是animation的子属性
所以不能写在animation中

animation-fill-mode规定对象动画时间之外的状态,默认“none”
除了none以外还有如下属性值

  • forwards  
    动画完成后,保持最后一个属性(定义在最后一帧)

  • backwards  
    在animation-delay指定时间内、动画显示之前,应用起始属性(定义在第一帧)

  • both  
    应用forwards和backwards两种模式


forwards
这个属性还是蛮有用的
还是我们上面的例子

.demo:hover {    animation: change 1s linear; /*改*/
    animation-fill-mode: forwards; /*改*/}


我们发现1s之后,元素并没有回到最初的100px,而是保持了我们最后一帧的200px状态


backwards  
理解这个属性,我们需要先加一个延时

.demo:hover {    animation: change 1s linear 1s; /*改*/
    /*animation-fill-mode: backwards;*/ /*待增*/}@keyframes change {    from {  /*增*/
        width: 150px;    }
    to {        width: 200px;    }}

我就不配图了
我们发现鼠标悬浮后,1s后瞬间变为150px,然后再过渡到200px
hover-0s -> 1s -> 2s
100px ->瞬变150px –> 过渡到200px

现在增加backwards

.demo:hover {    animation: change 1s linear 1s; /*改*/
    animation-fill-mode: backwards; /*增*/}

这回我们发现鼠标悬浮的一瞬间就变为15px,然后1s后过渡到200px
hover-0s -> 1s -> 2s
瞬变150px ->150px –> 过渡到200px
这就是backwards的作用,延迟前就应用第一帧动画的样式,然后准备过渡

animation-play-state

animation-play-state    指定动画的运行或暂停。默认 “running”
除了running还有paused
利用这个属性再配合js我们可以控制动画的暂停和运行

demo.style.animationPlayState = "paused";

今天的动画就先写这么多,感觉写了很长时间
日后再总结动画相关的性能问题

以上是CSS3动画animation相关属性与关键帧规则keyframes的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
'订阅播客”链接应在哪里?'订阅播客”链接应在哪里?Apr 16, 2025 pm 12:04 PM

有一段时间,iTunes是播客中的大狗,因此,如果您将“订阅播客”链接到喜欢:

浏览器引擎多样性浏览器引擎多样性Apr 16, 2025 pm 12:02 PM

当他们在2013年去Chrome时,我们失去了歌剧。与Edge今年早些时候也进行了同样的交易。迈克·泰勒(Mike Taylor)称这些变化为“减少

网络共享的UX注意事项网络共享的UX注意事项Apr 16, 2025 am 11:59 AM

从垃圾点击诱饵网站到大多数出版物的最多,共享按钮长期以来一直无处不在。然而,这些

每周平台新闻:Apple部署网络组件,渐进的HTML渲染,自托管关键资源每周平台新闻:Apple部署网络组件,渐进的HTML渲染,自托管关键资源Apr 16, 2025 am 11:55 AM

在本周的综述中,Apple进入Web组件,Instagram如何插入脚本以及一些思考的食物,以进行自托管关键资源。

git Pathspecs以及如何使用它们git Pathspecs以及如何使用它们Apr 16, 2025 am 11:53 AM

当我查看GIT命令的文档时,我注意到其中许多人都有选择。我最初以为这只是一个

产品图像的彩色拾取器产品图像的彩色拾取器Apr 16, 2025 am 11:49 AM

听起来有点像一个困难的问题,不是吗?我们经常没有成千上万种颜色的产品镜头,以便我们可以随身携带。我们也不是

黑暗模式与React和Themeprovider切换黑暗模式与React和Themeprovider切换Apr 16, 2025 am 11:46 AM

我喜欢网站具有“暗模式”选项时。黑暗模式使我更容易阅读网页,并帮助我的眼睛更放松。许多网站,包括

带有HTML对话框元素的一些动手带有HTML对话框元素的一些动手Apr 16, 2025 am 11:33 AM

这是我第一次查看HTML元素。我已经意识到了一段时间,但是尚未将其旋转。它很酷,

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具