运用css3

2020-10-18 10:02 jianzhan

本文共享了用css3-animation来制做逐帧动漫的完成方式,供大伙儿参照,实际內容以下

普遍用法:

CSS Code拷贝內容到剪贴板
  1. :hover{ animation:mymove  4s ease-out 1s backwards;}   
  2. @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} }   
  3. 拷贝编码   
  4. 解释:   
  5. mymove :keyframes的名字;   
  6. 4s:动漫的总時间;     
  7. ease-out: 快完毕的情况下慢下来;   
  8. 1s:间断1秒后刚开始动漫;   
  9. backwards:动漫完毕后返回原点   
  10. 默认设置:播发1次   
  11.   
  12. 或   
  13. transition:left 4s ease-out    
  14. :hover{left:200px}   
  15.   


适配流行访问器:

CSS Code拷贝內容到剪贴板
  1. .test{   
  2.   -webkit-animation: < 各种各样特性值 >;   
  3.      -moz-animation: < 各种各样特性值 >;   
  4.        -o-animation: < 各种各样特性值 >;   
  5.           animation: < 各种各样特性值 >;   
  6.     }   

animation-name,要求要关联的keyframes的名字,随意你取,但是以便往后维护保养的便捷,提议取1个跟姿势有关名字相仿的名字较为好。例如要大家要关联1个跑的姿势,那末能够取名为run。

time,这里有两个時间,前面1个是要求进行这个动漫所必须的時间,全称叫animation-duration,第2个time为动漫延迟时间刚开始播发的時间,全称叫animation-delay,这两个标值能够用秒’s’还可以用微秒’ms’来写,1000ms=1s,这个无需11详细介绍。

animation-timing-function,要求动漫的健身运动曲线图,这里有9个值,各自是ease| linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)

ease:动漫迟缓刚开始,接着加快,最终缓减,默认设置值;
linear:动漫从头开始到尾的速率是同样的;
ease-in:以低速刚开始;
ease-out:以低速完毕;
ease-in-out:动漫以低速刚开始和完毕;

实际效果1样 (按步数)steps

CSS Code拷贝內容到剪贴板
  1. .test1{   
  2.  background:url(http://img.xiaoho.com/2014/12/test.png) no-repeat 0 0;   
  3.  -webkit-animation:run 350ms steps(1) infinite 0s;}   
  4. @-webkit-keyframes run {       
  5.     0% {   
  6.            background-position:0;   
  7.     }   
  8.     20% {   
  9.        background-position:-90px 0;   
  10.     }   
  11.     40% {   
  12.        background-position:-180px 0;   
  13.     }   
  14.     60% {   
  15.        background-position:-270px 0;   
  16.     }   
  17.     80% {   
  18.        background-position:-360px 0;   
  19.     }   
  20.     100% {   
  21.        background-position:-450px 0;   
  22.     }   
  23.   
  24. }   
  25. .test2{   
  26.  background:url(http://img.xiaoho.com/2014/12/test.png) no-repeat 0 0;   
  27.  -webkit-animation:run 350ms steps(5) infinite 0s;}   
  28.   
  29. @-webkit-keyframes run {   
  30.     100% {   
  31.        background-position:-450px 0;   
  32.     }   
  33.   
  34. }   
  35.   

animation-iteration-count,动漫播发次数,默认设置值为1,infinite为无尽制,倘若设定为无尽制,那末动漫就会不断地播发。

animation-direction,要求动漫是不是反向健身运动。
= normal | reverse | alternate | alternate-reverse
第1个值是一切正常旋转播发,默认设置值,reverse为反方向旋转,alternate1刚开始一切正常旋转,播发完1次以后接着再反方向旋转,倘若设定animation-iteration-count:1则该值失效,alternate-reverse1刚开始为反方向旋转,播完1次以后依照重归一切正常旋转,更替旋转,设定count为1,则该值失效。
animation-play-state,界定动漫是不是运作或中止,这是后来新增的特性,有两个特性值各自是running和paused。默认设置值为normal,动漫一切正常播发。倘若是为paused,那末动漫中止。倘若1个动漫1刚开始为健身运动,那末倘若设定paused那末该动漫中止,倘若再设定running,那末该动漫会从刚刚中止处刚开始健身运动
animation-fill-mode,界定动漫播发時间以外的情况,说白了,要末便是在动漫播发完了以后给它1个情况 animation-fill-mode : none | forwards | backwards | both; none,播发完以后不更改默认设置个人行为,默认设置值,forwards则是停在动漫最终的的那个画面,backwards则是回调函数到动漫最初出現的画面,both则运用为动漫完毕或刚开始的情况。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

原文:http://www.cnblogs.com/woloveprogram/p/5258042.html