CSS 动画
-
CSS转换
CSS动画允许大多数HTML元素的动画,而无需使用JavaScript或Flash! -
动画浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。属性 Internet Explorer Chrome FireFox Safari Opera 属性格式 @keyframes 10.0 43.0 4.0-webkit- 16.0 4.0-moz- 6.1 3.1-webkit- 12.1 10.5-o- animation 10.0 43.0 4.0-webkit- 16.0 4.0-moz- 6.1 3.1-webkit- 12.1 10.5-o- -
什么是CSS动画?
动画允许元素从一种样式逐渐变为另一种样式。您可以根据需要多次更改所需的CSS属性。要使用CSS动画,必须首先为动画指定一些关键帧。关键帧保持元素在特定时间具有的样式。 -
@keyframes规则
在@keyframes规则中指定CSS样式时,动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效,必须将动画绑定到元素。以下示例将“example”动画绑定到<div>元素。动画将持续4秒,并且会逐渐将<div>元素的背景颜色从“红色”更改为“黄色”: 注意:该animation-duration属性定义动画完成所需的时间。如果animation-duration未指定该属性,则不会发生动画,因为默认值为0(0秒)。 在上面的示例中,我们通过使用关键字“from”和“to”(表示0%(开始)和100%(完成))指定样式何时更改。也可以使用百分比。通过使用百分比,您可以根据需要添加任意数量的样式更改。当动画完成25%,完成50%时,以及动画100%完成时,以下示例将更改<div>元素的背景颜色: 以下示例将在动画完成25%,完成50%时再次更改背景颜色和<div>元素的位置,并在动画完成100%时再次更改: -
-
-
以反向或备用循环运行动画
animation-direction属性指定动画是应该向前,向后还是以交替周期播放。 animation-direction属性可以具有以下值:- normal - 动画正常播放(前进)。这是默认的
- reverse - 动画以反向播放(向后)
- alternate - 动画首先向前播放,然后向后播放
- alternate-reverse - 首先向后播放动画,然后向前播放动画
-
指定动画的速度曲线
animation-timing-function属性指定动画的速度曲线。 animation-timing-function属性可以具有以下值:- ease - 指定慢启动的动画,然后快速,然后缓慢结束(这是默认设置)
- linear - 指定从开始到结束具有相同速度的动画
- ease-in - 指定启动慢的动画
- ease-out - 指定慢速结束的动画
- ease-in-out - 指定开始和结束较慢的动画
- cubic-bezier(n,n,n,n) - 允许您在cubic-bezier函数中定义自己的值
-
为动画指定填充模式
CSS动画在播放第一个关键帧之前或播放最后一个关键帧之后不会影响元素。animation-fill-mode属性可以覆盖此行为 animation-fill-mode动画未播放时(在开始之前,结束之后或两者都有),该属性指定目标元素的样式。 animation-fill-mode属性可以具有以下值:- none- 默认值。动画在执行之前或之后不会对元素应用任何样式
- forwards - 元素将保留由最后一个关键帧设置的样式值(取决于animation-direction和animation-iteration-count)
- backwards - 元素将获取由第一个关键帧设置的样式值(取决于动画方向),并在动画延迟期间保留此值
- both - 动画将遵循向前和向后的规则,在两个方向上扩展动画属性
-
-
CSS动画属性
下表列出了@keyframes规则和所有CSS动画属性:属性 描述 @keyframes 指定动画代码 animation 设置所有动画属性的简写属性 animation-delay 指定动画开始的延迟 animation-direction 指定动画是向前播放、向后播放还是交替播放 animation-duration 指定动画完成一个循环需要多长时间 animation-fill-mode 指定动画不播放时元素的样式(在动画开始前、结束后或同时播放) animation-iteration-count 指定动画播放的次数 animation-name 指定@keyframes动画的名称 animation-play-state 指定动画是运行还是暂停 animation-timing-function 指定动画的速度曲线 -
相关页面
HTML教程:HTML样式