动画 animation
动画 animation是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
动画的基本使用
- 先定义动画
- 再使用（调用）动画
用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
0% {
widht:100px;
}
100% {
width:200px;
}
}
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
- 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改变为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另外一种样式的效果。您可以改变任意多的样式任意多的次数
- 请用百分比来规定变化发生的时间，或用关键词“from” 和 “to”，等同于0%和100%
使用动画：
animation-name:动画名称;
animation-duration:持续时间;
例如：实现如下效果：
一个盒子放大1.2倍，并开始旋转5度，平移200px,10秒钟完成。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 1、定义动画 */ @keyframes move { /* 0%表示开始状态 */ 0% { transform: translateX(0px); transform: scale(1.2); transform: rotate(50deg); } 100% { transform: translateX(800px); } } div { width: 200px; height: 200px; margin-top: 100px; background-color: pink; /* 2、调用动画并说明持续时间 */ animation-name: move; animation-duration: 10s; } </style> </head> <body> <div></div> </body> </html>
