第十一课-动画样式详解

第十一课-动画样式详解

一、什么是动画？

动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。为了得到活动的画面，每个画面之间都会有细微的改变。（以上定义来自维基百科）

（一）展示一个动态的圆形

过渡和动画:

在不使用flash或者JavaScript的情况下做出元素的规律运动的效果，可以使页面变得非常丰富，表现力强。

（二）动画的基本实现条件

（三）常规动画创造方式

（四）关键帧动画创造方式

（五）触发式动画原理之触发动作

:hover
慢开 慢来
慢开 快回
快开 慢回

（六）触发式(过渡)动画原理之动画参数

（七）触发式动画原理之动画参数

过渡动画时间函数： transition-timing-function

定义动画从第一帧到最后一帧变化过程的速率变化

注:贝塞尔曲线 http://cubic-bezier.com

过渡动画综合属性：属性名称 过渡时间 过度动画时间函数 动画延迟时间;

定义元素是以某个属性的变化作为动画的变化效果(如,宽度的变化, 高度的变化等), 第一帧和最后一帧代表的就是该属性的值的变化

延时 入有 出有：写在盒子中 入有 出没：写在hover中 入没 出有：写在盒子中 hover中写 零秒

transition 被动动画 复合属性

/* 匀速 */ transition-timing-function: linear;

/* 匀加速 */ transition-timing-function: ease-in;

/* 匀减速 */transition-timing-function: ease-out;

/* 加速 减速 */transition-timing-function: ease-in-out;

transition:属性名 时间 贝赛尔曲线 延时
-property:属性名 all 元素的所以属性都会有过度样式
width height left right
-delay 延时 正数延迟
负数提前
-timing-function 贝赛尔曲线
运动轨迹
ease 先慢 在快 在慢
-duration 时间

贝赛尔曲线
x:时间
y:距离

transition 过度
起始位置
时间
终点位置

二、主动式

动画讲解

animation 主动动画

浏览器可以自动执行

animation 复合属性
名称 时间 曲线 延时 执行次数 播放方向
-name 名称
-duration 时间
-delay 延时
-iteration-count 执行次数 infinite
--timing-function 曲线
-direction 播放方向 normal reverse

alternate-reverse  1 3 5 7 9 反方向播放
                  2 4 6 8 10   设置方向播放

（一）主动动画原理之帧定义

（二）主动动画原理之动画激活1

（三）主动动画原理之动画激活2

（四）主动动画原理之时间函数

主动式动画时间函数： animation-timing-function

时间函数：定义动画从第一帧到最后一帧变化过程的速率变化

注：参照贝塞尔曲线

主动式动画时间延迟： animation-delay

定义动画从触发动作执行的一瞬间，延迟多长时间开始展示动画，默认延迟为0，即动作一执行立马就展示动画

注：参照贝塞尔曲线

（五）主动动画原理之动画播放次数

主动式动画播放次数： animation-iteration-count

（六）主动动画原理之多次播放动画时的的正反方向

animation-direction：规定动画是否在下一周期逆向地播放。

（七）主动动画原理之动画播放完成之后的状态

animation-fill-mode ：规定元素主动式动画播放完成后的状态。

（八）主动动画原理之动画运行状态

三 轮播插件

搜索swipre

api文档 使用的技术

在BootCDN里搜索swiper并下载CSS和JS文件!

min.js是压缩后的代码,减少了一定的空间

复制粘贴Html代码等，自己再查文档进行调整