• CSS动画总结效果


       CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。

     

    transform

    rotate

    设置元素顺时针旋转的角度,用法是:

    transform: rotate(x);

    参数x必须是以deg结尾的角度数或0,可为负数表示反向。

    scale

    设置元素放大或缩小的倍数,用法包括:

    transform: scale(a);                  元素x和y方向均缩放a倍

    transform: scale(a, b);              元素x方向缩放a倍,y方向缩放b倍

    transform: scaleX(a);                元素x方向缩放a倍,y方向不变

    transform: scaleY(b);                元素y方向缩放b倍,x方向不变

    translate

    设置元素的位移,用法为:

    transform: translate(a, b);                元素x方向位移a,y方向位移b

    transform: translateX(a);                  元素x方向位移a,y方向不变

    transform: translateY(b);                  元素y方向位移b,x方向不变

    skew

    设置元素倾斜的角度,用法包括:

    transform: skew(a, b);              元素x方向逆时针倾斜角度a,y方向顺时针倾斜角度b

    transform: skewX(a);                元素x方向逆时针倾斜角度a,y方向不变

    transform: skewY(b);                元素y方向顺时针倾斜角度b,想方向不变

    以上的参数均必须是以deg结尾的角度数或0,可为负数表示反向。

    matrix

    设置元素的变形矩阵,因为矩阵变形过于复杂,暂略。

    origin

    设置元素的悬挂点,用法包括:

    transform-origin: a b;                元素的悬挂点为(a, b)

    元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。

     

    transition

    transition-property

    指定transition效果作用的CSS属性,其值是CSS属性名。

    transition-duration

    动画效果持续的时间,其值为以s结尾的秒数。

    transition-timing-function

    指定元素状态的变化速率函数,其取值基于贝赛尔曲线函数,详情如下所示:

     CSS动画总结效果

    transition-delay

    动画效果推迟开始执行的时间,其值为以s结尾的秒数。

    CSS3动画的生命周期如下图所示,从中可以清楚的看出duration和delay之间的关系:

    CSS动画总结效果


     

    animation

    CSS3中真正的动画属性是animation,而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上,CSS3所支持的动画效果只是填充动画,也就是说先设定整个动画生命周期中的几个关键状态(key  frame,关键帧),然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。

    关键帧@keyframes的语法结构如下:

     

    @keyframesNAME {

             a% {

            

             }

             b% {

                     

             }

             ...

    }

    NAME表示动画的名字;a%、b%表示以百分号结尾的百分数,用于设定该关键帧在动画生命周期中的位置;百分数后面的{ } 中则需要写成该关键帧状态下CSS属性的值。另外,如果同一个百分数值在@keyframes中出现多次,那么后出现的将覆盖先出现的;并且关键帧在@keyframes中时无序的。

    设置完关键帧后就可以继续设定animation了。

     

    animation-name

    指定选用的动画的名字,即keyframes中的NAME。

    animation-duration

    同transition-duration。

    animation-timing-function

    同transition-timing-function。

    animation-delay

    同transition-delay。

    animation-iteration-count

    设定动画执行的次数,其值可以是数字也可以是infinite(循环执行)。

    animation-direction

    设定动画执行的方向,其值可以是normal(正常顺序播放)或alternate(反向播放)。

     

    前缀

    因为CSS3还没有正式发布,所以各种浏览器对它的支持也不尽相同。所以在设置CSS3属性(包括@开头的新属性)的时候通常需要对其添加浏览器标识的前缀,如-webkit- 表示Webkit内核的浏览器Chrome和Safari,-moz- 表示Fire Fox,-o- 表示Opera。无视IE吧,在IE上的实现通常还是要用到滤镜,而不是CSS3。

     

    实例

    下面的代码模拟了上述大部分的CSS3动画属性,由于只使用了–webkit- 前缀,所以只能在Chrome或Safari下正常运行。

     

     

    HTML代码:

    [html] view plain copy

    1.  >  

    2.  <</span>html xmlns="http://www.w3.org/1999/xhtml">  

    3.  <</span>head>  

    4.  <</span>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

    5.  <</span>title>CSS3动画</</span>title>  

    6.  <</span>link type="text/css" rel="stylesheet" href="animation.css" />  

    7.  </</span>head>  

    8.    

    9.  <</span>body>  

    10. <</span>div class="rotate">rotate</</span>div>  

    11. <</span>div class="scale">scale</</span>div>  

    12. <</span>div class="translate">translate</</span>div>  

    13. <</span>div class="skew">skew</</span>div>  

    14. <</span>div class="origin">origin</</span>div>  

    15. <</span>div class="single">single property</</span>div>  

    16. <</span>div class="whole">whole property</</span>div>  

    17. <</span>div class="resume">change & resume</</span>div>  

    18. <</span>div class="animation">animation</</span>div>  

    19. </</span>body>  

    20. </</span>html>   

    CSS代码:

    animation.css

    [css] view plain copy

    1.  div {  

    2.      width: 80px;  

    3.      height: 30px;  

    4.      line-height: 30px;  

    5.      text-align: center;  

    6.      background: #06F;  

    7.      color: #fff;  

    8.      font-family: Arial, Helvetica, sans-serif;  

    9.      -webkit-border-radius: 10px;  

    10.     margin: 5px;  

    11. }  

    12.   

    13. .rotate {  

    14.     -webkit-transform: rotate(0deg);  

    15. }  

    16.   

    17. .rotate:hover {  

    18.     -webkit-transform: rotate(90deg);  

    19. }  

    20.   

    21. .scale {  

    22.     -webkit-transform: scale(1);  

    23. }  

    24.   

    25. .scale:hover {  

    26.     -webkit-transform: scale(1.5);  

    27. }  

    28.   

    29. .translate {  

    30.     -webkit-transform: translate(0px, 0px);  

    31. }  

    32.   

    33. .translate:hover {  

    34.     -webkit-transform: translate(50px, 50px);  

    35. }  

    36.   

    37. .skew {  

    38.     -webkit-transform: skew(0);  

    39. }  

    40.   

    41. .skew:hover {  

    42.     -webkit-transform: skewY(20deg);  

    43. }  

    44.   

    45. .origin {  

    46.     -webkit-transform-origin: top left;  

    47.     -webkit-transform: rotate(0);  

    48. }  

    49.   

    50. .origin:hover {  

    51.     -webkit-transform: rotate(45deg);  

    52. }  

    53.   

    54. .single {  

    55.     width: 150px;  

    56. }  

    57.   

    58. .single:hover {  

    59.     background: #f00;  

    60.     width: 200px;  

    61.     height: 100px;  

    62.     line-height: 100px;  

    63.     -webkit-transition-property: background;  

    64.     -webkit-transition-duration: 2s;  

    65. }  

    66.   

    67. .whole {  

    68.     width: 150px;  

    69. }  

    70.   

    71. .whole:hover {  

    72.     width: 200px;  

    73.     height: 100px;  

    74.     line-height: 100px;  

    75.     background: #f00;  

    76.     -webkit-transition-duration: 2s;  

    77. }  

    78.   

    79. .resume {  

    80.     width: 150px;  

    81.     -webkit-transition-duration: 2s;  

    82. }  

    83.   

    84. .resume:hover {  

    85.     width: 200px;  

    86.     height: 100px;  

    87.     line-height: 100px;  

    88.     background: #f00;  

    89.     -webkit-transition-duration: 2s;  

    90. }  

    91.   

    92. .animation:hover {  

    93.     -webkit-animation-name: anim;  

    94.     -webkit-animation-duration: 2s;  

    95.     -webkit-animation-timing-function: linear;  

    96.     -webkit-animation-direction: alternate;  

    97.     -webkit-animation-iteration-count: infinite;  

    98. }  

    99.   

    100. @-webkit-keyframes anim {  

    101.     0% {  

    102.         width: 80px;  

    103.         height: 30px;  

    104.         line-height: 30px;  

    105.         background: #06F;  

    106.     }  

    107.     50% {  

    108.         width: 140px;  

    109.         height: 65px;  

    110.         line-height: 65px;  

    111.         background: #360;  

    112.     }  

    113.     100% {  

    114.         width: 200px;  

    115.         height: 100px;  

    116.         line-height: 100px;  

    117.         background: #f00;  

    118.     }  

    119. }  

  • 相关阅读:
    WRF WPS预处理
    CVS安装
    Linux窗口最小化消失,任务栏上无法找到的解决方法
    NCARG安装配置出现error while loading shared libraries: libg2c.so.0问题额解决办法
    Netcdf安装
    Embedding R-generated Interactive HTML pages in MS PowerPoint(转)
    The leaflet package for online mapping in R(转)
    Some 3D Graphics (rgl) for Classification with Splines and Logistic Regression (from The Elements of Statistical Learning)(转)
    What does a Bayes factor feel like?(转)
    Weka算法介绍
  • 原文地址:https://www.cnblogs.com/gopark/p/8797059.html
Copyright © 2020-2023  润新知