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
