transition過渡屬性
自己實現(xiàn)了個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-新娜。
相關(guān)屬性值
transition簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性蝴簇。
transition-property規(guī)定應(yīng)用過渡的 CSS 屬性的名稱杯活。
transition-duration定義過渡效果花費的時間。默認是 0熬词。
transition-timing-function規(guī)定過渡效果的時間曲線旁钧。默認是 "ease"吸重。
transition-delay規(guī)定過渡效果何時開始。默認是 0歪今。
CSS3 @keyframes 規(guī)則
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里面嚎幸，若要重復(fù)執(zhí)行 則需要count和direction給定值，
animation：myfirst 這個一定要寫 不然不知道動畫是誰的
demo2.gif
Internet Explorer 10寄猩、Firefox 以及 Opera 支持 @keyframes 規(guī)則和 animation 屬性嫉晶。
Chrome 和 Safari 需要前綴 -webkit-。
注釋：Internet Explorer 9田篇，以及更早的版本替废，不支持 @keyframe 規(guī)則或 animation 屬性。
屬性.png
