简单CSS3动画

在css3中有自带的动画效果，在api中有 @keyframes 规则声明css3动画，但是由于浏览器兼容问题，css3本身自带的动画需要考虑兼容问题。

 

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

 

我们声明 @keyframes 规则：

@keyframes myAnimation { /*声明@keyframes  @keyframes + 方法名 */
    0% {
        /* 旋转 */
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(600px) rotateY(90deg);
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-20deg);    
        transform: perspective(600px) rotateY(-15deg);
    }
    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(600px) rotateY(10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(600px) rotateY(-5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(600px);
    }
} 

然后我们能在APi中看到使用的方法：

 

然后在你的css样式里面调用这个方法：

---

.content-div {
    background: #fff;
    border: 1px solid #ccc;
    padding: 30px 12px 0px 12px;
    border-radius: 6px;
    box-sizing: border-box;
    animation: mylogin 1s ease both;
}

你就能看到基本的css动画了。