css3中的過度transition與動畫animation以及字型@font-face
一.transition:
書寫形式：
1.現在元素中書寫要過渡效果的css屬性
2.再用:hover等來觸發css屬性的改變。
只有過渡屬性的值改變時，才能觸發過渡效果。
eg:
div
{
height:200px;
width:200px;
transition:width 2s linear;
}
div:hover
{
width:400px;
}
只有過渡屬性的值改變時，才能觸發過渡效果。當開始未定義css屬性的值時，當用css屬性的值改變時，並不會出現過渡效果，這是因為剛開始未定義css屬性的值。
eg:
div
{
height:200px;
transition:width 2s ease;
}
div:hover
{
width:400px;
}
不會觸發過渡效果，因為剛開始沒有規定width的確定指。
二.動畫
書寫形式
1.動畫要使用keyframes來單獨寫
eg：@keyframes myfirst
{
%0{background-color:white}
%25{background-color:gray}
%50{background-color:yellow}
%75{background-color:red}
100%{background-color:white}
}
2.再在元素的css中使用動畫
div
{
animation:myifrst 5s 2s linear infinite alternate forwards;/*第一個時間是duration-timing,第二個為延遲時間*/
}
另外字型@font-face與動畫的定義差不多，
書寫形式
1.首先定義外部字型規則
2.再在元素的css屬性中引用。
@font-face
{
font-familly : myfirstfont;
src:url(xxx.ttf);
}
div
{
font-family:myfirstfont;
}
區別:動畫的命名是在keyframes之後，而font-face是用font-family來定義。