css3实现动画的三种方式

1. 使用transition属性实现简单动画

使用CSS3的transition属性可以实现元素在指定的时间内由一种样式过渡到另一种样式，从而实现动画效果。transition属性接受多个属性值，包括过渡的属性、过渡的持续时间、过渡的延迟时间和过渡的动画函数。

transition-property：指定需要过渡的CSS属性，例如：width、height、background-color等。

transition-duration：指定过渡持续的时间。

transition-timing-function：指定过渡的动画函数，常见的有ease、linear、ease-in、ease-out等。

transition-delay：指定过渡的延迟时间。

示例代码：

    .box{
        width: 100px;
        height: 100px;
        background-color: blue;
        transition-property: background-color;
        transition-duration: 1s;
        transition-timing-function: ease;
        transition-delay: 0.5s;
    }
    .box:hover{
        background-color: red;
    }

上述代码中，鼠标悬停在.box元素上时，元素的背景色会从蓝色过渡到红色，过渡效果持续1s，延迟0.5s启动，过渡的动画函数是ease。

2. 使用@keyframes规则实现复杂动画

使用CSS3的@keyframes规则可以定义多个关键帧，从而实现复杂的动画效果。@keyframes规则中可以定义多个百分比值，每个百分比值对应一个关键帧，通过关键帧的属性值来实现动画效果。

定义关键帧：

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

上述代码中定义了一个名为myAnimation的关键帧动画，其中0%对应初始状态，50%对应中间状态，100%对应结束状态。

应用关键帧：

    .box{
        width: 100px;
        height: 100px;
        background-color: blue;
        animation-name: myAnimation;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

上述代码中，.box元素应用了名为myAnimation的关键帧动画，动画持续2s，动画函数是ease-in-out，延迟1s启动，动画重复次数无限循环，动画方向为交替。

3. 使用animation属性结合transform属性实现立体动画

CSS3的animation属性和transform属性可以结合使用，实现立体的动画效果。transform属性可以对元素进行旋转、放大缩小、平移和倾斜等操作，结合animation属性可以实现立体的动画效果。

示例代码：

    .box{
        width: 100px;
        height: 100px;
        background-color: blue;
        animation: rotateAndScale 2s infinite alternate;
        transform-origin: center center;
    }
    @keyframes rotateAndScale{
        0%{
            transform: rotate(0deg) scale(1);
        }
        50%{
            transform: rotate(180deg) scale(1.5);
        }
        100%{
            transform: rotate(360deg) scale(1);
        }
    }

上述代码中，.box元素应用了名为rotateAndScale的关键帧动画，持续2s，无限循环，动画方向为交替。关键帧动画中，0%对应初始状态，50%对应中间状态，100%对应结束状态。通过rotate属性实现元素的旋转，scale属性实现元素的缩放。

总结

CSS3提供了多种方式实现动画效果，包括使用transition属性实现简单动画、使用@keyframes规则实现复杂动画以及使用animation属性结合transform属性实现立体动画。根据具体需求和设计要求，可以选择合适的方式来实现动画效果。使用这些动画方式，可以提升网页的用户体验，使页面更加生动有趣。