css3动画animation

随着对html5和css3的运用普及， 页面中的简单动画 也随之常见，animation就被常用，我们运用Animation就能创建自己想要的一些动画效果了。

建议: 如果想要制作简单的不细致的动画效果 animation可以首选，比较好的动画，还是使用flash或js/jquery比较好。

 一、Keyframes 关键帧  

   在开始介绍Animation之前我们有必要先来了解一下"Keyframes",叫做“关键帧”。 @keyframes开头，后面紧接着是这个“动画的名称”加上一对花括号"{}"

  使用@keyframes规则，你可以创建动画。 创建动画是通过逐步改变从一个CSS样式设定到另一个。

    在动画过程中，您可以更改CSS样式的设定多次。

     指定的变化时发生时使用％，或关键字"from"和"to"，与0％到100％相同。
     0％是开头动画，100％是当动画完成（中间可以在多次定义）。

    写法 @keyframes  定义的名称{

           0%(from){定义的样式，其他}

         100%(to){定义的样式，其他}

    }

   兼容：  @ -浏览器号-keyframes  定义的名称{

           0%(from){定义的样式，其他}

         100%(to){定义的样式，其他}

    }

egg:   @keyframes moves{

         0% {background-position: 0 0;}
         50% {background-position: -180px 0;}
         100% {background-position: 0 0;}

}

二、animation的动画属性

 （1）animation-name   规定需要绑定到选择器的 keyframe 名称
 （2）animation-duration  规定完成动画所花费的时间，以秒或毫秒计
 （3）animation-timing-function 规定动画的速度曲线。如linear直线。
 （4）animation-delay 规定在动画开始之前的延迟。
 （5）animation-iteration-count 规定动画应该播放的次数。 加入infinite关键字，可以让动画无限次播放。
 （6）animation-direction 规定是否应该轮流反向播放动画，
 （7）animation-fill-mode 动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用其属性令其为forwards。
 （8）animation-play-state:  如果鼠标移走，色块立刻回到动画开始状态。如果想让动画保持突然终止时的状态，则该属性值为paused 设置动画当前状态,默认是 running ,为执行状态,可以设置为 paused 为暂停

egg:   .demo{
     　　width: 50px;
     　　height: 50px;
     　　background: blue;
    　　 -webkit-animation-name:'moves';/*动画属性名，也就是我们前面keyframes定义的动画名*/
     　　-webkit-animation-duration: 10s;/*动画持续时间*/
     　　-webkit-animation-timing-function: ease-in; /*动画频率*/
    　　 -webkit-animation-delay: 2s;/*动画延迟时间*/
    　　 -webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/
    　　 -webkit-animation-direction: alternate;/*定义动画方式*/
  }

为了方便可以简写 规格如下:

    animation: name  duration  timing-function  delay  iteration-count  direction  play-state  fill-mode;

    egg: animation: moves 10s ease-in 2s 10 alternate 

三、animation各属性讲解

   (1)animation-name 属性为 @keyframes 动画指定名称

      语法： animation-name: keyframename|none;

      

    egg:    animation-name:mymove;

               -webkit-animation-name:mymove;

   (2)animation-duration 设置对象动画的播放持续时间    值单位可以是秒（s）或毫秒（ms）

      语法： animation-duration: time;

       

 （3）animation-timing-function 规定动画的速度曲线 （动画播放时的运动方式）

       animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：

    语法：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<num1>, <num2>, <num3>, <num4>)

    

  egg:  自定义     .demo { animation-function: cubic-bezier(0.25,0.1,0.25,1);/*自定义的贝塞尔曲线*/ }

   （4）animation-delay 规定在动画开始之前的延迟（几秒后开始执行动画）。

      语法：animation-delay: time;

       

    egg:   .demo {

                 animation-delay:2s;/*动画将于2s后执行*/

            }

     （5）animation-iteration-count 规定动画应该播放的次数。 加入infinite关键字，可以让动画无限次播放。

        语法： animation-iteration-count: n | infinite

         

    （6）animation-direction 规定是否应该轮流反向播放动画，

           注意：如果动画被设置为只播放一次，该属性将不起作用

       语法：animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

        

     （7）animation-fill-mode 动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用其属性令其为forwards。

        语法：animation-fill-mode: none | forwards | backwards | both

         

    （8）animation-play-state: 用来控制元素动画的播放状态

        语法：animation-play-state: paused | running（默认）

        

 

下面给看几个做的demo: --简单粗糙

  1、人物图片 走动效果(一个走动，一个跳跃，一个高尔夫挥球)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎访问 http://www.cnblogs.com/wuchuanlong/</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" >

