今天做的事

学习了css animation的部分

明天计划

angular指令的学习

收获以及困惑

bootbox模态框单页面初始点击正常，若跳转路由，则会触发多次，目测作用域的问题

CSS动画允许动态展现CSS样式的变化。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：

能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。

动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。

让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

2.知识剖析

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现

animation-delay:设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。

animation-direction:设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行.

animation-duration:设置动画一个周期的时长。

animation-iteration-count:设置动画重复次数， 可以指定infinite无限次重复动画

animation-name:指定由@keyframes描述的关键帧名称。

animation-play-state:允许暂停和恢复动画。

animation-timing-function:设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。

animation-fill-mode:指定动画执行前后如何为目标元素应用样式。

定义一个动画

将其赋给html

@keyframes 规则

要定义CSS动画，我们需要先使用@keyframes 规则来声明关键帧。你还需要给动画命名，便于后面引用。

例如，如果你创建了一个在屏幕上移动的小车的动画，你可能需要把动画命名为像drive这样的，然后你的 @keyframes 规则应该是这样写的：

@keyframes drive {

                }

一个animation定义的动画简写属性可能是这样的：

animation: myAnimation 1s ease-in-out 2s 4

animation: （animation-name)(animation-duration)

                (animation-timing-function)(animation-delay)(animation-iteration-count)

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animationiteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state></single-animation-play-state></single-animation-fill-mode></single-animation-direction></single-animationiteration-count></time></single-animation-timing-function></time></single-animation-name></single-animation>

动画的名称，持续时间，速率，延迟时间，重复次数，方向，结束位置，启动停止动画

Easing是速率被分配到整个动画过程中的方式。在CSS中，我们的easing是用animation-timing-function属性处理的。我们有三种定义timing的方式：关键字；自定义三次贝塞尔曲线；steps。它们有自己独特的概念，所以它实际上并没有做任何的easing。

预定义的easing关键字是：ease (默认); linear; ease-in; ease-out和ease-in-out。

linear:匀速

eaes-in:从最快速越来越慢

ease-out:一直加速

ease-in-out：先加速后减速

贝塞尔曲线

值得庆幸的是，easing的值我们有不止五个关键字可以选择。在我们希望能够有更多的easing选择的时候，三次贝塞尔曲线来拯救我们了！上面的几个关键字也可以被定义为三次贝塞尔曲线。这些关键字有点像常见贝塞尔曲线的快捷方式。当你需要的控制比上边五个关键字提供的更多的时候，你可以为你的timing函数创建三次贝塞尔曲线，这样easing可选择的值就几乎是无限的！