/* 动画 */
/* 心跳 */
.animation_heart{
    animation: heart 2s infinite;
}
@keyframes heart {
    0%{
        transform: scale(1);
    }   
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    } 
}
/* 左右滑动 */
.animation_slide_left_right{
    animation: slideLeftRight 2s ease 0s infinite alternate;
    position: absolute;
}
@keyframes slideLeftRight {
    from{
        left: 0;
    }
    to{
        left: calc(100% - 100px);
    }    
}
/* 右左滑动 */
.animation_slide_right_left{
    animation: slideRightLeft 2s ease 0s infinite alternate;
    position: absolute;
}
@keyframes slideRightLeft {
    from{
        right: 0;
    }
    to{
        right:  calc(100% - 100px);
    }    
}
/* 两张图片轮流展示 */
.animation_show_in_turn{
    position: absolute;
    animation: showInTurn 2s ease 0s infinite alternate;
    
}
@keyframes showInTurn {
    from{
        left: 0;
        top: 0;
        z-index: 2;
    }
    to{
        left: 120px;
        top: 120px;
        z-index: 3;
    }    
}
.animation_show_in_turn_two{
    position: absolute;
    animation: showInTurnTwo 2s ease 0s infinite alternate;
}
@keyframes showInTurnTwo {
    from{
        left: 120px;
        top: 120px;
        z-index: 3;
        opacity: 1;
    }
    to{
        left: 0;
        top: 0;
        z-index: 2;
    }    
}

/* 飘落 */
.animation_snowflake_fall{
    position: absolute;
    animation: snowflakeFall 2.5s ease-in-out 0s infinite normal;
}
@keyframes snowflakeFall{
    0%{
        top: -100%;
        left: 0;
    }
    50%{
        top: -50%;
        left: 15px;
    }
    100%{
        top: 0;
        left: 0;
    }
}
/* 上浮 */
.animation_bubble_floating{
    position: absolute;
    animation: bubbleFloating 2.5s linear 0s infinite alternate;
}
@keyframes bubbleFloating{
    0%{
        bottom: -100%;
        left: 0;
    }
    50%{
        bottom: -50%;
        left: 15px;
    }
    100%{
        bottom: 0;
        left: 0;
    }
}