css3变形、过渡、动画（学习笔记）

CSS3变形：

transform:取值;

平移：translate()

• transform:translateX(x);沿x轴方向平移
• transform:translateY(y);沿y轴方向平移
• transform:translate(x,y)沿x轴和y轴方向同时平移

缩放：scale()

• transform：scaleX(x);沿x轴方向缩放
• transform：scaleY(y);沿y轴方向缩放
• transform：scale(x,y)沿x轴和y轴方向缩放

注意当x或y取值为0~1，元素进行缩小；当x或y取值大于1时；元素进行放大

倾斜：skew()

• transform:skew(x);沿x轴方向倾斜
• transform:skew(y);沿y轴方向倾斜
• transform:skew(x,y);沿x轴和y轴同时倾斜

说明：单位为deg（即degree的缩写）

旋转：rotate()

• transform:rotate(angle);

说明：单位为deg（即degree的缩写）

中心原点：transform-origin:取值;

• 百分比
• 关键字

CSS过渡 ：transition

谁过渡就给谁添加

1.transtion-property：对元素的哪一个属性进行操作

2.transition-duration：过渡的持续时间,单位秒（s/ms）

3.transition-timing-function：过渡的速率变化方式
linear：以匀速过渡。
ease：慢速开始，中间快速，以慢速结束。
ease-in：慢速开始。
ease-out：慢速结束。
ease-in-out：以慢速开始和结束。
除了这些外，还可以使用贝塞尔曲线来自定义
cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中定义自己的值，cubic-bezier参数的取值范围： x y  x y

4.transition-delay: 指定延迟时间

复合写法：transition: transition-property transition-duration transition-timing-function transition-delay;

css动画：animation

在使用animation属性实现动画需要两步

定义动画

调用动画

语法：

animation:动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向

@keyframes：

@keyframes 动画名

{   

    0%{}
    ...
   100%{}

}

说明：0%表示动画的开始，100%表示动画的结束，0%和100%是必须的。

在使用@keyframes规则时，如果仅仅只有0%和100%这两个百分比，此时0%和100%可以使用关键字from和to来代替,其中0%对应from，100%对应to

@keyframes mycolor
{
   from{color:red;}
   to{color:green;}
}

动画名称：animation-name

对哪个css属性操作

持续时间：animation-duration

动画的持续时间

动画方式：animation-timing-function

linear：以匀速过渡。
ease：慢速开始，中间快速，以慢速结束。
ease-in：慢速开始。
ease-out：慢速结束。
ease-in-out：以慢速开始和结束。

延迟时间：animation-delay

单位秒（s/ms）

播放次数：animation-iteration-count

属性取值有两种，一种是“正整数”，另一种是“infinite”。当取值为n(正整数)时，表示动画播放n次，当动画取值为infinite时，表示动画播放无数次，也就是循环播放

播放方向：animation-direction

取值有3个

normal，正方向播放(默认)

reverse 反方向播放

alternate，播放次数是奇数时，动画正方向播放，播放次数是偶数时，动画反方向播放

播放状态：animation-play-state

取值属性有两个

running，播放（默认）

paused，暂停

最后：我会继续努力的大家一起加油