让元素动起来会拥有特效能在一定程度上让页面更漂亮。

一、 边框和阴影

• 边框圆角：使用 border-radius 构建圆角边框，在有边框，背景色或是盒阴影的元素上可观察。

二、 渐变

渐变有两种，线性渐变（linear-gradient()）、径向渐变（radial-gradient()）。

三、 变换（Transform）

有可选值 translate()（平移），rotate()（旋转），scale()（缩放），skew()（倾斜） 等 2D/3D 变换。配合 transform-origin 改变变换原点。

四、 过渡（Transition）

transition 是 transition-property、transition-duration、transition-timing-function、transition-delay 的一个缩写属性。

• transition-property：指定过渡属性的名称。可用值为 none、all、IDENT（具体的属性名，小写）
• transition-duration：以秒或毫秒为单位指定过渡动画所需的时间，默认值为 0ms。可以指定多个时长，每个时长被分别应用在由 transition-property 指定的对应的属性上
• transition-delay：过渡前需要等待的时间，值以秒（s）或毫秒（ms）为单位
• transition-timing-function：计算过渡效果影响的 CSS 属性的中间值，值被 <easing-function> 定义

过渡效果

点击查看过渡

信息

仅能监听属性的“开始”和”结束“状态，无法定义中间帧

五、 动画（Animation）

animation 是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 属性的一个简写形式。

• animation-name：指定一个或多个 @keyframes at-rule 的名称
• animation-duration：动画完成一个动画周期完成的时间。以毫秒或秒为单位
• animation-timing-function：动画在每一个周期内如何进行
• animation-delay：动画到元素开始执行之前的等待时间
• animation-iteration-count：动画序列在停止前应播放的次数。可用具体的数值或 infinite（无限循环）
• animation-direction：动画应正向播放（normal）、反向播放（reverse）、正向开始的正反交替播放（alternate）、反向开始的正反交替播放（alternate-reverse）
• animation-fill-mode：动画在执行之前和之后将何样式应用于目标。可选值：
  • none：无样式应用
  • forwards： 将保留执行期间遇到的最后一个关键帧计算值
  • backwards：将应用第一个关键帧定义的值
  • both：遵循 forward 和 backwards 的规则，从而在两个方向上扩展动画属性
• animation-play-state：动画是运行还是暂停
  • paused：暂停
  • running：运行

简单动画

简单的动画