CSS3过渡跟动画解析

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;
}
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;
}

推荐阅读