请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

切换风格 注册 找回密码

html5源码-html5教程网


查看: 2014|回复: 15

css3动画animation

[复制链接]

4

主题

0

听众

46

积分

新手上路

Rank: 1

贡献
0
金钱
2
发表于 2016-10-29 00:20:49 |显示全部楼层
随着对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、人物图片 走动效果(一个走动,一个跳跃,一个高尔夫挥球)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>欢迎访问 http://www.cnblogs.com/wuchuanlong/</title>
  6. <link rel="icon" type="image/x-icon" href="images/favicon.ico" >

  7. <style>  
  8. /*move_img.png上面有 几个小图  它的移动位置是100除以几 约等(=)差%,后面的移动位置即加差(间隔距离要一样) 知道总和100% 一个循环*/  
  9. body{  font-family: "Microsoft YaHei"; background-color:#9BD2FF }
  10. .elepent_mid{ margin:0 auto; width:580px; position:relative;}
  11. .move_go{
  12.    background:url(move_01.png) no-repeat; width:180px; height: 300px; position:absolute;
  13.     border:1px solid red;
  14.    animation:chan_run 1s step-start infinite;
  15.    -moz-animation:chan_run 1s step_start infinite;
  16.    -webkit-animation:chan_run 1s step_start infinite;
  17. }
  18. @keyframes chan_run{
  19.     0% {background-position: 0 0;}
  20.     14.3% {background-position: -180px 0;}
  21.     28.6% {background-position: -360px 0;}
  22.     42.9% {background-position: -540px 0;}
  23.     57.2% {background-position: -720px 0;}
  24.     71.5% {background-position: -900px 0;}
  25.     85.8% {background-position: -1080px 0;}
  26.     100% {background-position: 0 0;}
  27.   }
  28.   @-moz-keyframes chan_run{
  29.     0% {background-position: 0 0;}
  30.     14.3% {background-position: -180px 0;}
  31.     28.6% {background-position: -360px 0;}
  32.     42.9% {background-position: -540px 0;}
  33.     57.2% {background-position: -720px 0;}
  34.     71.5% {background-position: -900px 0;}
  35.     85.8% {background-position: -1080px 0;}
  36.     100% {background-position: 0 0;}
  37.   }
  38.   @-webket-keyframes chan_run{
  39.     0% {background-position: 0 0;}
  40.     14.3% {background-position: -180px 0;}
  41.     28.6% {background-position: -360px 0;}
  42.     42.9% {background-position: -540px 0;}
  43.     57.2% {background-position: -720px 0;}
  44.     71.5% {background-position: -900px 0;}
  45.     85.8% {background-position: -1080px 0;}
  46.     100% {background-position: 0 0;}
  47.   }
  48.   
  49. /*第二个原地移动*/
  50. .secd_yidong{
  51.    background:url(pepel_02.png) no-repeat; height:319px; width:150px; position:absolute; top:320px;
  52.    animation:move_two 3s step-start infinite;
  53.    -moz-animation:move_two 3s step-start infinite;
  54.    -webkit-animation:move_two 3s step-start infinite;
  55.   }
  56.   @keyframes move_two{
  57.     0%{ background-position:0 0;}
  58.     25%{ background-position:-150px 0}
  59.     50%{ background-position:-300px 0}
  60.     75%{ background-position:-450px 0}
  61.     100%{ background-position:0 0}
  62.   }
  63.   @-webkit-keyframes move_two{
  64.     0%{ background-position:0 0;}
  65.     25%{ background-position:-150px 0}
  66.     50%{ background-position:-300px 0}
  67.     75%{ background-position:-450px 0}
  68.     100%{ background-position:0px 0}
  69.   }
  70.    @-moz-keyframes move_two{
  71.     0%{ background-position:0 0;}
  72.     25%{ background-position:-150px 0}
  73.     50%{ background-position:-300px 0}
  74.     75%{ background-position:-450px 0}
  75.     100%{ background-position:0px 0}
  76.   }
  77.   
  78.    /*第三个原地移动*/
  79. .third_03{
  80.   background:url(jump_03.png) no-repeat; height:131px; width:61px; position:absolute; top:320px; left:240px; right:0; bottom:0;
  81.    animation:move_03 1s step-start infinite; overflow:hidden;
  82.    -moz-animation:move_03 1s step-start infinite;
  83.    -webkit-animation:move_03 1s step-start infinite;
  84.   }
  85.   @keyframes move_03{
  86.     0%{ background-position:65px 0;}
  87.     11.1%{ background-position:-65px 0}
  88.     22.2%{ background-position:-130px 0}
  89.     33.3%{ background-position:-195px 0}
  90.     44.4%{ background-position:-270px 0}
  91.     55.5%{ background-position:-335px 0;}
  92.     66.6%{ background-position:-400px 0}
  93.     77.7%{ background-position:-465px 0}
  94.     88.8%{ background-position:-530px 0}
  95.     99.9%{ background-position:-595px 0}
  96.     100%{ background-position:0 0}
  97.   }
  98.    @-moz-keyframes move_03{
  99.     0%{ background-position:0 0;}
  100.     11.1%{ background-position:-65px 0}
  101.     22.2%{ background-position:-130px 0}
  102.     33.3%{ background-position:-195px 0}
  103.     44.4%{ background-position:-270px 0}
  104.     55.5%{ background-position:-335px 0;}
  105.     66.6%{ background-position:-400px 0}
  106.     77.7%{ background-position:-465px 0}
  107.     88.8%{ background-position:-530px 0}
  108.     99.9%{ background-position:-595px 0}
  109.     100%{ background-position:0 0}
  110.   }
  111.    @-webkit-keyframes move_03{
  112.     0%{ background-position:0 0;}
  113.     11.1%{ background-position:-65px 0}
  114.     22.2%{ background-position:-130px 0}
  115.     33.3%{ background-position:-195px 0}
  116.     44.4%{ background-position:-270px 0}
  117.     55.5%{ background-position:-335px 0;}
  118.     66.6%{ background-position:-400px 0}
  119.     77.7%{ background-position:-465px 0}
  120.     88.8%{ background-position:-530px 0}
  121.     99.9%{ background-position:-595px 0}
  122.     100%{ background-position:0 0}
  123.   }
  124. </style>
  125. </head>
  126. <body>
  127. <div class="elepent_mid">
  128.   <!--第一个-->
  129.    <div class="move_go"></div>
  130.   <!--第二个移动-->
  131.   <div class="secd_yidong"></div>
  132.   <!--第三个移动-->
  133.   <div class="third_03"></div>
  134. </div>
  135. </body>
  136. </html>
复制代码

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
  17. 动画</span>
  18.   </div>
复制代码
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>
复制代码
学无止境,乐在其中

4

主题

0

听众

46

积分

新手上路

Rank: 1

贡献
0
金钱
2
发表于 2016-10-29 01:00:48 |显示全部楼层
楼下的接上
回复

使用道具 举报

0

主题

0

听众

10

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-8 15:35:27 |显示全部楼层
不错哦 真 的很实用
回复

使用道具 举报

0

主题

0

听众

42

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-9 18:05:23 |显示全部楼层
垃圾内容,路过为证。
回复

使用道具 举报

0

主题

0

听众

20

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-9 18:08:54 |显示全部楼层
支持,赞一个
回复

使用道具 举报

0

主题

0

听众

19

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-9 18:10:49 |显示全部楼层
啊啊啊啊啊啊啊啊啊啊啊
回复

使用道具 举报

0

主题

0

听众

33

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-9 18:15:12 |显示全部楼层
为毛老子总也抢不到沙发?!!
回复

使用道具 举报

0

主题

0

听众

42

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-9 18:16:01 |显示全部楼层
什么東西來的,不過還是要頂
回复

使用道具 举报

0

主题

0

听众

7

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-9 18:16:25 |显示全部楼层
好工具,都用的着,支持楼主
回复

使用道具 举报

0

主题

0

听众

21

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-9 18:33:10 |显示全部楼层
非常好,顶一下
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆



Archiver|手机版|     

HTML5教程网 Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部