CSS 动画允许大多数 html 元素的动画, 而无需使用 JavaScript 或 Flash!
动画浏览器支持
IE10 + 支持该属性的. 其他低浏览器版本数字后跟 - ms-, -webkit-,-moz - 或 - o - 指定使用前缀的第一个版本.
什么是 CSS 动画?
动画允许元素从一种样式逐渐变为另一种样式. 您可以根据需要多次更改所需的 CSS 属性. 要使用 CSS 动画, 必须首先为动画指定一些关键帧. 关键帧保持元素在特定时间具有的样式.
@keyframes 规则
在 @keyframes 规则中指定 CSS 样式时, 动画将在特定时间逐渐从当前样式更改为新样式. 要使动画生效, 必须将动画绑定到元素. 以下示例将 "example" 动画绑定到 < div > 元素. 动画将持续 4 秒, 并且会逐渐将 < div > 元素的背景颜色从 "红色" 更改为 "***":
- /* 动画代码 */
- @keyframes example {
- from {background-color: red;}
- to {background-color: yellow;}
- }
- /* 要将动画应用到的元素 */
- div {
- width: 100px;
- height: 100px;
- background-color: red;
- animation-name: example;
- animation-duration: 4s;
- }
注意: 该 animation-duration 属性定义动画完成所需的时间. 如果 animation-duration 未指定该属性, 则不会发生动画, 因为默认值为 0(0 秒). 在上面的示例中, 我们通过使用关键字 "from" 和 "to"(表示 0%(开始)和 100%(完成))指定样式何时更改. 也可以使用百分比. 通过使用百分比, 您可以根据需要添加任意数量的样式更改. 当动画完成 25%, 完成 50%时, 以及动画 100%完成时, 以下示例将更改 < div > 元素的背景颜色:
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
- /* 动画代码 */
- @keyframes example {
- 0% {background-color: red;}
- 25% {background-color: yellow;}
- 50% {background-color: blue;}
- 100% {background-color: green;}
- }
- /* 将动画应用到元素 */
- div {
- width: 100px;
- height: 100px;
- background-color: red;
- animation-name: example;
- animation-duration: 4s;
- }
以下示例将在动画完成 25%, 完成 50%时再次更改背景颜色和 < div > 元素的位置, 并在动画完成 100%时再次更改:
- /* 动画代码 */
- @keyframes example {
- 0% {background-color:red; left:0px; top:0px;}
- 25% {background-color:yellow; left:200px; top:0px;}
- 50% {background-color:blue; left:200px; top:200px;}
- 75% {background-color:green; left:0px; top:200px;}
- 100% {background-color:red; left:0px; top:0px;}
- }
- /* 将动画应用到元素 */
- div {
- width: 100px;
- height: 100px;
- position: relative;
- background-color: red;
- animation-name: example;
- animation-duration: 4s;
- }
延迟动画
animation-delay 属性指定动画开始的延迟. 以下示例在开始动画之前有 2 秒的延迟:
- div {
- width: 100px;
- height: 100px;
- position: relative;
- background-color: red;
- animation-name: example;
- animation-duration: 4s;
- animation-delay: 2s;
- }
也允许负值. 如果使用负值, 动画将像已经播放 N 秒一样开始. 在以下示例中, 动画将像已经播放 2 秒一样开始:
- div {
- width: 100px;
- height: 100px;
- position: relative;
- background-color: red;
- animation-name: example;
- animation-duration: 4s;
- animation-delay: -2s;
- }
设置动画应运行多少次
animation-iteration-count 属性指定动画应运行的次数. 以下示例将在停止之前运行动画 3 次:
- div {
- width: 100px;
- height: 100px;
- position: relative;
- background-color: red;
- animation-name: example;
- animation-duration: 4s;
- animation-iteration-count: 3;
- }
以下示例使用值 "infinite" 使动画永远继续:
- div {
- width: 100px;
- height: 100px;
- position: relative;
- background-color: red;
- animation-name: example;
- animation-duration: 4s;
- animation-iteration-count: infinite;
- }
以反向或备用循环运行动画
animation-direction 属性指定动画是应该向前, 向后还是以交替周期播放. animation-direction 属性可以具有以下值:
normal - 动画正常播放(前进). 这是默认的
reverse - 动画以反向播放(向后)
alternate - 动画首先向前播放, 然后向后播放
alternate-reverse - 首先向后播放动画, 然后向前播放动画
以下示例将以反向 (向后) 运行动画:
- div {
- width: 100px;
- height: 100px;
- position: relative;
- background-color: red;
- animation-name: example;
- animation-duration: 4s;
- animation-direction: reverse;
- }
以下示例使用值 "alternate" 使动画首先向前运行, 然后向后运行:
- div {
- width: 100px;
- height: 100px;
- position: relative;
- background-color: red;
- animation-name: example;
- animation-duration: 4s;
- animation-iteration-count: 2;
- animation-direction: alternate;
- }
以下示例使用值 "alternate-reverse" 使动画首先向后运行, 然后向前运行:
- div {
- width: 100px;
- height: 100px;
- position: relative;
- background-color: red;
- animation-name: example;
- animation-duration: 4s;
- animation-iteration-count: 2;
- animation-direction: 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 函数中定义自己的值
以下示例显示了可以使用的一些不同速度曲线:
- #div1 {
- animation-timing-function: linear;
- }
- #div2 {
- animation-timing-function: ease;
- }
- #div3 {
- animation-timing-function: ease-in;
- }
- #div4 {
- animation-timing-function: ease-out;
- }
- #div5 {
- animation-timing-function: ease-in-out;
- }
为动画指定填充模式
CSS 动画在播放第一个关键帧之前或播放最后一个关键帧之后不会影响元素. animation-fill-mode 属性可以覆盖此行为 animation-fill-mode 动画未播放时(在开始之前, 结束之后或两者都有), 该属性指定目标元素的样式. animation-fill-mode 属性可以具有以下值:
none- 默认值. 动画在执行之前或之后不会对元素应用任何样式
forwards - 元素将保留由最后一个关键帧设置的样式值(取决于 animation-direction 和 animation-iteration-count)
backwards - 元素将获取由第一个关键帧设置的样式值(取决于动画方向), 并在动画延迟期间保留此值
both - 动画将遵循向前和向后的规则, 在两个方向上扩展动画属性
以下示例允许 < div > 元素在动画结束时保留最后一个关键帧的样式值:
- div {
- width: 100px;
- height: 100px;
- background: red;
- position: relative;
- animation-name: example;
- animation-duration: 3s;
- animation-fill-mode: forwards;
- }
以下示例允许 < div > 元素获取动画开始前 (动画延迟期间) 第一个关键帧设置的样式值:
- div {
- width: 100px;
- height: 100px;
- background: red;
- position: relative;
- animation-name: example;
- animation-duration: 3s;
- animation-delay: 2s;
- animation-fill-mode: backwards;
- }
以下示例允许 < div > 元素在动画开始之前获取由第一个关键帧设置的样式值, 并在动画结束时保留最后一个关键帧的样式值:
- div {
- width: 100px;
- height: 100px;
- background: red;
- position: relative;
- animation-name: example;
- animation-duration: 3s;
- animation-delay: 2s;
- animation-fill-mode: both;
- }
动画简写属性
下面的示例使用了六个动画属性:
- div {
- animation: example 5s linear 2s infinite alternate;
- }
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 | 指定动画的速度曲线 |
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/b968170e85f2