今天完成的事情

1. 完成了任务8的BUG修改工作，现已提交。
2. 任务10 HTML部分代码的编写

明天计划的事情

任务10的编写工作

遇到的问题

今天主要以改BUG为主，修复BUG没有特别难的问题，主要还是要注意细节方面的一些问题。 PSD图上也有不合理的地方，如果自己主观上都觉得不合理了，则需要做出一些变通。

收获

初步学习了CSS3中的动画和过渡：

区分容易混淆的几个属性和值：

• animation (动画)
• transition (过渡)
• transform (变形)
• translate (移动)

CSS3中的transform属性可以用于内联元素和块级元素，可以旋转(rotate)、扭曲(skew)、缩放(scale)、和移动(translate)以及矩阵变形(matrix) 注意： transform是CSS3中的元素的属性，而translate只是transform的一个属性值，transform值transition的transition-property的一个属性值。 

animation、transition是CSS3中的两种动画属性。animation强调流程与控制，对元素的一个或多个属性的变化进行控制，可以有多个关键帧(animation和@keyframe结合使用)

transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生(例如hover)时才能获取样式，这样就会产生过渡动画。可以认为它有两个关键帧(transition + transform = 两个关键帧的animation)

transition语法：

transition时一个复合属性，可以设置四个过渡属性，简写方式如下：

transition：transition-property transition-duration transition-timing-function transition-delay；

• transition-property: 用来制定当元素其中一个属性改变时执行transition的效果，

CSS中能够产生动画的属性列表

• transition-duration: 过渡时间，用来制定元素转换过程的持续时间。

• transition-timing-function: 时间函数，允许你根据时间的推进去改变属性值的变换速率

贝塞尔曲线参考资料

自定义曲线工具

• transition-delay: 延迟，制定一个动画开始执行的时间。

触发方式：

伪类触发：

• :hover
• :focus
• :checked
• :active

如有下列情况，属性值改变不能产生过渡效果

1. background-image，如url(a.jpg)到url(b.jpg)（与浏览器支持相关，有的浏览器不支持）等
2. float浮动元素
3. height或width使用auto值
4. display属性在none和其他值（block、inline-block、inline）之间变换
5. position在static和absolute之间变换

--------------未完-------------