css叁中变形与动画片

By admin in 4858美高梅 on 2019年4月12日

成效:通过给成分添加animation属性,可以赋予该成分动画作用。

animation

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

css三中变形与动画(三),css三变形动画

transform能够兑现矩阵变换,transition达成属性的平缓对接,animation意思是动画片,动漫,那性格情才和真正含义的1帧1帧的动画相关。本文就介绍animation属性。

animation属性通过有个别器重帧兰月素属性的更动来兑现动画效果。当然也足以操纵动画持续时间,动画迭代次数等。

乘胜对html伍和css三的使用普及, 页面中的简单动画
也随着常见,animation就被常用,大家使用Animation就能创制和谐想要的有的动画片效果了。

<!DOCTYPE
html>
<html>
   
<head>
       
<style> 
         
div{width:100px;height:100px;background:red;animation:my 5s;}
          @keyframes
my
         {
             
0%{background:red;width:100px;}
             
100%{background:blue;width:200px;}
         }
       
</style>
   
</head>
   
<body>
       
<div></div>
   
</body>
</html>

一. animation-name

为 @keyframes 动画钦命2个称号

ie10以上

div{
     width:100px;
     height:100px;
     position:relative;
     animation-name:mymove;
     animation-duration:5s;
     /* Safari and Chrome */
     -webkit-animation-name:mymove;
     -webkit-animation-duration:5s;
  }

  @keyframes mymove{
        from { left : 0px; }
        to{left : 200px;}
    }

    @-weblit-keyframes mymove{
          from {left : 0px}
          to{left : 0px}
      }

一、例子

在介绍transition时开篇有2个例子正是贯彻鼠标放上去,div宽度从100px缓慢增大到200px。

用transition完成格局如下

div:hover{
    width: 200px;
    transition:width 5s ease-in;
}

用animation也能促成类似意义,如下:

<style type="text/css">
div {
    width: 100px;
    height: 100px;
    background-color: red;
}
@keyframes enlarge {
    0% {
        width: 100px;
    }
    50% {
        width: 150px;
    }
    100% {
        width: 200px;
    }
}
div:hover {
    /*width: 200px;    */   
    /*transition:width 5s ease-in;*/
    animation: 5s enlarge;
}
}
</style>
<div></div>

鼠标悬停,动画持续五s,在时光到二分一时div的宽窄要从十0px达到150px,5s时div宽度达到200px,动画结束。

但是transition和animation效果依然有距离的,鼠标hover上去,transition动画执行完后width保持200px;animation动画执行完后width回到100px。

4858美高梅 1

自然那只是私下认可效果,那些动画达成时的成效也是可以修改的。

修改上边代码中animation为

animation: 5s enlarge forwards;

就足以让动画执行完后停在结尾一帧。那一个forwards是animation-fill-mode的值,前边会详细讲。

通过那个事例只是想说,能够明白为transition是animation的简化版,animation能够做更多的操纵,也越来越强有力。下边正式开班介绍。

建议: 要是想要制作不难的不密切的卡通片效果
animation能够首要选取,相比好的动画片,依然使用flash或js/jquery比较好。

最常用的两种属性有以下二种:

css叁中变形与动画片。二. animation-duration

animation-duration属性定义动画完结多个周期供给某个秒或纳秒。

animation-duration: time;

二、keyframes

keyframes意思是“关键帧”,在事关心器重大帧会改变成分属性的总结值。

keyframes语法:

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
keyframes-blocks: [ keyframe-selectors block ]* ;
keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

综述写法:

 @keyframes IDENT {
     from {
       Properties:Properties value;
     }
     Percentage {
       Properties:Properties value;
     }
     to {
       Properties:Properties value;
     }
   }
   或者全部写成百分比的形式:
   @keyframes IDENT {
      0% {
         Properties:Properties value;
      }
      Percentage {
         Properties:Properties value;
      }
      100% {
         Properties:Properties value;
      }
    }

可知keyframes写法是那般的:由”@keyframes”起先,后边紧跟这些“动画的称号”加上一对花括号“{}”,括号中是1对见仁见智时间段的体制规则,规则写法同css样式。

