大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公众号：Web前端之巅
- 博客园：upload/201810201040200818.png" style="margin: 0px; padding: 0px; border: 0px; max-width: 820px; height: auto;" alt="" />
一、动画
1、创建动画
好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。
一个动画至少需要两个属性：
animation-name：动画的名字（创建动画时起的名字，如下为 moveTest）
animation-duration：动画的耗时animation-name: moveTest; animation-duration: 2s;如需在 CSS3 中创建动画，需要学习
@keyframes规则。@keyframes规则用于创建动画。在@keyframes中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。使用
@keyframes关键字来创建动画。@keyframes moveTest { /*百分比是指整个动画耗时的百分比*/ 0% { transform: translate(0px, 0px); } 50% { transform: translateY(200px); } 100% { transform: translate(200px,200px); } }其中，百分比是指整个动画耗时的百分比。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: blue; animation-name: moveTest; animation-duration: 2s; } @keyframes moveTest { 0% { transform: translate(0px, 0px); } 50% { transform: translateY(200px); } 100% { transform: translate(200px,200px); } } </style> </head> <body> <div></div> </body> </html>
