Css3 3d animation Step1-怎么实现css动画-HTML教程-爱易网页

Css3 3d animation Step1-怎么实现css动画

日期：2014-05-17　浏览次数：20627 次

Css3 3d animation Step1---如何实现css动画

前言：

好久没写文章了，今天看到webQQ又一次升级。我用的chrome的画面切换甚至用到了css 3d animation+3dtransform。

本系列文章用于介绍如何仅用css实现3d动画，这是本系列的第一篇文章，仅仅只介绍了动画。也许这篇文章也许过于超前，因为大部分的浏览器器，甚至包括FF，都还没有实现3d transform。涉及到animation的部分，你可以通过webkit内核的浏览器(Chrome or Safari)或者Firefox来浏览，但是涉及到3d transform的东西请用webkit的浏览器器浏览。

Css3 @KeyFrames Rule

什么是KeyFrames？直译过来就是关键帧。你可以把他理解为flash中的关键帧。他以关键字from开始，to结束。中间的部分都为百分比。意为动画到了某个百分比时，他的状态。而帧与帧之间的补间动画浏览器会帮你自动生成。

例如：

<style type="text/css">  
      
    @keyframes myfirst {  
        from {background: red;}  
        to {background: yellow;}  
    }  
  
    @-moz-keyframes myfirst /* Firefox */ {  
        from {background: red;}  
        to {background: yellow;}  
    }  
  
    @-webkit-keyframes myfirst /* Safari and Chrome */ {  
        from {background: red;}  
        to {background: yellow;}  
    }  
      
</style>

?为了支持将来可能有的标准，你不得不写3遍。

试着运行下面的代码，里面可能会有你没见过的属性，我们下面会讲到

?大家等待了两秒后，突然从画面左上角出现一个方块，花费5秒从红色变到黄色。可能大家已经猜到了

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
  
  
<style type="text/css">  
      
    @keyframes myfirst {  
        from {background: red;}  
        to {background: yellow;}  
    }  
  
    @-moz-keyframes myfirst /* Firefox */ {  
        from {background: red;}  
        to {background: yellow;}  
    }  
  
    @-webkit-keyframes myfirst /* Safari and Chrome */ {  
        from {background: red;}  
        to {background: yellow;}  
    }  
      
    #sample {  
        animation-name: myfirst;  
        animation-duration: 5s;  
        animation-timing-function: linear;  
        animation-delay: 2s;  
        animation-iteration-count: infinite;  
        animation-direction: alternate;  
        animation-play-state: running;  
        /* Firefox: */  
        -moz-animation-name: myfirst;  
        -moz-animation-duration: 5s;  
        -moz-animation-timing-function: linear;  
        -moz-animation-delay: 2s;  
        -moz-animation-iteration-count: infinite;  
        -moz-animation-direction: alternate;  
        -moz-animation-play-state: running;  
        /* Safari and Chrome: */  
        -webkit-animation-name: myfirst;  
        -webkit-animation-duration: 5s;  
        -webkit-animation-timing-function: linear;  
        -webkit-animation-delay: 2s;  
        -webkit-animation-iteration-count: infinite;  
        -webkit-animation-direction: alternate;

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Css3 3d animation Step1-怎么实现css动画

相关资料更多>

推荐阅读更多>