css省略动画总结

1.使用伪类content做动画

// 此种方法目前测试在safari浏览器中无效
.loading{
    width: 16px;
    display: inline-block;
    &:after {
        content: "";
        animation:dotAnimate 1s infinite;
    }
}

@keyframes dotAnimate {
    0%, 100% {content: "";}
    25% {content: ".";}
    50% {content: "..";}
    75% {content: "...";}
}

2.使用background-clip属性

// 在IE9以上的浏览器都是有效果的，只是省略号是正方形的
// 使用的是background-clip属性，设置background-color的内容
// border-box:  背景被裁剪到边框盒。
// padding-box: 背景被裁减到内边距边框
// content-box: 背景被裁减到内容边框
.loading{
    width: 15px;
    display: inline-block;
    min-height: 3px;
    padding-right: 3px;
    margin-left: 3px; 
    padding-left: 3px;
    border-left: 3px solid currentColor; 
    border-right: 3px solid currentColor;
    background-color: currentColor; 
    background-clip: content-box;
    animation: dotAnimate 1s infinite step-start both;
    &:before { content: '...'; } /* IE8 */
    &::before { content: ''; }
}
@keyframes dotAnimate {
    25% { border-color: transparent; background-color: transparent; }
    50% { border-right-color: transparent; background-color: transparent; }
    75% { border-right-color: transparent; }
}

3. 使用宽度动画

.loading { 
    display: inline-block;
    width: 18px;
    vertical-align: -6px;
    overflow: hidden;
    font-size: 24px;
    animation: dotAnimate 1.5s infinite step-start;
    line-height: 1;
}
@keyframes dotAnimate {
    0% { width: 0; margin-right: 18px; }
    33% { width: 6px; margin-right: 12px; }
    66% { width: 12px; margin-right: 6px; }
    100% { width: 18px; margin-right: 0;}
}

// 使用宽度第二种
.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: dotAnimate steps(4,end) 900ms infinite;      
    animation: dotAnimate steps(4,end) 900ms infinite;
    content: "\2026";
    width: 0px;
}

@keyframes dotAnimate {
    to {
        width: 20px;    
    }
}