视频教程：CSS3动画属性实用技巧教程
目前CSS3动画已经越来越流行，在一些网页专题的产品介绍页面，手机APP首屏展示页面，又或者只是一个按钮简单变形，都可以使用CSS3来实现，虽然动画简单，但却让静态枯燥无味的页面增加一点生气，更吸引用户，更加高端。
今天向大家讲解几个常用的CSS3动画属性，如：transition,animation,transform等属性，简单而实用，对于网页设计师和前端人员可以进来一起学习，下面是视频教程和一些在线示例。
为了方便大家更好的参与到接下来聊的话题，我们先把常用的动画属性跟大家一起过一下：
DEMO演示
- 属性一 transition [ 示例演示 ]
- 属性二 animation [ 示例演示 ， animation动效库 ]
- 属性三 transform [ 示例演示 ]
接下来跟大家聊几个CSS3动画技巧：animation-delay的妙用，border颜色的妙用，border宽度的妙用:
DEMO演示
- 技巧一 animation-delay设置成负值 [ 示例演示 ， 练习操作 ]
- 技巧二 设置border颜色 [ 示例演示 ， 练习操作 ]
- 技巧三 设置border宽度 [ 示例演示 ， 练习操作 ]
再给大家介绍 正圆运动，椭圆运动，弧形运动 的实现方法：
DEMO演示
- 技巧四 正圆运动 [ 示例演示 ]
- 技巧五 椭圆运动 [ 示例演示 ]
- 技巧六 弧形运动 [ 示例演示 ]
相关资料：
- transition使用细节：https://developer.mozilla.org/zh-CN/docs/CSS/Tutorials/Using_CSS_transitions
- animation使用细节：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_animations
- 2d变换：http://www.w3cschool.cc/css3/css3-2dtransforms.html
- 3d变换：http://www.w3cschool.cc/css3/css3-3dtransforms.html
- animation-direction是否循环交替反向播放动画 http://www.w3cschool.cc/try/playit.php?f=playcss_animation-direction&preval=reverse
作者：冰果
来源： 75team
交流：UI设计交流群：133654942（ 快速加入 ），与500名设计师交流设计，分享素材。
建议：看到好的文章或素材，记得分享到微博等媒体，让更多的朋友知道，也方便日后查阅。
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
