了解基本CSS3动画属性值，必须小心避免滥用

我们可以在不使用JavaScript的情况下创建效果和动画，这将有助于许多设计师的工作。但我们必须小心避免滥用CSS3，因为旧浏览器不支持其所有属性。

基本了解CSS，特别是CSS3过渡和关键帧动画，非常重要。使用这个简单的概念，我们将看到如何制作功能图像滑块。

CSS3过渡的基本概念

我们可以使用四个过渡属性：

transition-property 定义应应用转换的CSS属性的名称。

transition-duration 定义转换应发生的持续时间。

transition-timing-function 确定如何计算转换的中间值。定时功能的效果通常称为缓动功能。

transition-delay 定义转换何时开始。

目前，Safari ，Chrome，Firefox ，Opera 和IE 的最新版都支持CSS3过渡。由于该技术仍然相对较新，因此需要浏览器的前缀。到目前为止，每个浏览器的语法完全相同，只需要更改前缀。

让我们看看如何将简单的过渡应用于链接：

动画属性有八个子属性：

animation-delay 定义动画开始的时间。

animation-direction 将动画设置为在备用循环中反向播放。

animation-duration 定义动画完成一个循环所需的时间长度。

animation-iteration-count 定义动画循环在停止之前应播放的次数。

animation-name 指定

@keyframes 规则的名称。

animation-play-state 确定动画是在运行还是暂停。

animation-timing-function 描述动画在一个周期内的进展情况。

animation-fill-mode 指定CSS动画在执行之前和之后应如何将样式应用于其目标。

让我们看看如何将简单的动画应用于div：

每个关键帧描述动画元素应如何在动画序列中的给定点处呈现。该关键帧取一个百分比值来指定时间：0%是动画的开始，同时100%是结束，可以选择为中间动画添加关键帧。

CSS3在动画具有很大的潜力，但它确实有各种浏览器限制，所以有时候JavaScript更可取。