如何借助CSS来创建动画效果

作者:课课家教育更新于： 2017-04-01 11:40:01

　　我们都知道，动画效果是css3新增加的功能，运用它可以完成很多令人惊艳的动态效果。通过CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、flash动画以及javaScript。借助CSS3Animation的强大功能来创建平滑以及易于定制的动画。

　　（一）百分比动画

　　如下例：

　　静态显示效果如下：

　　（二）起点与终点动画

　　百分比动画可以详细分每个片段的效果，但是，"起点与终点动画"就是说存在0%与100%的百分比动画，如下例：

　　静态显示效果如下：

　　（三）缓动速度与延迟

　　"缓动速度"与"过度速率"的概念相同，并具有相同速度值，如下例：

　　静态显示效果如下：

　　（四）重复播放与交替

　　以下对交替播放设置进行演示，以上都是动画到达100%后直接返回0%，要是设置了交替属性，那到达100%后就会从100%处往回放到0%，如倒带功能，如下例：

　　静态显示效果如下：

　　（五）停止播放

　　要是想停止动画的播放，除注释动画调用属性以外，还能在调用标签中插入“paused”，这样的话刷新页面后，该标签不会加载任何一个动画，默认下，动画停止在起始位置中，即animation-fill-mode:backforwards，但要是想让动画停止在结束位置，能把“animation-fill-mode”的属性值设置为forwards，如下例：

　　静态显示效果如下：

　　（六）animation简写模式

　　一傻瓜“animation”子属性都可以一次性卸载“animation”属性，以下为完整格式：

　　animation:指的是动画名称动画执行秒数缓动速度执行次数有没有交替缓动延迟秒数停留位置;

　　以下对简写模式进行演示：

　　静态显示效果如下：

　　注意：由于浏览器兼容性的问题，有一些火狐浏览器没有办法识别特殊的边框属性，IE低版本浏览器还没有办法支持动画效果，可以用谷歌浏览器浏览本页查看完整效果。

　　总结：通过以上介绍相信大家都知道，CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助Javascript。CSS3动画的属性主要分为三类：transform、transition以及animation。我们网站会给大家介绍更多关于Web开发的内容，要是大家感兴趣的话可以关注我们网站：课课家教育。