CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。
CSS3 @keyframes 规则
要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
@keyframes myfirst{ ???from {background: red;} ???to {background: yellow;}} @-webkit-keyframes myfirst /* Safari 与 Chrome */{ ???from {background: red;} ???to {background: yellow;}}CSS3 动画
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
- 规定动画的名称
- 规定动画的时长
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css3动画</title> ???<style type="text/css"> ????* { ??????margin: 0; ??????padding: 0; ????} ??????????div { ??????width: 100px; ??????height: 100px; ??????background: red; ??????animation: myfirst 5s; /*规定动画的名称:myfirst 规定动画的时长: 5s*/ ??????-webkit-animation: myfirst 5s; ????} ?????????@-webkit-keyframes myfirst { ??????from {background: red} ??????to {background: yellow} ????} ?????????keyframes myfirst { ??????form {background: red} ??????to {background: yellow} ????} ????????</style></head><body> ?<div></div></body></html>css3--动画
原文地址：https://www.cnblogs.com/qjuly/p/9053626.html