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来定义。