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;
}
}

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

       
      
      
      
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
       
      
      
      

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
       
      
      
      

你可能感兴趣的:(LoraLU)