CSS动画实用技巧

1.设置animation-delay为负值

定义动画何时开始，默认为0，即立即执行，设置为负值为立即执行，但跳过指定时间后进入动画。
设置animation-delay为负值，可以让动画立即执行，而且可以精准控制动画开始在哪个阶段。

<div class="load">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

/*加载动画效果*/
.load{
    width: 70px;
    height: 50px;
    margin: 100px auto;
}

.load .item{
    display: inline-block;
    height: 100%;
    width: 10px;
    background-color: green;
    animation: load-item 1s infinite ease-in-out;
    transform-origin: center bottom;
}

.load .item:nth-child(2){
    animation-delay: -0.8s;
}

.load .item:nth-child(3){
    animation-delay: -0.6s;
}

.load .item:nth-child(4){
    animation-delay: -0.4s;
}

.load .item:nth-child(5){
    animation-delay: -0.2s;
}

@keyframes load-item{
    0%,40%,100%{
        transform: scaleY(0.6);
    }

    20%{
        transform: scaleY(1);
    }
}

这样就可以控制每个条纹开始动画的阶段，达到按顺序执行的效果。

2.使用border颜色

元素的边框由四部分组成，可以改变其中几个部分的颜色，再将元素旋转起来，用来制作加载动画

<div class="circle"></div>

/*圆形加载效果*/
.circle{
    width: 200px;
    height: 200px;
    margin: 100px auto;
    box-sizing: border-box;
    border: 15px solid #ccc;
    border-left-color: #fff;
    border-radius: 50%;
    animation: circle 1s linear infinite;
}

@keyframes circle{
    from{
        transform: rotate(0);
    }

    to{
        transform: rotate(360deg);
    }
}

3.使用border-width宽度

使用border-width宽度过渡，可以创建出图片的折角动画，再配合opacity可以使图片翻页。

<div class="book">
    ![](banner1.jpg)
</div>

.book{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    opacity: 1;
    transition: all 500ms;
}

.book img{
    transition: all 500ms;
    border-radius: 4px;
}

.book:before{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    border-style: solid;
    border-width: 0;
    border-color: rgba(0,0,0,0.2) #fff;
    border-radius: 0 0 0 4px;
    transition: all 500ms;
}

.book:hover::before{
    border-right-width: 40px;
    border-bottom-width: 40px;
}