[分享]css3放大动画特效代码

CSS3放大动画特效常常被运用于网页设计中，可以让页面看起来更加生动、醒目。接下来，我们就来分享一些CSS3放大动画特效的代码。/ 放大动画1 / .animatescale { webkitanim...

CSS3放大动画特效常常被运用于网页设计中，可以让页面看起来更加生动、醒目。接下来，我们就来分享一些CSS3放大动画特效的代码。

/* 放大动画1 */
.animate-scale {
    -webkit-animation: scale 0.5s ease-in-out forwards;
    animation: scale 0.5s ease-in-out forwards;
}

@-webkit-keyframes scale {
    0% {
        transform: scale(1);
    }
    
    100% {
        transform: scale(1.2);
    }
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    
    100% {
        transform: scale(1.2);
    }
} 

以上代码可以实现一个简单的放大动画效果，将元素从原始大小(scale(1))放大到原始大小的1.2倍(scale(1.2))，时间为0.5秒。

/* 放大动画2 */
.animate-zoom {
    -webkit-animation: zoom 1s ease-in-out infinite alternate;
    animation: zoom 1s ease-in-out infinite alternate;
}

@-webkit-keyframes zoom {
    0% {
        transform: scale(1);
    }
    
    100% {
        transform: scale(1.1);
    }
}

@keyframes zoom {
    0% {
        transform: scale(1);
    }
    
    100% {
        transform: scale(1.1);
    }
} 

以上代码可以实现一个永久循环的放大动画效果，将元素从原始大小(scale(1))放大到原始大小的1.1倍(scale(1.1))，时间为1秒，并以交替方向执行。

/* 放大动画3 */
.animate-bounce {
    -webkit-animation: bounce 1s linear infinite;
    animation: bounce 1s linear infinite;
}

@-webkit-keyframes bounce {
    0% {
        transform: scale(1);
    }
    
    50% {
        transform: scale(1.2);
    }
    
    100% {
        transform: scale(1);
    }
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }
    
    50% {
        transform: scale(1.2);
    }
    
    100% {
        transform: scale(1);
    }
} 

以上代码可以实现一个反复弹跳的放大动画效果，将元素从原始大小(scale(1))放大到原始大小的1.2倍(scale(1.2))，再从1.2倍缩小回原始大小(scale(1))，时间为1秒，并以线性执行。