首页 > Web开发 > 详细

CSS3动画

时间:2020-06-21 18:39:44      阅读:80      评论:0      收藏:0      [点我收藏+]

animation动画简介

  通过类似Flash动画的关键帧来声明一个动画,在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效

  一、transform(转换动画、直接动画)

  rotate(旋转)包含三种状态,x、y、z三轴的变化,

  rotatexrotateyrotatez(默认)

  rotate旋转案例

  技术分享图片

 

 

   效果图

        

  技术分享图片

 

   2 .translate(平移)

    包含三种状态,x、y、z三轴的变化

    translatex(默认)、translateytranslatez

    translate(平移)案例

    技术分享图片

 

      效果图

    技术分享图片

 

    3.skew(变形)

    包含两种状态,x和y的变化,

    skewx(默认)、skewy

       skew(变形)案例

     技术分享图片

 

    效果图

      技术分享图片

 

    4.scale(伸缩比例)

       scale两个参数时,分别是宽度和高度的比例

    scale一个参数时,是等比例缩放

    scale(伸缩比例)案例

    技术分享图片

 

     效果图

        技术分享图片

 

    二,transition(过渡动画)

     1.transition相关补充

             transition-property过渡的属性
       transition-delay延迟时间
       transition-duration动画过渡时间
       transition-timing-function过渡效果的时间曲线:linear(匀速)、ease(慢-快-慢)、ease-in(开始慢)、ease-out(结束慢)、ease-in-out(开始、结束慢)

     transition(过渡动画)案例

     技术分享图片

 

      效果图

        技术分享图片

 

 

    

 

 

 

  

    

 

CSS3动画

原文:https://www.cnblogs.com/li-ding-yong/p/13173461.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!