【学习笔记13】CSS：动画与变形

动画：animation

过渡：transition

转换：transform

1.动画animation的使用

1）定义关键帧

@keyframes 自定义的名称{

                from{一个或多个css的属性值}

                to{一个或多个css的属性值}

}

或者：

@keyframes 自定义的名称{

                0%{一个或多个css的属性值}

                100%{一个或多个css的属性值}

}

如果from或者0%里css的状态和默认时的状态相同，则可以省略。

2）调用关键字

动画有三个状态：默认状态（自己的状态）、开始状态、结束状态

选择器{

        animation-name：user-defined-name   //引入的关键帧名称

        animation-duration：动画持续时间 //单位s、ms，默认0s

        animation-iteration-count：动画迭代次数，即重复次数 //可以是正整数和0-1之间的小数，无限循环的infinity

        animation-delay：动画延迟执行时间，即元素在加载成功后到动画运行前的时间。
        //单位为s 、ms ,默认值为0s，即动画加载成功后立刻运行。只会延时一次，此时动画的状态是自己的默认状态。

        animation-direction 动画方向，即动画运行完是否交替方向或者是重置起点。

        //取值有normal（默认值，正常播放）、reverse（播放帧的顺序反转，播放的起点为帧的结束）、 alternate（播放帧的顺序交替反转，即第一次播放从帧的开始播放到帧的结束，第二次播
放就从帧的结束播放到帧的开始，与此同时，速度曲线也交替反转。）、 alternate-reverse（与alternate类似，不过第一次播放时候需要反转。）

        animation-play-state：动画状态，与js语句搭配使用。

        //取值有paused(暂停)、running（运行）

        animation-fill-mode：填充模式，指定了CSS动画在执行前和执行后如何将样式应用到它的目标上。

        //none 不改变默认行为，默认值
         forwards在动画结束后，目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值              backwards在延迟时间内，目标将保留在执行期间所遇到的第一个关键帧所设置的计算值     both 向前和向后填充模式都被应用

        animation-timing-function：动画的速度曲线

        //ease 默认值，先快后慢、 linear 线性增长，匀速、 ease-in 先慢后快、 ease-out 先快后慢、ease-in-out 先慢后快再慢

}

速写时：div{

                animation:name 3s 2s linear alternate;

        }

其中，前两个属性必须是动画名称和持续时间，后面属性的位置可以任意，若速写中有两个和时间有关的属性，则第一个是持续时间第二个是动画延迟时间。

2.过渡transition：能控制动画速度，可以让属性变化成为一个持续一段时间的过程，而不是立即生效。一般搭配hover使用。

div {
transition: <property> <duration> <timing-function> <delay>;
}

transition-property：过渡属性、transition-duration：持续时间、transition- timing-function：时间曲线、transition-delay：过渡延迟

 animamtion和transition的异同点：

区别：①animation先定义再使用，transition直接使用，但是需要搭配hover；

②animation可以同时对多个css属性值进行动画，transition只能过渡一个属性，如果要过渡hover里的全部属性，则用all

③animation页面一加载就会实现动画效果，但transition不会。

相同点：都可以搭配hover使用。

3.变形transform

语法：

div {
transform: xxx();
transform-origin:center; ///用于指定一个元素变形的原点（不常用）
}

旋转rotate，单位deg(角度)

        rotateX:绕X轴旋转

        rotateY:绕Y轴旋转

        rotateZ/rotate:绕Z轴旋转，例如旋转盘，唱片

倾斜skew,单位deg

        skewX()、skewY()

缩放scale（ ，）每个方向的缩放比例，括号里的是倍数。

在对子元素使用scale（，）时会对父元素产生溢出现象，可以对父元素进行overflow：hidden

移动translate(tx,ty)，在水平和垂直方向的移动。无单位