HTML学习笔记 cs动画基础（分列效果可用于做瀑布流） 第十五节 （原创） 参考使用表

.div0{ ???width: 100px; ???height: 100px; ???background-color: forestgreen; ???position: relative; ???-webkit-animation: anima 5s infinite alternate; ???/*animation 动画效果 infinite无限 ??alternate交替*/ ???-o-animation: anima 5s infinite alternate; ???animation: anima 5s infinite alternate;}@keyframes anima{ ???0%{background: #000; ?left: 0px; ?top: 0px;} ???25%{background: firebrick; ?left: 200px; ?top: 0px;} ???50%{background: fuchsia; ?left: 200px; ?top: 200px;} ???75%{background: cornflowerblue; ?left: 0px; ?top: 200px;} ???100%{background: #000000; ?left: 0px; ?top: 0px;}}@-webkit-keyframes anima { ???0%{background: #000; ?left: 0px; ?top: 0px;} ???25%{background: firebrick; ?left: 200px; ?top: 0px;} ???50%{background: fuchsia; ?left: 200px; ?top: 200px;} ???75%{background: cornflowerblue; ?left: 0px; ?top: 200px;} ???100%{background: #000000; ?left: 0px; ?top: 0px;}}.div1{ ???-webkit-column-count: 4; ???column-count: 4; ???/*分列数量*/ ???column-gap: 30px; ???/*列距离*/ ???column-rule:5px outset #FF0000; ???/*列颜色*/ ???-webkit-column-rule:5px outset #FF0000;}.div2{ ???width: 100px; ???height: 100px; ???background-color: deepskyblue; ???-webkit-transition: width 2s, height 2s, -webkit-transform 2s; ???transition: width 2s, height 2s, transform 2s; ???transition-delay:2s; ???/*过度延时时间*/}.div2:hover{ ???width: 200px; ???height: 200px; ???transform:rotate(360deg); ???-webkit-transform:rotate(360deg);}