CSS3中的animation和transition的区别？
下面是animation动画效果的使用例子：
@keyframes changeColor { from { border-radius: 0; } to { border-radius: 100%; }} div { width: 200px; height: 200px; background: red; text-align:center; margin: 20px auto; line-height: 200px; color: #fff; } div:hover { animation-name: changeColor; animation-duration: 5s; animation-timing-function: ease-out; animation-delay: .1s; } 变形与动画 Hover Me
下面是transition过度函数的使用例子：
div { width: 200px; height: 200px; background-color: orange; margin: 20px auto; -webkit-transition-property: -webkit-border-radius; transition-property: border-radius; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function:linear; transition-timing-function:linear; -webkit-transition-delay: .2s; transition-delay: .2s;}div:hover { border-radius: 100%;} 变形与动画
上述的两个例子，都是鼠标滑过，使div为正方形的盒子变成圆形。
【提问】那这两个属性有什么本质上面的区别吗？ |
免责声明：本内容仅代表回答者见解不代表本站观点，请谨慎对待。
版权声明：作者保留权利，不代表本站立场。
|
|
|
|
|
|
|
|
|
本质上来说没有。动画更强调是连续性，主是一个图形在单位时间内的变化。而transition可比animation强大多了，它涉及到矩阵变换，css空间坐标系，线性关系等。简单来说，animation是transition的简化版。 |
|
|
|
|
|
|
|
|
微信访问
手机APP
