CSS 动画分享

Question

闪烁效果，可用于消息提醒，红点闪烁：

.notice {
    display: inline-block;
    background: #e14346;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 3px rgba(135, 17, 20, 0.3);
    animation: 1.6s cubic-bezier(.65,.05,.36,1) 0s infinite alternate flashing;
}

@keyframes flashing {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

Ease out 可用于按钮移入移除的效果：

.button {
    border: 2px solid #e14346;
    padding: 6px 40px;
    background: none;
    font-size: 1.2rem;
    font-weight: bold;
    color: #e14346;
    transition-property: background, color;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}

.button:hover {
    border: 2px solid #e14346;
    padding: 6px 40px;
    background: #e14346;
    font-size: 1.2rem;
    color: #fff;
    transition-property: background, color;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}