一个“@keyframes”中的样式规则是由四个百分比构成的,如”0%”到”百分百”之间,能够在多个平整中创建三个比例,分别在每1个百分比中给须求有动画效果的因素加上区别的质量,从而让要素达到壹种持续变动的作用,比如说移动、改变成分颜色、地方、大小、形状等。

几个关键字,”from”和”to”表示一个动画从哪开头,到哪停止,也正是”from”也正是”0%”,而”to”相当于”百分之百”。

Note:0%中的%不可能不难,省略则整个keyframes语法错误,整条规则不行,因为keyframes的单位只接受百分比率。

举例来说:W3C官网的实例,上面介绍animation时会用到那段代码。

 @-webkit-keyframes 'wobble' {
     0% {
        margin-left: 100px;
        background: green;
     }
     40% {
        margin-left: 150px;
        background: orange;
     }
     60% {
        margin-left: 75px;
        background: blue;
     }
     100% {
        margin-left: 100px;
        background: red;
     }
  }

keyframes定义每一帧的卡通片,但只写keyframes是没用的,要求调用才能卓有功能。那怎么调用就用到animation了。

4858美高梅 2

壹、animation-name(动画名称)

三. animation-timing-function

animation-timing-function内定动画将什么成功八个周期。

animation-timing-function: value;

//动画从头到尾的速度是相同的。
#div1 {animation-timing-function: linear;}

//  默认。动画以低速开始,然后加快,在结束前变慢。
//#div2 {-webkit-animation-timing-function: ease;}

//动画以低速开始。
#div3 {animation-timing-function: ease-in;}

//动画以低速结束。
#div4 {animation-timing-function: ease-out;}

//动画以低速开始和结束。
#div5 {-webkit-animation-timing-function: ease-in-out;}

三、animation

animation从未事件触发时,在页面加载后显式的乘机年华变化来改变成分css样式,从而发出动画效果。

要素是何许调用animation和keyframes的吧?

比方:调用上面写好的wobble动画。

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

到此,借使近来看过transition应该早就精通animation也是个复合属性。

animation包括下边属性:
animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-play-state和animation-fill-mode。下边1一介绍,重点精通加粗的天性。

 一、Keyframes 关键帧  

 animation-name属性是必须存在的,因为animation-name的值私下认可是none,未有动画。

四. animation-delay

animation-delay 属性定义动画曾几何时先河。

animation-delay: time;

animation-delay :  2s  /* Opera */
-moz-animation-delay : 2s /* Firefox */
-webkit-animation-delay : 2s /* Safari 和 Chrome */

1、animation-name

animation-name是最根本的了,表示应用哪个帧动画。

语法:

animation-name: none | IDENT[,none | IDENT]*;

暗中认可值:none,即默许情形未有动画效果。

animation-name属性调用@keyframes定义好的卡通片,必须和”@keyframes”定义的卡通片名称完全一致(区分轻重缓急写)。

比喻:animation合作矩阵变换中的平移做一个有趣的小动画。

4858美高梅 3<!DOCTYPE
html> <html> <head> <meta charset=”utf-八”>
<title>变形与动画片</title> <style type=”text/css”>
@keyframes around{ 0% { transform: translateX(0); } 二伍%{ transform:
translateX(180px); } 四分之二{ transform: translate(180px, 180px); } 75%{
transform:translate(0,180px); } 百分之百{ transform: translateY(0); } } div
{ width: 200px; height: 200px; border: 壹px solid red; margin: 20px auto;
} div span { display: inline-block; width: 20px; height: 20px;
background: orange; border-radius: 百分之百; animation-name:around;
animation-duration: 拾s; animation-timing-function: ease;
animation-delay: 一s; animation-iteration-count:infinite; }
</style> </head> <body> <div>
<span></span> </div> </body> </html> View Code

4858美高梅 4

  
在发轫介绍Animation以前大家有供给先来打探一下”Keyframes”,叫做“关键帧”。 @keyframes早先,前边跟着是以此“动画的名号”加上一对花括号”{}”

贰、animation-duration(动画执行贰次所需时日)

五. animation-iteration-count

animation-iteration-count属性定义动画应该播放多少次。

animation-iteration-count: value;

n : 三个数字,定义应该播放多少次动画

infinite : 内定动画应该播放无限次(永远)

2、animation-duration

语法:

animation-duration: <time>[,<time>]*

