• CSS3动画与过渡


    transform:在使用2D或3D转换前需用transform-style申明转换的类型,preserve-3d或者preserve-2d

    属性

      translate():

        通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数移动。

      rotate():

        通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转.

        在3D下,有rotateX():向屏幕例外翻转;rotateY():在屏幕左右翻转,rotateZ():与2d下rotate()相同,在屏幕上顺时针或逆时针旋转。

      scale():

        通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数

      skew():

        通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数

    transition:在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果

    必须规定两项内容:

    • 规定您希望把效果添加到哪个 CSS 属性上
    • 规定效果的时长

    例:transition:width 2s;

    样式:ease 平缓变化  

      linear均匀变化

      ease-in 缓慢开始

      ease-out 缓慢结束

      ease-in-out 缓慢开始,缓慢结束

    动画:首先要先用@keyframe 动画名  的格式定义一个动画,再用animation调用动画

    @keyframe myfirst{

      from{}//开始效果

      to{}//结束效果

    }

    或@keyframe myfirst{

      0%{}      //也可以用百分比表示动画的进程

      30%{}

      70%{}

      100%{}

    }

    animation:

      animation-name: myfirst;   //动画名
      animation-duration: 5s;//动画时长
      animation-timing-function: linear;//动画变化效果,同transition
      animation-delay: 2s;//动画延迟播放时间
      animation-iteration-count: infinite;//infinite定义为无线循环
      animation-direction: alternate;//规定动画是否在下一周期逆向地播放。默认是 "normal"。

      animation-play-state:running//规定动画是否正在运行或暂停。默认是 "running"。

  • 相关阅读:
    C# String.Compare 方法测试
    C#checked 与 unchecked
    C#枚举类型
    C#结构体
    C越界和溢出的区别
    python/matlab : 将txt文件中的数据读为numpy数组
    matlab程序里调用python文件
    Python
    Pycharm调试及快捷键技巧
    Pycharm远程连接服务器debug时报错
  • 原文地址:https://www.cnblogs.com/Changero/p/4646526.html
Copyright © 2020-2023  润新知