[分享]css3怎么实现动画？

CSS3可以让网站更加生动有趣，其中最重要的功能就在于它的动画特效。下面就让我来介绍一下CSS3动画实现的具体方法： /下面是简单的CSS样式代码/ .box { width: 100px; heig...

CSS3可以让网站更加生动有趣，其中最重要的功能就在于它的动画特效。下面就让我来介绍一下CSS3动画实现的具体方法：

 /*下面是简单的CSS样式代码*/
    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        animation: myFirstAnimation 2s linear infinite;
    }
    @keyframes myFirstAnimation {
        0% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(50px);
        }
        100% {
            transform: translateX(0);
        }
    } 

上述代码中，.box是一个div元素，其CSS3动画实现可以分为两个部分。首先，.box元素通过animation属性来引用myFirstAnimation动画，动画时长为2秒，效果为线性无限循环。其次，myFirstAnimation动画是通过@keyframes规则来定义的。

在@keyframes规则中，定义了多个状态关键帧。在这个例子中，myFirstAnimation定义了3个关键帧。在初始状态0%，.box元素不做任何位置变化；到达50%关键帧时，.box元素向右调整50px；最后在到达100%关键帧时，.box元素退回至原本的位置。

这样，当当前状态达到100%时，CSS3动画会重新从0%开始，无限循环。这是CSS3动画最基本的实现方式，还有更多不同的动画效果等待你的探索!