css3的自定义动画效果

CSS3在网页设计中提供了非常丰富的动画效果，这些效果的实现都非常简单，而且非常容易定制。本文将介绍CSS3自定义动画效果的实现方法。

使用CSS3自定义动画效果有两种方式，一种是使用@keyframes规则定义关键帧，另一种是使用transition属性。下面分别介绍这两种方法的实现。

@keyframes pulse {
    from {
        transform: scale3d(1,1,1);
    }

    50% {
        transform: scale3d(1.05,1.05,1.05);
    }

    to {
        transform: scale3d(1,1);
    }
}

上述代码定义了一个名为pulse的动画效果，从原始状态到50%时进行缩放，再从50%到最终状态反缩放回原始状态。可以通过CSS选择器为元素绑定动画效果：

.my-element {
    animation: pulse 1s infinite;
}

上述代码将定义的动画效果绑定至class为my-element的元素中，并设置动画效果执行1秒，无限循环。

.my-element {
    transition: transform 1s;
}

.my-element:hover {
    transform: scale(1.05);
}

上述代码定义了一个transition属性，当元素发生transform属性变化时，动画效果执行1秒。当鼠标悬浮在元素上时，将元素进行缩放1.05。

CSS3的自定义动画效果提供了非常灵活的动画效果设计，同时也非常容易让设计者定制个性化的动画风格。