CSS transition 和 CSS transform 配合制作动画

课程目标

• 深度理解掌握 transition-timing-function 以及它的意义
• 学会配合使用 CSS transform 和 CSS transition 制作流畅动画
• 使用 CSS 伪元素触发过渡效果
• 合理的使用 CSS 布局

阅读

• CSS3 新特性兼容方法总结 (opens new window)
• CSS3 贝塞尔曲线工具 (opens new window)
• CSS3 过渡 (opens new window)
• CSS3 变形 (opens new window)
• CSS Transforms Module (opens new window)
• CSS3 中的变形 transform 详解 (opens new window)
• CodePen 优秀动画示例 (opens new window)

编码

在我们提供给你的 HTML 文件 (opens new window)基础上，适当的添加 CSS transition 和 CSS transform 属性 ，实现视频 demo (opens new window) 中的效果。

• 鼠标 hover 上去的时候，出现小猫笑起来的动画
• transition 和 transform 各项子属性的值可以自定
• 对 CSS 布局比较感兴趣的同学，在学有余力的情况下，可以尝试自己用 CSS 画出小猫

要求

• 注意浏览器中的兼容性
• 请注意代码风格的整齐、优雅
• HTML 及 CSS 代码结构清晰、规范
• 代码中含有必要的注释