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