一、定义动画过程中形成的状态用transform

transform 分为2D 和 3D，主要包含以下几种变换：旋转rotate、扭曲skew、缩放scale和移动 translate以及矩阵变形matrix，语法如下：

1


transform: rotate | scale | skew | translate |matrix;
旋转 描述
rotate(angle) 定义 2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle) 定义 3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转
rotateY(angle) 定义沿着 Y 轴的 3D 旋转
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转

rotate 的单位是deg 度，正数表示顺时针旋转，负数表示逆时针旋转。

缩放 描述
scale(x,y) 定义 2D 缩放转换
scale3d(x,y,z) 定义 3D 缩放转换
scaleX(x) 通过设置 X 轴的值来定义缩放转换
scaleY(y) 通过设置 Y 轴的值来定义缩放转换
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换

scale 的取值范围是0~n，小于1时表示缩小，反之表示放大。例如scale(0.5, 2)表示水平方向缩小1倍，垂直方向放大1倍， 另外，也可以通过scaleX或者scaleY对一个方向进行设置。

扭曲 描述
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换

skew 的单位跟rotate一样都是deg 度。例如 skew(30deg, 10deg)表示水平方向倾斜30度，垂直方向倾斜10度。

偏移 描述
translate(x,y) 定义 2D 转换
translate3d(x,y,z) 定义 3D 转换
translateX(x) 定义转换，只是用 X 轴的值
translateY(y) 定义转换，只是用 Y 轴的值
translateZ(z) 定义 3D 转换，只是用 Z 轴的值

偏移同样包括水平偏移和垂直偏移。translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）。

二、定义动画过程用animation或者transition

transition

transition允许css的属性值在一定的时间区间内平滑地过渡，语法如下：

1


transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]
  • transition-property :用来指定执行transition效果的属性，可以为 none,all或者特定的属性
  • transition-duration: 动画执行的持续时间，单位为s（秒）或者 ms（毫秒）
  • transition-timing-function:变换速率效果，可选值为ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier（自定义时间曲线）
  • transition-delay:用来指定动画开始执行的时间，取值同transition-duration，但是可以为负数

animation

CSS3 中的 animation 是通过一个叫Keyframes关键帧的玩意来控制的，他的命名是由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个”@keyframes”中的样式规则是由多个百分比构成的，如“0%”到”100%”之间，语法如下：

1


大专栏  LoraLU">2


3


4


5


6


7


8


9


10


11


@keyframes IDENT {


  from {


    Properties: Properties value;


  }


  Percentage {


    Properties: Properties value;


  }


  to {


    Properties: Properties value;


  }


}

或者全部写成百分比的形式：

1


2


3


4


5


6


7


8


9


10


11


@keyframes IDENT {


  0% {


    Properties: Properties value;


  }


  Percentage {


    Properties: Properties value;


  }


  100% {


    Properties: Properties value;


  }


}

animation和transition一样有自己相对应的属性，在animation主要有以下几种：

  • animation-iteration-count : 动画循环次数,默认为1，如果要进行无限循环，只要设为infinite即可

  • animation-direction : 动画播放的方向,其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放

  • animation-play-state : 播放状态。其主要有两个值，running和paused，其中running为默认值。可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放。这个属性不常用。

三、Demo

1.让图片不停旋转

HTML

1


2


3


<body>


    <img src="img/ring.png">


</body>

CSS

1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


21


22


23


24


25


<style type="text/css">


    @keyframes rotateInfinite{


        from{


            -webkit-transform: rotate(0deg);


            transform: rotate(0deg);


        }


        to{


            -webkit-transform: rotate(360deg);


            transform: rotate(360deg);


        }


    }


    @-webkit-keyframes rotateInfinite{


        from{


            -webkit-transform: rotate(0deg);


            transform: rotate(0deg);


        }


        to{


            -webkit-transform: rotate(360deg);


            transform: rotate(360deg);


        }


    }


    img{


        animation: rotateInfinite 1s linear infinite;


    }


</style>

LoraLU的更多相关文章

随机推荐

  1. 分享一套好看的PyCharm Color Shceme 配色方案

    配色方案图1 点击可查看大图 (color shceme 配色文件下载链接已经放在文末) 配色方案图2 配色方案图3 picture1 picture2 整体效果 下载链接 https://files ...

  2. Codeforces Round #523 (Div. 2) Cdp

    题:https://codeforces.com/contest/1061/problem/C 题意:给你一个序列,我们求他们子序列的个数,这个子序列有个限制就是每一个子序列上的值都必须是能整除他的下 ...

  3. Seconds from winning

    英语沙龙 1. Who winned the game? Answer: It was not Paxton who would hoist the winner's trophy. Paxton h ...

  4. metinfo_5.3变量覆盖引发的一系列问题

    metinfo_5.3中存在一个很经典的$$型变量覆盖,这种变量覆盖在之前的博客中提到过,今天的博客围绕这个变量覆盖漏洞结合这款CMS的其他功能进行漏洞利用. 变量覆盖+文件包含 拿到这个CMS首先还 ...

  5. Win10卸载python总是提示error2503失败各种解决办法

    最近win10的电脑装了python的3.4,然后想卸载,就总是提示error 2053,类似于这种: 下面是我的坎坷解决之路: 1.网上说,任务管理器 --> 详细信息 --> expl ...

  6. MonkeyScript常用命令及Uiautomatorview问题解决

    一.MonkeyScript执行脚本的命令 adb shell monkey -f <scriptfile><event-count> 1.Dispatch Trackball ...

  7. listening-conversation|信息简写|Generally|回答|矛盾

    听力可以刷分,但是要求高.听力流程是听.笔记.读题和确定答案,不能回看.Conversation快速且不完整.素材内容主要是生命科学,社科(人类学:考古学),艺术,自然科学(地质). 难点分析: 词汇 ...

  8. 查看linux系统安装的服务

    如何查看linux系统安装了哪些服务呢,因不同版本的操作系统可能使用的命令不一样或者有些命令在某些操作系统不可用,现列举一些常用查看命令(基于我的linux版本). 我的操作系统版本如下: 1.ser ...

  9. mac vmware fusion10 nat 模式网络配置

    mac vmware fusion10 nat 模式网络配置 1.虚拟机选择 nat 模式 虚拟机-->网络适配器-->网络适配器设置-->连接网络适配器(对勾)-->与我的 ...

  10. Excel-DNA项目只用1个文件实现Ribbon CustomUI和CustomTaskpane定制【C#版】

    Excel-DNA项目中的自定义功能区和自定义任务窗格需要用到各种命名空间.添加所需文件,才能实现.后来我发现可以把所有代码都写在Class1.cs这个默认文件中. 大家可以在Visual Studi ...