本文主要是介绍CSS3 animation（动画） 属性与涟漪效果的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
属性简介：
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔，单位可以是秒（s）或毫秒（ms）,可以是负值，若为-2s则立即开始但是（第一次）会直接跳到动画2s处 |
| animation-iteration-count | 定义动画的播放次数 |
| animation-direction | 指定是否应该轮流反向播放动画 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 |
| animation-play-state | 指定动画是否正在运行或已暂停 |
| initial | 设置属性为其默认值 |
| inherit | 从父元素继承属性 |
二、各属性详细介绍
1.animation-name
语法：animation-name: keyframename|none;
| 值 | 说明 |
|---|---|
| keyframename | 指定要绑定到选择器的关键帧的名称 |
| none | 指定有没有动画（可用于覆盖从级联的动画） |
补充： @keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
例如：将背景色由红变黄
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{from {background: red;}to {background: yellow;}
}
2.animation-duration
| 值 | 说明 |
|---|---|
| time | 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。 |
3.animation-timing-function
animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：
| 值 | 描述 | 对应cubic-bezier 函数 |
|---|---|---|
| linear | 动画从头到尾的速度是相同的 | cubic-bezier(0,0,1,1) |
| ease（默认） | 动画以低速开始，然后加快，在结束前变慢 | cubic-bezier(0.25,0.1,0.25,1) |
| ease-in | 动画以低速开始 | cubic-bezier(0.42,0,1,1) |
| ease-out | 动画以低速结束 | cubic-bezier(0,0,0.58,1) |
| ease-in-out | 动画以低速开始和结束 | cubic-bezier(0.42,0,0.58,1) |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值,可能的值是从 0 到 1 的数值。 |
对于同一个曲线，cubic-bezier函数的参数可能不同，如linear曲线的cubic-bezier的参数可以写为(0.5,0.5,0.5,0.5)
想要多了解了解cubic-bezier的伙伴可以移步css中animation属性animation-timing-function知识点以及属性值steps()详解，在这里就不展开说明了。
4.animation-delay
定义动画何时开始。单位可以是毫秒（ms）或秒（s）,默认是0，允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。注意：如果是无限循环动画，则只有第一次会被跳过2s。
5.animation-iteration-count
定义动画的播放次数。值可以是n或infinite（无数次）
6.animation-direction
定义是否应该轮流反向播放动画。值为normal或alternate，如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。说白了就是一次正一次反……
7.animation-fill-mode
规定动画在播放之前或之后，其动画效果是否可见，其属性值是由逗号分隔的一个或多个填充模式关键词（none | forwards | backwards | both）。
| 值 | 描述 |
|---|---|
| none | 不改变默认行为 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义） |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义） |
| both | 向前和向后填充模式都被应用 |
想要多了解了解animation-fill-mode的同学可以移步animation-fill-mode，这里有示例。
8.animation-play-state
规定动画正在运行还是暂停，可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画（object.style.animationPlayState=“paused”）。
三、示例：用css实现涟漪效果
这里直接用animation来实现。
涟漪肯定不能只有一个圈同时存在，所以我设置了3个div嵌套。用flex布局实现水平垂直居中。然后设置动画完成时间为1.5s，速度曲线为linear，无限循环。
css部分：
body{background-color: rgb(62, 178, 224);}.content{display: flex;justify-content: center;align-items:center;width: 100px; /*width和height必须设置，不然就不是从中间向外扩散了*/height: 100px;margin: 175px auto;}.wave{display: flex;justify-content: center;align-items:center;border: white 1px solid;}.wave1 {animation:wave1 1.5s linear infinite;}.wave2{animation:wave2 1.5s linear infinite;}.wave3{animation:wave3 1.5s linear infinite;}@keyframes wave3{from{width: 2px;height: 2px;border-radius: 1px;}to{width: 20px;height: 20px;border-radius: 10px;}} @keyframes wave2{from{width: 20px;height: 20px;border-radius: 10px;}to{width: 50px;height: 50px;border-radius: 25px;}} @keyframes wave1{from{width: 50px;height: 50px;border-radius: 25px;}to{width: 100px;height: 100px;border-radius: 50px;}}
html部分：
<body><div class="content"><div class="wave wave1"><div class="wave wave2"><div class="wave wave3"></div></div></div></div>
</body>
附上效果图，感兴趣的小伙伴儿可以自己copy一下，改成自己心中的效果~
先写这么多，以后有好玩的css动画效果，我会再在这里更新。
这篇关于CSS3 animation（动画） 属性与涟漪效果的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
