css3过渡

来源：互联网发布：妍道生物纤维面膜知乎编辑：程序博客网时间：2024/04/27 16:36

DEMO1

        img {            width: 192px;            height: 108px;            /*transition:5s height,5s 1s width;*/ /*height过渡后 延迟一秒width开始过渡，过渡时间为5s*/            /*transition:5s height,1s width;*/ /*height5秒过渡完成，width1秒过渡完成*/            /*transition: 5s;*/            /*transition-delay:5s;*/ /*延迟5s执行过渡*/            /*                linear->匀速                ease(默认)-> 先加速，后减速                ease-in->加速                ease-out->减速                cubic-bezier(n,n,n,n)->自定义            */            transition: 5s ease;        }            img:hover {                width: 960px;                height: 540px;            }

DEMO2

        div {            width: 100px;            height: 100px;            background:#00ff21;            transition: width 2s,height 2s;            -webkit-transition:width 2s,height 2s,-webkit-transform 2s;/* Safari and Chrome */        }            div:hover {                width: 200px;                height: 200px;                transform:rotate(180deg);                -webkit-transform:rotate(180deg); /* Safari and Chrome */            }

DEMO1&DEMO2效果

过渡属性：

from w3school

参考

0 0