私下认可值为0,意味着动画时间长度0,即未有动画效果(假若值为负值被视为0)。

animation-duration定义播放动画持续的年华,相当于做到从0%到百分百一遍动画所要求的岁月。单位s。

 
使用@keyframes规则,你能够成立动画。
创造动画是通过慢慢转移从叁个CSS样式设定到另一个。

 animation-duration属性也是必须存在的,因为animation-duration的值暗中认可是0,未有动画。

六. animation-direction

animation-direction 属性定义是或不是循环更替反向播放动画。

注意:假使动画棉被服装置为只播放一遍,该属性将不起功用。

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

normal : 默许值。动画按平日播放。
reverse : 动画反向播放
alternate :
动画在奇数十二遍(一、3、5…)正向播放,在偶数14回(二、肆、陆…)反向播放。

alternate-reverse :
动画在奇数1伍回(1、3、伍…)反向播放,在偶数十次(2、四、陆…)正向播放。

initial : 设置该属性为它的私下认可值

3、animation-timing-function

语法:

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

animation-timing-function属性用来安装动画播放格局。详情可参照css三中变形与动画(2)中的介绍。

    在动画过程中,您能够转移CSS样式的设定多次。

叁、animation-delay(动画在上马前的延迟时间)

七. animation-fill-mode

animation-fill-mode
属性规定当动画不播放时(当动画形成时,或当动画有二个推迟未起首广播时),要利用到成分的样式。

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

none : 私下认可值。动画在动画执行在此以前和今后不会使用任何样式到对象成分。

4858美高梅,forwards : 在动画甘休后(由 animation-iteration-count
决定),动画将使用该属性值。

backwards : 动画将动用在 animation-delay
定义时期开发银行动画的首先次迭代的要害帧中定义的属性值。那几个都以 from
关键帧中的值(当 animation-direction 为 “normal” 或 “alternate” 时)或
to 关键帧中的值(当 animation-direction 为 “reverse” 或
“alternate-reverse” 时)。

both : 动画遵守 forwards 和 backwards
的平整。也等于说,动画会在多个方向上伸张动画属性。

4、animation-delay

语法:

animation-delay:<time>[,<time>]*

animation-delay定义事件触发到动画开头执行的年华,即延时。

    
内定的更动时发出时使用%,或首要字”from”和”to”,与0%到十0%1致。
     0%是初始动画,拾0%是当动画达成(中间能够在再而三定义)。

 animation-delay的值能够是秒(s)大概是皮秒(ms),暗中认可值是0,没有延迟。

八.animation-play-state

animation–play-state属性钦命动画是还是不是正在运维或已暂停。

animation-play-state: paused|running;

paused : 内定暂停动画

running : 钦命正在运转的卡通

5、animation-iteration-count

语法:

animation-iteration-count: infinite | <number> [, infinite | <number>]*

animation-iteration-count属性用来定义动画的广播次数。

暗中同意值为一,即动画从开头到停止只播放贰回。

值为infinite,动画将会Infiniti次广播。

    写法
