DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
CSS 中的 animation
属性可用于为许多其他 CSS 属性设置动画,例如 color
、background-color
、height
或 width
。每个动画都需要使用 @keyframes
at-rule 进行定义,然后通过 animation
属性调用,如下所示
.element {
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
每个 @keyframes
at-rule 定义在动画期间特定时刻应该发生的事情。例如,0% 是动画的开始,100% 是动画的结束。然后,可以通过简写 animation
属性或其八个子属性来控制这些关键帧,从而更好地控制如何操作这些关键帧。
子属性
animation-name
:声明要操作的@keyframes
at-rule 的名称。animation-duration
:动画完成一个循环所需的时间长度。animation-timing-function
:建立预设的加速曲线,例如ease
或linear
。animation-delay
:元素加载与动画序列开始之间的时间(一些很酷的示例)。animation-direction
:设置循环后动画的方向。其默认值在每个循环中重置。animation-iteration-count
:动画应执行的次数。animation-fill-mode
:设置在动画之前/之后应用哪些值。
例如,您可以将动画的最后状态设置为保持在屏幕上,或者可以将其设置为在动画开始时切换回之前状态。animation-play-state
:暂停/播放动画。
然后可以像这样使用这些子属性
@keyframes stretch {
/* declare animation actions here */
}
.element {
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
/*
is the same as:
*/
.element {
animation:
stretch
1.5s
ease-out
0s
alternate
infinite
none
running;
}
以下是每个子属性可以取哪些值的完整列表
animation-timing-function | ease、ease-out、ease-in、ease-in-out、linear、cubic-bezier(x1, y1, x2, y2)(例如 cubic-bezier(0.5, 0.2, 0.3, 1.0)) |
animation-duration | Xs 或 Xms |
animation-delay | Xs 或 Xms |
animation-iteration-count | X |
animation-fill-mode | forwards、backwards、both、none |
animation-direction | normal、alternate |
animation-play-state | paused、running、running |
多个步骤
如果动画具有相同的起始和结束属性,则在 @keyframes
中使用逗号分隔 0% 和 100% 值很有用
@keyframes pulse {
0%, 100% {
background-color: yellow;
}
50% {
background-color: red;
}
}
多个动画
您也可以使用逗号分隔值来在选择器上声明多个动画。在下面的示例中,我们希望在 @keyframe
中更改圆圈的颜色,同时使用另一个动画将其左右移动。
.element {
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
}
性能
为大多数属性设置动画 (是一个性能问题),因此在为任何属性设置动画之前,我们应该谨慎行事。但是,某些组合可以安全地设置动画
transform: translate()
transform: scale()
transform: rotate()
opacity
哪些属性可以设置动画?
MDN 有 一个可以设置动画的 CSS 属性列表。可设置动画的属性往往是颜色和数字。例如,一个不可设置动画的属性是 background-image
。
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持此功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4* | 5* | 10 | 12 | 5.1* |
移动/平板
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 4* | 6.0-6.1* |
更多信息
- 使用 CSS 动画 (MDN)
- CSS 动画级别 1 (W3C 规范)
- CSS 动画简写属性 (DigitalOcean)
- Web 动画实践 (A List Apart)
- 五种负责任的动画方式 (24 Ways)
这太酷了,谢谢
不错
嗨,
据我所知,Opera 也使用 -o- 前缀实现了动画。也许需要更新一下?
此外,在您的示例中使用 -webkit- 前缀可能会助长仅使用 -webkit- 的不良做法。也许此类示例需要改为无前缀版本?
此致,
Adam Avramov
正在修复,谢谢。
它们绝对很棒,比其他教程更好!谢谢,克里斯!
嗨,克里斯,
我不确定您是否知道,@-ms-keyframes 从未存在过。IE10+ 支持 @keyframes 属性,而 < IE9 完全不支持动画。
我确实知道,这样的话就过时了(我想在我知道之前)。已经修复了。
您好,先生,
我想运行动画 form{left:0}to{left:75px},然后我想将我的内容永久地停留在 left:75px;直到我将鼠标移开。这可能吗???如果是,那该怎么做?请帮忙
也许您已经解决了,但此链接中的此入门视频解释了您要执行的操作。
http://www.lynda.com/Edge-Animate-tutorials/Web-Motion-Beginners-Animate-CSS-Sprite-Sheet/149119-2.html
入门视频是免费的,因此您无需支付订阅费用(假设您没有 Lynda 订阅)。
将此与您的动画一起使用 -
-webkit-animation-fill-mode: forwards;
嗨,我将 CSS 动画用于一个小游戏
http://mg-otterson.de/fileadmin/puzzle/index.html
只需使用 jQuery 向元素添加一个带有动画的类,这使得它非常容易!
另一篇很棒的文章!这里有很多值得思考的东西。
“animation-fill-mode: forwards;”
通过使用它,“to”条件中的任何内容都将保留在那里。
我也遇到了同样的问题,但通过研究css代码库,我很容易找到了“停止”动画并在最后一个选定颜色处停止的解决方案。
代码有其规则
为了使“停止在末尾”模式生效,`animation-fill-mode` 需要 `animation-iteration-count` 来执行操作。
所以,以下代码可以使它工作,祝您玩得开心
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1; /* Chrome 和 Safari /
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards; / Chrome 和 Safari */
代码已在 Edge、Safari、Chrome 和 Mozilla 中测试。Maxthon 只有在更新后才能工作(……或者如果开发者更新它 -.-”)。
祝您愉快!
我想知道除了“alternate”之外是否还有其他选项。请帮忙!
Alex Safayan
关于动画的这些教程太棒了!!
很棒的文章
多行代码块在三个 <– 两个“in”中
在进行 DOM 插入时,有没有什么巧妙的想法可以像这样启动动画?
您正在学习基于网站的语言,请访问:http://webanalysttips.blogspot.in/
在 Chrome 中使用动画时是否需要使用“-webkit-”?我尝试过使用“-webkit-” ,但对于每个动画,我必须再次编写代码,这会导致我的文件大小变得非常大,您可能看不到 http://www.djhisar.tk http://www.djhisar.tk。有什么建议可以压缩 CSS 动画吗?????
考虑使用 SASS 和 Compass 之类的东西…
您还可以使用 postCSS 以及 Grunt/Gulp 来节省更多时间。
更好的是,将它们全部一起使用,您就笑出来了。
这不会缩小 CSS 文件大小(尽管 Grunt/Gulp 可以用于实时压缩 CSS),为了完全支持,必须存在前缀……它将允许您只编写一行 CSS,并自动为您应用所有供应商前缀。
关于 css3 动画的精彩帖子 :)
http://www.bixelio.com/2014/11/css3-animation.html
简单而重要的动画 CSS 标签。子属性部分是最好的。
:)
MDN 的可动画属性列表似乎消失了。:(
css 动画简单技巧知识
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var myName = “EMMANUEL”;
letterColors =[orange,red,blue,green,purple]
if(15 > 5) {
bubbleShape = “circle”;
}
else {
bubbleShape = “square”;
}
drawName(myName, letterColors);
bounceName()
bounceBubbles()
嗨,Chris,如果您能告诉我这个网站上使用了什么 CSS 动画吗?https://phoenix-startup.com/?ref=wg 我认为这是一个非常棒的设计!!
哇,很棒的技巧,非常感谢!一切都解释得很好!
如何停止从左右移动的圆圈在特定点停止。
我不明白为什么当我在 100% 的关键帧中设置 opacity 为 0 时,元素会保留原始位置并为动画创建其他元素。是我的错觉吗?
ps:您可以查看此网址:https://codepen.io/alphardex/pen/XWWWBmQ 我正在学习。
有没有办法在一个关键帧中操作多个类?