利用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创建的动画名称 、 动画时间、
动画方式、 延迟时间 、 动画播放次数 、 动画播放方向、
动画播放状态、 动画开始之前和结束之后的操作。