@keyframes  定义的名号{

4、animation-timing-function(动画以何种运行轨道达成3个周期)

6、animation-direction

语法:

animation-direction:normal | alternate [, normal | alternate]*

animation-direction设置动画播放方向。

属性:

normal:暗中同意值,假诺值为normal时,动画每一回循环都之前进播放。

alternate:奇数十二回播放动画是按梯次播放各帧动画,偶数13回广播动画是按逆序播放各帧动画。

本条alternate照旧很有用的,作者写了四个事例,能够感受一下alternate效应。

事例:div尺寸由小到大,然后由大到小。

4858美高梅 5<style
type=”text/css”> @-webkit-keyframes ‘testAnimationDirection’ { 0% {
width: 50px; } 20% { width: 100px; } 40% { width: 150px; } 60% { width:
200px; } 80% { width: 250px; } 100% { width: 300px; } } div{ width:
50px; height: 50px; border:1px solid red;
-webkit-animation-name:’testAnimationDirection’;
-webkit-animation-duration: 10s; -webkit-animation-timing-function:
ease-in-out; -webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode:backwards; } </style>
<div></div> View
Code

 

          
0%(from){定义的体制,其余}

 
animation-timing-function的值是贝塞尔曲线,暗中认可值是ease,表示动画以低速初阶,然后加快,最终在收尾前变慢。
最常用的值有以下几个:

7、animation-play-state

animation-play-state用来决定成分动画的播放状态。

参数:

running:running是其默许值,成效是接近于音乐播放器一样,能够透过paused将正在播放的卡通片停下来,也得以由此running将中断的动画片重新播放。

Note:

那里的再一次播放不肯定是从成分动画的上马广播,而是从中断的不行地方上马播放。

假如暂停了动画片的广播,成分的体制将回来最原始设置意况。

paused:暂停止播放放。

其一很有用,让动画片在鼠标悬停时暂停,离开时继续播放。

事例:依旧地点的例子,加上边代码即可。

  div:hover{
      animation-play-state:paused;
  }

        
百分百(to){定义的样式,别的}

(一)linear:表示动画从头到尾的快慢都以平等的。

8、animation-fill-mode

animation-fill-mode规定当动画不播放时(当动画形成时,或当动画有3个推迟未伊始广播时),要使用的样式。

有多少个属性值:

none:默认值,动画执行前后不改动成分的其余样式。正是说动画在第二个关键帧播放从前不影响因素,最终3个主要帧播放完后终止影响因素。

forwards:动画达成后呆在最终1帧,正是保证截止时的状态。那里的末段壹帧取决于animation-direction和animation-iteration-count:

4858美高梅 6

backwards:在animation-delay时期动用第3帧。保持animation-delay,第贰帧取法如下:

4858美高梅 7

both:根据animation-direction轮换使用forwards和backwards规则。

Note:forwards和backwards关键字都是有s的。

   
}

(二)ease-in:表示动画以低速起首。

backwards和none的区别

或然地点的例子,只是扩充了animation-fill-mode属性。

<style type="text/css">
 @-webkit-keyframes 'wobble' {
     0% {
        margin-left: 100px;
        background: green;
     }
     40% {
        margin-left: 150px;
        background: orange;
     }
     60% {
        margin-left: 75px;
        background: blue;
     }
     100% {
        margin-left: 100px;
        background: red;
     }
  }
    div{
   width: 50px;
     height: 50px;
     margin-left: 100px;
     background: blue;
     -webkit-animation-name:'wobble';
     -webkit-animation-duration: 10s;
     -webkit-animation-timing-function: ease-in-out; 
     -webkit-animation-delay: 10s;
     -webkit-animation-iteration-count: 10;
     -webkit-animation-direction: alternate;
    /* -webkit-animation-fill-mode:none; /*动画开始为蓝色*/
     -webkit-animation-fill-mode:backwards; /*动画开始为绿色*/
  }
</style>
<div></div>

animation-fill-mode为none,则动画开始延时里边div为青色,backwards则动画开端延时里边div为鲜紫。

   包容: 
@ -浏览器号-keyframes 
定义的称谓{

(三)ease-out:表示动画以低速甘休。

4、相关财富

看网上资料说做动画,尽量选拔相对化定位,从而制止重绘重排难题:

动画片10④规格: 

动画十2尺度:

css叁 animation动画库,有许多基础动画

hover animation动画

css三 animation在线调节工具:

    
基于chrome的插件,能够长足调节页面上的动画

     
腾讯isux一款更强大的卡通工具

   
财付通的帧动画调节工具

参考能源链接:

css3 animation动画技术

跳动心脏

w3c css3-animations

MDN animation-fill-mode

 

正文笔者starof,因知识本人在变更,笔者也在频频学习成才,小说内容也不安时更新,为幸免误导读者,方便追根溯源,请各位转发注脚出处:

 

transform能够达成矩阵变换,transition实现属性的坦荡过渡,animation意思是卡通片,动漫,那些性子才和真…

           0%(from){定义的体裁,别的}

(四)ease-in-out:表示动画以低速初始和竣事。

         百分百(to){定义的体裁,别的}

假若未有想用的值,也能够一向运用三遍贝塞尔函数,使用网址是

    }

5、animation-iteration-count(动画播放次数)

egg:   @keyframes moves{

 animation-iteration-count属性值有二种:

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

(一)直接写数字,自定义想要播放动画的次数。

}

