【视频】css动画实用技巧
Hello，大家好，今天跟大家聊一下，如何使用css3动画属性来实现惊艳的动画效果。
对于css3的动画属性想必大家都能说出一二，应该也会用过其中的一两个，比如transition,animation,transform都是css3动画的必知必会的属性。
为了方便大家更好的参与到接下来聊的话题，我们先把常用的动画属性跟大家一起过一下：
-
属性一 transition [ 示例演示 ]
-
属性二 animation [ 示例演示 ， animation动效库 ]
-
属性三 transform [ 示例演示 ]
接下来跟大家聊几个技巧： animation-delay的妙用，border颜色的妙用，border宽度的妙用
-
技巧一 animation-delay设置成负值 [ 示例演示 ， 练习操作 ]
-
技巧二 设置border颜色 [ 示例演示 ， 练习操作 ]
-
技巧三 设置border宽度 [ 示例演示 ， 练习操作 ]
再给大家介绍 正圆运动，椭圆运动，弧形运动 的实现方法
-
技巧四 正圆运动 [ 示例演示 ]
-
技巧五 椭圆运动 [ 示例演示 ]
-
技巧六 弧形运动 [ 示例演示 ]
相关资料：
- 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
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
