CSS3 动画（动态向下箭头、内容上移、内容向左滑入）

hover 时按钮抖动

&:hover {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

动态的向下的箭头

main .heart{
animation: heart 1.3s ease-in-out 2.7s infinite alternate;
}

//margin-top会发生卡顿
@keyframes heart{
from{margin-top:0px;}
to{margin-top:-6px;}
}

//用transform就流畅了
@keyframes heart{
from{transform:translate(0,0)}
to{transform:translate(0,6px)}
}

动态的向下的箭头

// html 
<div class="down">
    <div class="arrow arrow-1"></div>
        <div class="arrow arrow-2"></div>
</div>
// css
.down {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    width: 40px;
    cursor: pointer;
    .arrow {
        position: absolute;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        cursor: pointer;
        margin-left: -10px;
        top: 30px;
        left: 50%;
        &::before, &::after {
            background: #fff;
            content: '';
            display: block;
            height: 3px;
            position: absolute;
            top: 0;
            left: 0;
            width: 18px;
            border-radius: 30px;
        }
        &::before {
            -webkit-transform: rotate(45deg) translateX(-3px);
            transform: rotate(45deg) translateX(-3px);
            -webkit-transform-origin: top left;
            transform-origin: top left;
        }
        &::after {
            -webkit-transform: rotate(-45deg) translateX(3px);
            transform: rotate(-45deg) translateX(3px);
            -webkit-transform-origin: top right;
            transform-origin: top right;
        }
    }
    .arrow-1 {
        -webkit-animation: arrow-movement 2s ease-in-out infinite;
        animation: arrow-movement 2s ease-in-out infinite; 
    }
    .arrow-2 {
        -webkit-animation: arrow-movement 2s 1s ease-in-out infinite;
        animation: arrow-movement 2s 1s ease-in-out infinite;
    }
    @-webkit-keyframes arrow-movement {
        0% {
            opacity: 0;
            top: 30px;
        }
        30% {
            top: 10px;
        }
        70% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    
    @keyframes arrow-movement {
        0% {
            opacity: 0;
            top: 30px;
        }
        30% {
            top: 10px;
        }
        70% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
}

逐渐上移

.coverbox {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 156, 246, 0.5);
    transition: height 0.5s ease-out, opacity 0.2s ease-in, visibility 0.2s ease-in;
    visibility: 0;
    opacity: 0;
    &.active {
        opacity: 1;
        visibility: 1;
        height: 100%;
    }
    .img {
        width: 40px;
        height: 40px;
        border: 1px solid #fff;
    }
    .word {
        color: #fff;
    }
}

从左滑入

// css
.box {
    opacity: 0;
    &.active {
        opacity: 1;
        animation: bounceInLeft 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    @keyframes bounceInLeft {
        0% {
            opacity: 0;
            transform: translate3d(-3000px, 0, 0);
        }
        60% {
            opacity: 1;
            transform: translate3d(25px, 0, 0);
        }
        75% {
            transform: translate3d(-10px, 0, 0);
        }
        90% {
            transform: translate3d(5px, 0, 0);
        }
        100% {
            transform: none;
        }
    }
}
// js
$(window).scroll(function(){
    let bHeight = document.body.clientHeight;
    if($(window).scrollTop() > ($(".box").offset().top - bHeight) && $(window).scrollTop() < ($(".box").offset().top + 150)){
        $('.box').addClass('active')
    }else{
        $('.box').removeClass('active')
    }
})