CSS3过渡跟动画解析.docxVIP

第 第 PAGE 1 页 共 NUMPAGES 1 页 CSS3过渡跟动画解析 CSS3过渡跟动画  这两者的区分，很容易， 过渡就是字面上意思，比如，宽度从1px，渐渐增强到10px，这便是一种过渡； 动画，也是字面上意思，不过跟过渡最大的区分就是终于的状态，不管执行了什么动画，终于的状态会还原，比如说宽度从1px，渐渐增强到10px，动画结束后，会还原到1px。  举几个例子，举一反三即可。 1、过渡属性：  transition: width 1s linear 2s; // 等价于 transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; 实例（鼠标悬浮在div上，3秒后，宽度从150px，2秒的时光匀称增长到400px，然后停止）  div { width: 150px;  height: 100px;  background: blue;  transition: width 1s linear 3s;  } div:hover { width: 400px