利用CSS3制作网页动画

利用CSS3制作网页动画
一、CSS3变形（transform）
1：CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜
2：浏览器对变形属性的支持情况，并根据不同浏览器添加前缀
3：掌握4种2D变形的使用
2D位移：translate(tx，ty) px
2D缩放：scale() 倍数
2D倾斜：skew()
2D旋转：rotate() *deg
二、CSS3过渡
1：过渡通过一些CSS的简单动作触发样式平滑过渡
2：浏览器对过渡属性的支持情况，并根据不同浏览器添加前缀
3：过渡属性的使用
4：过渡的触发机制
（transition呈现的是一种过渡。transform:{scale(xx)}）放大 倍数
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速
（渐显渐隐效果）
伪类触发：
：hover
：active
：focus
：checked
transition: {all 1s ease-out 1s}
过渡或动态的CSS属性 过渡所需时间 过度函数 过渡开始出现的延迟时间
transform: scale(2);
放大 2倍
三、CSS3动画
1：animation属性中通过调用关键帧声明的动画实现一个较复杂的动画效果
2：浏览器对动画属性的支持情况，并根据不同浏览器添加前缀
3：动画的使用过程
使用@keyframes制作关键帧。
用animation调用@keyframes声明的关键帧。
animation: animation-name animation–duration animation-timing-function
animation-delay animation-iteration-count animation-direction
animation-play-state animation-fill-mode;
由@keyframes创建的动画名称 、 动画时间、
动画方式、 延迟时间 、 动画播放次数 、 动画播放方向、
动画播放状态、 动画开始之前和结束之后的操作。