(二)infinite:设置动画有线循环播放。


贰、animation的动画片属性

6、animation-fill-mode(定义成分动画甘休之后要么未先导的要素样式) 

 (一)animation-name  
规定要求绑定到选取器的 keyframe 名称
 (贰)animation-duration  规定完毕动画所消费的时间,以秒或阿秒计
 (三)animation-timing-function 规定动画的快慢曲线。如linear直线。
 (四)animation-delay 规定在动画初叶在此以前的推移。
 (5)animation-iteration-count 规定动画应该播放的次数。
参与infinite关键字,能够让动画Infiniti次广播。
 (陆)animation-direction 规定是还是不是合宜轮流反向播放动画,
 (七)animation-fill-mode
动画截至未来,会应声从结束状态跳回到开始状态。借使想让动画片保持在终止状态,必要选拔其个性令其为forwards。
 (八)animation-play-state: 
假诺鼠标移走,色块立时回去动画开头情形。如若想让动画片保持突然停止时的情形,则该属性值为paused
设置动画当前气象,默许是 running
,为履市价况,能够设置为 paused
为暂停

 暗中同意值为none,标示,不会在动画停止恐怕未先导时给元素添加样式 

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;/*概念动画方式*/
  }

 常用属性值为:

为了便利能够简写 规格如下:

(一)forwards:表示动画截止后,成分直接接使用当前体制。

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

(2)backwards:表示在动画延迟时间元素采纳首要帧中from的属性值可能to属性值(当animation-direction为reverse只怕alternate-reverse时) 
 

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

柒、animation-direction(是或不是轮流反向播放动画)

三、animation各属性讲解

 暗中认可值是normal,动画平常播放。固然动画只播放叁遍,则该属性无效。

  
(一)animation-name 属性为 @keyframes
动画钦命名称

 常用的属性值为:

      语法:
animation-name: *
keyframename*|none;

(壹)reverse:表示动画反向播放。

      
4858美高梅 8

(贰)alternate:表示动画在奇数拾1回广播时为正向播放,为偶数14次播放时为反向播放。

    egg:   animation-name:mymove;

(3)alternate-reverse: :表示动画在奇多次广播时为反向播放,为偶多次播放时为正向播放。
             

               -webkit-animation-name:mymove;

animation属性在书写经常合并在壹起,除非需求独自设置的属性值,animation属性的简写格局为:animation:code
2s 二s linear  infinite alternate forwards;

   (2)animation-duration 安装对象动画的播放持续时间
  
值单位能够是秒(s)或微秒(ms)**

 

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

**       
4858美高梅 9


 (三)animation-timing-function
规定动画的快慢曲线 (
动画播放时的移位格局

      
animation-timing-function使用的数学函数,称为贰次贝塞尔曲线,速度曲线。使用此函数,您能够应用你自身的值,或采用预先定义的值之一:

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

     4858美高梅 10

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

   (4)animation-delay
规定在动画开头此前的推移(几秒后开首实施动画)。

      语法:animation-delay:
time;

       
4858美高梅 11

    egg:   .demo {

                
animation-delay:2s;/*卡通将于二s后实施*/

            }

     (伍)animation-iteration-count
规定动画应该播放的次数。
出席infinite关键字,能够让动画片Infiniti次广播。

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

         
4858美高梅 12

    (六)animation-direction 规定是还是不是应当轮流反向播放动画

           注意:若果动画被安装为只播放三回,该属性将不起功能

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

         4858美高梅 13

     (柒)animation-fill-mode
动画停止今后,会霎时从结束状态跳回到早先状态。如若想让动画片保持在完工状态,供给使用其质量令其为forwards。

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

          4858美高梅 14

    (八)animation-play-state: 用来决定成分动画的播放状态

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

         4858美高梅 15

 

上边给看多少个做的demo: –简单粗糙

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

4858美高梅 164858美高梅 17

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

 4858美高梅 18

 

二、360度 从来旋转 鼠标悬停放大

 4858美高梅 19

4858美高梅 204858美高梅 21

 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

 4858美高梅 22

三、类似 —移动的一定量

4858美高梅 234858美高梅 24

 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

 

 

4858美高梅 25

学无边无际,乐在在那之中

css参考手册:

品质借鉴来源:
    

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有