宜宾网站建设公司

css3中怎么实现动画效果

今天就跟大家聊聊有关css3中怎么实现动画效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联建站为企业级客户提高一站式互联网+设计服务，主要包括做网站、网站设计、成都App定制开发、成都小程序开发、宣传片制作、LOGO设计等，帮助客户快速提升营销能力和企业形象，创新互联各部门都有经验丰富的经验，可以确保每一个作品的质量和创作周期，同时每年都有很多新员工加入，为我们带来大量新的创意。 

css3的动画功能有以下三种:

1、transition(过度属性)
2、animation(动画属性)
3、transform(2D/3D转换属性)

下面逐一进行介绍我的理解：

1、transition:<过渡属性名称> <过渡时间> <过渡模式>

如-webkit-transition:color 1s;

等同于:

-webkit-transition-property:color;

-webkit-transition-duration:1s;

多个属性的过渡效果可以这样写：

方法1：-webkit-transition:<属性1> <时间1> ,<属性2> <时间2> ,。。。

方法2：

-webkit-transition:<属性1> <时间1>;

-webkit-transition:<属性2> <时间2>;

transition-timing-function属性值有5个:

ease:缓慢开始，缓慢结束

liner:匀速

ease-in:缓慢开始

ease-out:缓慢结束

ease-in-out:缓慢开始，缓慢结束（和ease稍有区别）

实例：
transition过渡效果

XML/HTML Code复制内容到剪贴板

  1.   

  2.   

  3.   

  4.       

  5.     transition过渡效果  

  6.       

  7.       

  8.   

  9.   

  10.     

  

  •     
      

  •     
      

  •     
      

  •     
      

  •     
      

  •     
      

  •     

      

  •     
      

  •     
      

  •     
      

  •       

  •         ease  

  •         liner  

  •         ease-in  

  •         ease-out  

  •         ease-in-out  

  •     

    •   

  •   

  •   

    • 2、动画属性animation

    animation: name duration timing-function delay iteration-count direction;

    值

    描述

    animation-name

    规定需要绑定到选择器的 keyframe 名称。。

    animation-duration

    规定完成动画所花费的时间，以秒或毫秒计。

    animation-timing-function

    规定动画的速度曲线。

    animation-delay

    规定在动画开始之前的延迟。

    animation-iteration-count

    规定动画应该播放的次数。

    animation-direction

    规定是否应该轮流反向播放动画。

    注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

    @keyframes animationname {keyframes-selector {css-styles;}}

    值

    描述

    animationname

    必需。定义动画的名称。

    keyframes-selector

    必需。动画时长的百分比。

    合法的值：

    • 0-100%

    • from（与 0% 相同）

    • to（与 100% 相同）

    css-styles

    必需。一个或多个合法的 CSS 样式属性。

    以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

    0% 是动画的开始时间，100% 动画的结束时间。

    例如：

    CSS Code复制内容到剪贴板

    1. animation:mymove 5s infinite;   

    2.   

    3. @keyframes mymove{   

    4.   

    5. from{ top:0px; }   

    6.   

    7. to{ top:200px; }   

    8.   

    9. }  

    还可以这么写：

    CSS Code复制内容到剪贴板

    1. @keyframes mymove{   

    2.   

    3. 0%{ top:0px; }   

    4.   

    5. 25%{ top:200px; }   

    6.   

    7. 50%{ top:100px; }   

    8.   

    9. 75%{ top:200px; }   

    10.   

    11. 100%{ top:0px; }   

    12.   

    13. }   

     案例：
    css3的animation效果

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.   

    4.   

    5.   

    6.   

    7.   

    8. 注释：本例在 Internet Explorer 中无效。

        

    9.   

    10.   

    11.   

    12.   

    13.   

    3、设置3D场景（即transform）

    -webkit-perspective:800;(单位为像素)--即三维物体距离屏幕的距离。

    -webkit-perspective-origin:50% 50%;(这个属性代表了人眼观察的视野。50% 50%为X轴、Y轴相应的位置，即屏幕的正中央。)

     　　css3中怎么实现动画效果

    使用transform属性调整元素：-webkit-transform-style:-webkit-perserve-3d;(这个属性是告诉浏览器我们是在一个三维空间中对元素进行操作)

    (1)、translate(移动距离)

    translateX（x px）

    translateY（y px）

    translateZ（z px）

    (2)、rotate(旋转角度)

    rotateX(x deg)

    rotateY(y deg)

    rotateZ(z deg)

     　　css3中怎么实现动画效果

    transform：rotate（45deg）

    rotateX:向屏幕上边沿向内旋转为正方向。

    rotateY:向屏幕竖直向下为正方向。

    rotateZ:向屏幕外为正方向。

    一个div块，右边沿向屏幕内旋转45deg,即应设置为：Transform：rotateY（45deg）。

    实例：

    transform3D转换效果

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.   

    4.       

    5.     transform3D转换效果  

    6.       

    7.       

    8.   

    9.   

    10.     

      

  •     
      

  •     
      

  •     
      

  •     
      

  •     
      

  •     
      

  •     

      

  •     
      

  •     
      

  •     
      

  •     

    translate(移动距离)

      

  •       

  •         translateX  

  •         translateY  

  •     

    •   

  •     

    rotate(旋转角度)

      

  •       

  •         rotateX  

  •         rotateY  

  •         rotateZ  

  •       

  •   

  •   

    • 使用transform-origin属性调整旋转中心。默认旋转中心点为div盒子的正中心。

    这个旋转中心是可以改变的：

    X轴：left、center、right.

    Y轴：top、center、bottom.

    Z轴：length px(一个长度值)。

    看完上述内容，你们对css3中怎么实现动画效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。


    网页题目：css3中怎么实现动画效果
    文章分享：http://hbruida.cn/article/jjcddc.html

    其他资讯