css过渡和动画

Posted 2020-08-08

一、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;}

　　　　　　　　　　　　　　　　　　}