LoraLU

一、定义动画过程中形成的状态用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;
  }
}

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

@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

<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的更多相关文章

随机推荐

PHP系列 | ThinkPHP5.1 如何自动加载第三方SDK（非composer包）
注意:这里只是针对于非Composer 安装包的自动加载的实现,能用composer安装的自动跳过. 由于ThinkPHP5.1 严格遵循PSR-4规范,不再建议手动导入类库文件,所以新版取消了Loa ...
题解-------CF372C Watching Fireworks is Fun
传送门一道有趣的DP 题目大意城镇中有$n$个位置,有$m$个烟花要放.第$i$个烟花放出的时间记为$t_{i}$,放出的位置记为$a_{i}$.如果烟花放出的时候,你处在位置$x$,那么你将收获 ...
tmp == emg.经典+47
zw.Y3s3{ttqtf**9q+{xx//up qm+Y3#9t%sfsfqtf+&* hh-Y@15zq&zf51"qt3+x>y ====== 城隍庙经典景点 ...
ubuntu16.04更换 apt-get 阿里源
deb-src http://archive.ubuntu.com/ubuntu xenial main restricted #Added by software-properties deb ht ...
爬虫笔记(十三)——lxml库的使用
HTML示例代码: text = ''' <div> <ul> <li class="item-0"><a href="link ...
mac环境下创建bash_profile文件并写入内容更改php环境变量
1. 启动终端Terminal 2. 进入当前用户的home目录输入cd ~ 3. 创建.bash_profile 输入touch .bash_profile 4. 编辑.bash_profile文 ...
win下PowerShell的簡單使用
邪恶的csrf
关于csrf是啥我就不多说了进入正文场景模拟场景一在一个bbs社区里,用户在发言的时候会发出一个这样的GET请求: #!html GET /talk.php?msg=hello HTTP/1. ...
扩增|feather evolution
Wool vs feather 扩增方法:1.Gene Duplication2.Genome Duplication3.Cluster 哺乳动物毛发和鸟类的羽毛,都来自于角蛋白. 羽毛进化图 DNA ...
高性能JAVA开发之内存管理
这几天在找一个程序的bug,主要是java虚拟机内存溢出的问题,调研了一些java内存管理的资料,现整理如下: 一.JVM中的对象生命周期对象的生命周期一般分为7个阶段:创建阶段,应用阶段,不可视阶 ...