css3动画animation

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

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

金沙官网线上 1

 一、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;

       金沙官网线上 2

    egg:   animation-name:mymove;

               -webkit-animation-name:mymove;

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

**      语法: animation-duration: **time;

**        金沙官网线上 3


 (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>)

     金沙官网线上 4

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

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

      语法:animation-delay: time;

        金沙官网线上 5

    egg:   .demo {

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

            }

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

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

          金沙官网线上 6

    (6)animation-direction 规定是否应该轮流反向播放动画

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

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

         金沙官网线上 7

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

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

          金沙官网线上 8

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

        语法:animation-play-state: paused | running(默认)

         金沙官网线上 9

 

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

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

金沙官网线上 10金沙官网线上 11

<!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

 金沙官网线上 12

 

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

 金沙官网线上 13

金沙官网线上 14金沙官网线上 15

 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     animation<Br />动画
17   </div>

View Code

 金沙官网线上 16

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

金沙官网线上 17金沙官网线上 18

 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

 

 

金沙官网线上 19

学无止境,乐在其中

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

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

 

本文由金沙官网线上发布于Web前端,转载请注明出处:css3动画animation

您可能还会对下面的文章感兴趣: