browniu/cssAnimation

纯CSS3实现细腻的交互动效

CssAnimation

纯CSS3实现细腻的交互动效果

Demo

百分比进度环

/*1*/
@keyframes rotate1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

混沌环

@keyframes rotate2 {
    0% {
        transform: rotate(0deg) translateY(-2px);
    }
    100% {
        transform: rotate(360deg) translateY(-2px);
    }
}

混沌环

@keyframes rotate2 {
    0% {
        transform: rotate(0deg) translateY(-2px);
    }
    100% {
        transform: rotate(360deg) translateY(-2px);
    }
}

水波纹

@keyframes move1 {
    0% {
        left: 0;
    }
    100% {
        left: -80px;
    }
}
@keyframes move2 {
    0% {
        left: -20px;
    }
    100% {
        left: -100px;
    }
}

抖动

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }
    4% {
        transform: rotate(-5deg);
    }
    8% {
        transform: rotate(5deg);
    }
    12% {
        transform: rotate(-5deg);
    }
    16% {
        transform: rotate(5deg);
    }
    20% {
        transform: rotate(-5deg);
    }
    24% {
        transform: rotate(5deg);
    }
    28% {
        transform: rotate(0deg);
    }
}

跳跃

@keyframes jump {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}