css3动画入场顺序怎么排列,列表排序方式切换动画

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Roboto);

.container {

margin: 50px auto;

max-width: 375px;

height: 667px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);

}

header {

position: relative;

background-color: #3f51b5;

height: 72px;

line-height: 72px;

color: #fff;

padding-left: 24px;

font-size: 18px;

font-family: 'Roboto', sans-serif;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);

}

.sort-button {

position: absolute;

right: 24px;

bottom: -28px;

width: 56px;

height: 56px;

background-color: #CFD8DC;

border-radius: 28px;

border: none;

outline: none;

transition: all 0.4s cubic-bezier(0.58, -0.37, 0.45, 1.46);

-webkit-transition: all 0.4s cubic-bezier(0.58, -0.37, 0.45, 1.46);

-moz-transition: all 0.4s cubic-bezier(0.58, -0.37, 0.45, 1.46);

overflow: hidden;

}

.none .sort-button {

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

}

.asc .sort-button {

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

transform: rotate(360deg);

}

.dec .sort-button {

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

transform: rotate(180deg);

/*background-color: #00b1a3;*/

}

.sort-button:before {

content: "";

display: block;

height: 56px;

width: 56px;

border: 2px solid #ff4081;

border-radius: 30px;

position: absolute;

top: -3px;

left: -3px;

transition: all 0.2s cubic-bezier(0.58, -0.37, 0.45, 1.46);

-webkit-transition: all 0.2s cubic-bezier(0.58, -0.37, 0.45, 1.46);

-moz-transition: all 0.2s cubic- bezier(0.58, -0.37, 0.45, 1.46);

background-color: #ff4081;

}

.none .sort-button:before {

height: 28px;

width: 28px;

top: 12px;

left: 12px;

background-color: transparent;

}

.sort-button span {

position: absolute;

display: block;

background: #fff;

height: 28px;

width: 2px;

top: 14px;

left: 27px;

border-radius: 2px;

}

.none .sort-button span {

background: #ff4081;

}

.sort-button span:before,

.sort-button span:after {

content: "";

position: absolute;

display: block;

background: #fff;

height: 10px;

width: 2px;

border-radius: 2px;

}

.none .sort-button span:before,

.none .sort-button span:after {

display: none;

}

.sort-button span:before {

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

top: -1px;

left: -3px;

}

.sort-button span:after {

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

transform: rotate(-45deg);

top: -1px;

left: 3px;

}

.item {

height: 56px;

border-bottom: 1px solid #ececec;

text-align: left;

padding-left: 16px;

}

.item label {

float: left;

display: inline-block;

background-color: #ccc;

width: 40px;

height: 40px;

border-radius: 20px;

margin-top: 8px;

transition: background .5s;

}

.item span {

display: inline-block;

height: 10px;

margin: 24px 0 0 20px;

width: 50%;

background: #ccc;

transition: width .2s;

}

.none .item:nth-child(3) label {

background: #f03232;

transition-delay: 0;

}

.none .item:nth-child(3) span {

width: 10%;

transition-delay: 0;

}

.none .item:nth-child(4) label {

background: #fa9618;

transition-delay: .1s;

}

.none .item:nth-child(4) span {

width: 20%;

transition-delay: .1s;

}

.none .item:nth-child(2) label {

background: #3caf4c;

transition-delay: .2s;

}

.none .item:nth-child(2) span {

width: 30%;

transition-delay: .2s;

}

.none .item:nth-child(6) label {

background: #00b1a3;

transition-delay: .3s;

}

.none .item:nth-child(6) span {

width: 40%;

transition-delay: .3s;

}

.none .item:nth-child(5) label {

background: #028ed7;

transition-delay: .4s;

}

.none .item:nth-child(5) span {

width: 50%;

transition-delay: .4s;

}

.asc .item:nth-child(2) label {

background: #f03232;

transition-delay: 0;

}

.asc .item:nth-child(2) span {

width: 10%;

transition-delay: 0;

}

.asc .item:nth-child(3) label {

background: #fa9618;

transition-delay: .1s;

}

.asc .item:nth-child(3) span {

width: 20%;

transition-delay: .1s;

}

.asc .item:nth-child(4) label {

background: #3caf4c;

transition-delay: .2s;

}

.asc .item:nth-child(4) span {

width: 30%;

transition-delay: .2s;

}

.asc .item:nth-child(5) label {

background: #00b1a3;

transition-delay: .3s;

}

.asc .item:nth-child(5) span {

width: 40%;

transition-delay: .3s;

}

.asc .item:nth-child(6) label {

background: #028ed7;

transition-delay: .4s;

}

.asc .item:nth-child(6) span {

width: 50%;

transition-delay: .4s;

}

.dec .item:nth-child(6) label {

background: #f03232;

transition-delay: 0;

}

.dec .item:nth-child(6) span {

width: 10%;

transition-delay: 0;

}

.dec .item:nth-child(5) label {

background: #fa9618;

transition-delay: .1s;

}

.dec .item:nth-child(5) span {

width: 20%;

transition-delay: .1s;

}

.dec .item:nth-child(4) label {

background: #3caf4c;

transition-delay: .2s;

}

.dec .item:nth-child(4) span {

width: 30%;

transition-delay: .2s;

}

.dec .item:nth-child(3) label {

background: #00b1a3;

transition-delay: .3s;

}

.dec .item:nth-child(3) span {

width: 40%;

transition-delay: .3s;

}

.dec .item:nth-child(2) label {

background: #028ed7;

transition-delay: .4s;

}

.dec .item:nth-child(2) span {

width: 50%;

transition-delay: .4s;

}