利用H5的css3制作动画

CSS3 弹跳动画

出现弹跳效果

@keyframes bounceIn{
     0% {
        opacity: 0;
        -webkit-transform: scale(.3);
         transform: scale(0)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
复制代码

消失弹跳效果

@keyframes bounceOut {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
复制代码

CSS3左右跳动效果

@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);
    }
}
复制代码

tips

效果触发的条件可以是元素的hover属性和js的hover事件

• 第一种鼠标移入的时候可以在对象hover上添加animate:bounceIn .5s ease,提示框会出现先放大后缩小的动画效果，鼠标移出消失。
• 第一种鼠标移入的时候可以在对象hover上添加animate:shake .8s ease,按钮会出现左右反弹动画效果。
• 也可以通过js利用 onmouseover和onmouseout事件通过this.classList.add('类名')和this.classList.remove('类名')来控制动画的显示与隐藏。

转载于:https://juejin.im/post/5c7a515f6fb9a049c043be37