CSS3部分动画属性

transition过渡属性

自己实现了个W3C鼠标移上去变化的demo

div{
  width:100px;
  height:75px;
  background:rgb(211,227,153);
  border-radius:10px;
  color:white;
  line-height:75px;
  text-align:center;
  font-weight:bold;
  transition:all 1s;
}
div:hover{
  width:120px;
  height:85px;
  background:rgb(30,199,230);
  transform:rotate(360deg);
}

demo1.gif

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

相关属性值
transition简写属性，用于在一个属性中设置四个过渡属性。
transition-property规定应用过渡的 CSS 属性的名称。
transition-duration定义过渡效果花费的时间。默认是 0。
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。
transition-delay规定过渡效果何时开始。默认是 0。

CSS3 @keyframes 规则

div{
  width:100px;
  height:75px;
  border-radius:10px;
  background:rgb(211,227,153);
  color:white;
  line-height:75px;
  text-align:center;
  font-weight:bold;
  animation:myfirst 1s;
  margin-top:50px;
  margin-left:50px;
  animation-duration:3s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}

@keyframes myfirst
{
  from{
    background:rgb(211,227,153);
    transform:translate(0,0);
  }
  to{
    background:rgb(30,199,230);
    transform:translate(100px) rotate(30deg) scale(1.2)
  }
}

需要改变的属性写在from 和to里面，若要重复执行 则需要count和direction给定值，
animation：myfirst 这个一定要写 不然不知道动画是谁的

demo2.gif

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

属性.png