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);
}