zoukankan      html  css  js  c++  java
  • CSS3动画

    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(过渡动画)案例

         

          效果图

            

        

      

        

     

  • 相关阅读:
    2020牛客寒假算法基础集训营3
    2020牛客寒假算法基础集训营2
    2020牛客寒假算法基础集训营1
    Educational Codeforces Round 81 + Gym 102267
    博客迁移到自己的WordPress站上
    HDU 5172 GTY's gay friends 线段树 or Hash
    HDU 3436 Queue-jumpers Splay
    HDU 1890 Robotic Sort Splay
    POJ 3468 A Simple Problem with Integers Splay
    BZOJ 1503 郁闷的出纳员 Splay
  • 原文地址:https://www.cnblogs.com/li-ding-yong/p/13173461.html
Copyright © 2011-2022 走看看