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;

}

2、动画属性

 

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;// 动画循环次数，永久

animation-direction: alternate;// 动画一个周期结束后，倒序播放，正常是 normal

animation-play-state: running;

// 等价于

animation: myfirst 5s linear 2s infinite alternate;

// 动画名称的两种写法

@keyframes myName1 {

  from {

    background: red;

  }

  to {

    background: yellow;

  }

}

@keyframes myName2 {

  0% {

    background: red;

  }

  50% {

    background: green;

  }

  100% {

    background: blue;

  }

}

实例（div的背景颜色从红色->绿色->蓝色，蓝色->绿色->红色，无限循环）

 

div

{

    animation: myfirst2 5s linear 2s infinite alternate;

}