<style>  
/*move_img.png上面有 几个小图  它的移动位置是100除以几 约等（=）差%，后面的移动位置即加差(间隔距离要一样) 知道总和100% 一个循环*/  
body{  font-family: "Microsoft YaHei"; background-color:#9BD2FF }
.elepent_mid{ margin:0 auto; width:580px; position:relative;}
.move_go{ 
   background:url(move_01.png) no-repeat; width:180px; height: 300px; position:absolute; 
    border:1px solid red; 
   animation:chan_run 1s step-start infinite;
   -moz-animation:chan_run 1s step_start infinite;
   -webkit-animation:chan_run 1s step_start infinite;
 }
 @keyframes chan_run{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
  }
  @-moz-keyframes chan_run{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
  }
  @-webket-keyframes chan_run{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
  }
  
 /*第二个原地移动*/
 .secd_yidong{ 
   background:url(pepel_02.png) no-repeat; height:319px; width:150px; position:absolute; top:320px;
   animation:move_two 3s step-start infinite;
   -moz-animation:move_two 3s step-start infinite;
   -webkit-animation:move_two 3s step-start infinite;
  }
  @keyframes move_two{
    0%{ background-position:0 0;}
    25%{ background-position:-150px 0}
    50%{ background-position:-300px 0}
    75%{ background-position:-450px 0}
    100%{ background-position:0 0}
  }
  @-webkit-keyframes move_two{
    0%{ background-position:0 0;}
    25%{ background-position:-150px 0}
    50%{ background-position:-300px 0}
    75%{ background-position:-450px 0}
    100%{ background-position:0px 0}
  }
   @-moz-keyframes move_two{
    0%{ background-position:0 0;}
    25%{ background-position:-150px 0}
    50%{ background-position:-300px 0}
    75%{ background-position:-450px 0}
    100%{ background-position:0px 0}
  }
  
   /*第三个原地移动*/
 .third_03{ 
  background:url(jump_03.png) no-repeat; height:131px; width:61px; position:absolute; top:320px; left:240px; right:0; bottom:0;
   animation:move_03 1s step-start infinite; overflow:hidden;
   -moz-animation:move_03 1s step-start infinite;
   -webkit-animation:move_03 1s step-start infinite;
  }
  @keyframes move_03{
    0%{ background-position:65px 0;}
    11.1%{ background-position:-65px 0}
    22.2%{ background-position:-130px 0}
    33.3%{ background-position:-195px 0}
    44.4%{ background-position:-270px 0}
    55.5%{ background-position:-335px 0;}
    66.6%{ background-position:-400px 0}
    77.7%{ background-position:-465px 0}
    88.8%{ background-position:-530px 0}
    99.9%{ background-position:-595px 0}
    100%{ background-position:0 0}
  }
   @-moz-keyframes move_03{
    0%{ background-position:0 0;}
    11.1%{ background-position:-65px 0}
    22.2%{ background-position:-130px 0}
    33.3%{ background-position:-195px 0}
    44.4%{ background-position:-270px 0}
    55.5%{ background-position:-335px 0;}
    66.6%{ background-position:-400px 0}
    77.7%{ background-position:-465px 0}
    88.8%{ background-position:-530px 0}
    99.9%{ background-position:-595px 0}
    100%{ background-position:0 0}
  }
   @-webkit-keyframes move_03{
    0%{ background-position:0 0;}
    11.1%{ background-position:-65px 0}
    22.2%{ background-position:-130px 0}
    33.3%{ background-position:-195px 0}
    44.4%{ background-position:-270px 0}
    55.5%{ background-position:-335px 0;}
    66.6%{ background-position:-400px 0}
    77.7%{ background-position:-465px 0}
    88.8%{ background-position:-530px 0}
    99.9%{ background-position:-595px 0}
    100%{ background-position:0 0}
  }
</style>
</head>
<body>
 <div class="elepent_mid">
  <!--第一个-->
   <div class="move_go"></div>
  <!--第二个移动-->
  <div class="secd_yidong"></div>
  <!--第三个移动-->
  <div class="third_03"></div>
 </div>
</body>
</html>
View Code

 

 

2、360度 一直旋转 鼠标悬停放大

 

 1  .animation{ width:150px; height:145px; position:relative; margin:0 auto; transition:all 0.5s linear}
 2  .animation p{ background:url(d_03.png) no-repeat; width:150px; height:145px; cursor:pointer; animation:anita 2s linear 1s infinite; -webkit-animation:anita 2s linear 1s infinite}
 3  .animation span{ display:block; text-align:center; position:absolute; left:0%; right:0; top:38%; bottom:0; margin:auto}
 4  .animation:hover{ color:red; transform:rotate(360deg) scale(1.2)}
 5  @keyframes anita{
 6     0%{ transform:rotate(0deg);}
 7     100%{transform:rotate(360deg);}
 8   }
 9   @-webkit-keyframes anita{
10     0%{ transform:rotate(0deg)}     
11     100%{ transform:rotate(360deg)}     
12   }
13 <!--animation 动画-->
14   <div class="animation">
15     <p></p>
16     <span>animation<Br />动画</span>
17   </div>
View Code

 

3、类似 ---移动的星星

 1  /*移动的星星 animation*/
 2  @keyframes star_yidong{
 3    0 %{ background-position:0% 0%; background-color:#fff;}
 4    50 %{ background-position:50% 0%; background-color:#CCC;}
 5    100%{ background-position:100% 0%; background-color:#000;}     
 6  }
 7 @-webkit-keyframes star_yidong{
 8    0 %{ background-position:0% 0%; background-color:#fff;}
 9    50 %{ background-position:50% 0%; background-color:#CCC;}
10    100%{ background-position:100% 0%; background-color:#000;}     
11  }
12  @-moz-keyframes star_yidong{
13    0 %{ background-position:0% 0%; background-color:#fff;}
14    50 %{ background-position:50% 0%; background-color:#CCC;}
15    100%{ background-position:100% 0%; background-color:#000;}     
16  }
17  @-o-keyframes star_yidong{
18    0 %{ background-position:0% 0%; background-color:#fff;}
19    50 %{ background-position:50% 0%; background-color:#CCC;}
20    100%{ background-position:100% 0%; background-color:#000;}     
21   }
22 .move_star{ position:relative; width:100%; height:600px; margin:0 auto; margin-top:20px}
23 .star_01{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto}
24  #xing01{ 
25   background:url(img/background.png) repeat;  z-index:4;
26   animation:star_yidong 60s linear infinite; 
27   -webkit-animation:star_yidong 60s linear infinite;
28   -moz-animation:star_yidong 60s linear infinite;
29   -o-animation:star_yidong 60s linear infinite;
30  }
31  #xing02{ 
32   background:url(img/foreground.png) repeat; z-index:4; 
33   animation:star_yidong 80s linear infinite; 
34   -webkit-animation:star_yidong 80s linear infinite;
35   -moz-animation:star_yidong 80s linear infinite;
36   -o-animation:star_yidong 80s linear infinite;
37  }
38  #xing03{
39     background:url(img/midground.png) repeat; z-index:4;
40     animaition:star_yidong 100s ease-in infinite;
41     -webkit-animation:star_yidong 100s ease-in infinite;
42     -moz-animation:star_yidong 100s ease-in infinite;
43     -o-animation:star_yidong 100s ease-in infinite;
44  }
45 /*闪动的星星*/
46  #xing04{
47     background:url(img/stars.png) repeat; z-index:4;
48  }
49  #xing05{
50      background:url(img/twinkling.png) repeat; z-index:4;
51      animaition:move-twink-back 200s linear infinite;
52     -webkit-animation:move-twink-back 200s linear infinite;
53     -moz-animation:move-twink-back 200s linear infinite;
54     -o-animation:move-twink-back 200s linear infinite;
55   }
56   @keyframes move-twink-back {
57     from {background-position:0 0;}
58     to {background-position:1000px 5000px;}
59 }
60 @-webkit-keyframes move-twink-back {
61     from {background-position:0 0;}
62     to {background-position:1000px 5000px;}
63 }
64 @-moz-keyframes move-twink-back {
65     from {background-position:0 0;}
66     to {background-position:1000px 5000px;}
67 }
68 <!--移动的星星-->
69   <div class="move_star">
70     <div id="xing01" class="star_01"></div>
71     <div id="xing02" class="star_01"></div>
72     <div id="xing03" class="star_01"></div>
73     <!--闪动的星星-->
74     <div id="xing04" class="star_01"></div>
75     <div id="xing05" class="star_01"></div>
76   </div>
View Code

 

 

学无止境，乐在其中

css参考手册：http://www.css88.com/book/css/properties/animation/animation.htm

属性借鉴来源： http://www.runoob.com/cssref/css3-pr-animation.html    

 

posted @ 2016-10-28 09:55  danran68  阅读(847)  评论(0)  编辑  收藏  举报
Copyright ©2016 淡然一笑