/c3-animation

CSS3动画

Primary LanguageCSS

CSS3动画

什么是动画

1、动画片、漫画、视频、flash等等，会动的画面都是动画

2、颜色高度等属性的变化（过渡）也是动画

3、CSS3对于动画的实现由过渡和帧动画

初识CSS3动画

1、CSS3动画包括transition和animation

2、动画常常和transform属性配合使用

3、transform不是动画属性

CSS3动画的兼容性

  • CSS3动画效果兼容

1、IE10 2012-09-04 开始兼容动画

2、Chrome 4 2010-01-25 -webkit

3、Firefox 5 2011-01-25

  • CSS3事件兼容

1、IE 10 2013-10-17

2、Chrome 4 2010-01-25

3、Firefox 5 2011-01-25

CSS3动画的应用

1、功能性的菜单按钮

2、宣传用的轮播图、页面效果的缓冲

3、页面的切换过渡、小游戏

https://gitee.com/beat-the-buzzer/pictures/raw/master/c3-animation/c3-animation-01.png

CSS3动画的学习目标

1、熟练使用transition和animation

2、熟练使用动画库，观察动画，得到更好的实现方案

3、复杂动画的开发和实现

transition的使用

https://github.com/beat-the-buzzer/c3-animation/tree/master/transition

animation的使用

https://github.com/beat-the-buzzer/c3-animation/tree/master/animation

Demo：红包雨效果

https://github.com/beat-the-buzzer/c3-animation/tree/master/demo