首页 > 代码库 > css过渡和动画
css过渡和动画
一、transition(过渡):
1.规定使用属性的名称;
2.规定时长;
3.配合hover的使用。
div{
width:100px;
height:50px;
background:red;
transition:width 5s linear 2s;
}
div:hover{
width:1200px;
height:200px;
}
二、动画(animation):
@keyframe规则用于创建动画。(必须要在代码前面加入浏览器前缀,实现兼容性)
1.绑定选择器;
2.动画名称;
3.动画时长。
div{
width:100px;
height:50px;
background:red;
border:1px soild black;
position:relative;
animation:myfirst 5s linear 2s infinite;
}
@keyframe myfirst{
0% {backgroud:black; left:0px; top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:green;left:200px;top:200px;}
75%{background:bule;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}
css过渡和动画