前端——CSS动画

CSS3 变形

变形简介

在网页中实现动画效果，可以使用动态图片、Flash、JavaScript 来完成。借助 CSS3 可以轻松倾斜、缩放、移动和翻转元素，实现动画效果。CSS3 变形是一些效果的集合(如平移、旋转、缩放、倾斜等)，包括 2D 变形和 3D 变形。每一个效果都可以称之为变形(transform)。

基本用法

transform:none变形函数:

2D 变形函数

2D 变形函数           描述
translate()           位移函数。
scale()                缩放函数。
skew()                倾斜函数。
rotate()               旋转函数。

3D 变形函数

3D变形函数                描述
translate3d（)        位移函数。
scale3d()                缩放函数
rotate3d()                旋转函数。

2D 位移

translate()函数可以将元素从一个位置移动到另一个位置上，即位移
基本用法

transform:translate(x,y);

transform:translate(x);
transform:tranxlateX(x);
transform:translateY(y);
translate()常见的参数

参数                        描述
x                x轴位移量。x>0 时元素向右移动。
y               y轴位移量。y>0时元素向下移动。

2D缩放

scale()函数可以缩放元素大小。
scale()函数基本用法
transform:scale(x，y);
transform:scale(x);
transform:scale(x);
transform: scale(y);

scale()参数
参数                                                描述
x                x轴缩放比例。0.99>x>0时x轴缩小，x>1时x轴放大。

y                y轴缩放比例。0.99>y>0时y轴缩小，y>1时y轴放大

2D 倾斜

skew()函数可以让元素倾斜显示，可将元素以其中心位置围绕着x轴和y轴按照一定角度倾斜。
skew()函数会改变元素的形状。
基本用法
translate:skew(x，y);
translate:skew(x);
translate:skewX(x);
translate:skewY(y);
skew()参数
参数                        描述
x轴方向(水平方向)的倾斜角度，单位为deg(度)。x>0deg时向左倾斜。
y轴方向(垂直方向)的倾斜角度，单位为deg(度)。y>0deg时向上倾斜。

2D 旋转

rotate()函数可以让元素在二维空间里绕着一个指定的角度旋转。
rotate()函数不会改变元素的形状。

基本用法
translate:rotate(a);
rotate()参数
参数           描述

a        旋转角度。a>0deg时元素顺时针旋转
 

CSS3 过渡

过渡属性
过渡是指元素从一种样式逐渐改变为另一种样式的效果

基本用法

transition:过渡属性 过渡所需时间 过渡动画函数 过渡延迟时间:
transition-property:过渡属性;
transition-duration:过渡所需时间:
transition-timing-function:过渡动画函数;
transition-delay:过渡延迟时间;

过渡属性参数

参数                                        描述
                                定义转换动画的 CSS 属性名称
                                property:指定的CSS属性，如width、height、background-color 属性等
过渡属性                 all:指定所有元素支持transition-property属性的样式。none:没有属性会获得过

                                渡效果。

过渡所需时间          定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为

                                秒。

                               指定浏览器的过渡速度，以及过渡期间的操作进展情况。通过给过渡添加个函

                               数来指定动画的快慢方式ease:速度由快到慢(默认值)linear:速度恒速(速运

 过渡动画函数        动)ease-in:速度越来越快(渐显效果)，ease-out:速度越来越慢(渐隐效果)

                               ease-in-out:速度先加速再减速(渐显渐隐效果)

                               指定一个动画开始执行的时间，单位秒或者毫秒。正值:元素过渡效果不会立即

过渡延迟时间         触发，当过了设置的时间值后才会被触发。负值:元素过渡效果会从该时间点开

                               始显示，之前的动作被截断。0:默认值，元素过渡效果立即执行。

过渡触发机制

会触发过渡效果的情况，即让一个元素有多态样式的情况有:伪类触发:如hover、active、focus、checked等。
媒体查询:通过 @media 属性判断设备的尺寸、方向等
JavaScript 触发。

CSS3 动画

动画属性
animation 属性用于实现动画效果
使用 CSS 实现动画效果，需要先通过关键帧声明一个动画。

@keyframes 基本用法

@keyframes 动画名称{
from {
/*开始时，即8%时的css样式 */
xx% {
/*xx%时的css样式 */
to {
/*结束时，即100%时的css样式 */
  }

}
关键帧设置完成后，需要找到要设置动画的元素，调用关键声明的动画

animation 属性的基本用法

animation:动画名称 动画时间 动画方式 延迟时间 播放次数 播放方向 播放状态 动画时间外的状态
animation-name:动画名称;

animation-duration:动画时间:

animation-timing-function:动画方式;
animation-delay:延迟时间
animation-iteration-count:播放次数
animation-direction:播放方向:
animation-play-state:播放状态
animation-fi11-mode:动画时间外的状态

animation 属性参数

参数                        描述
动画名称        调用 @keyframes 定义的动画名称。
动画时间        同过渡时间。
动画方式        同过渡方式。
延迟时间        同过渡延迟时间。
播放次数        infinite:动画无限次播放。默认值为 1。
播放方向        normal:动画每次都是循环向前播放。alternate:动画播放为偶数次则向前播放。
播放状态        running:将暂停的动画重新播放 paused:将正在播放的元素动画停下来。

                                 forwards:动画在结束后继续应用最后关键的位置。
动画时间                   backwards:在向元素应用动画样式时迅速应用动画的初始。

外的状态                   both:元素动画同时具有forwards和backwards的效果。

过渡和动画对比

实现动画的方式不同
transition 过渡属性通过指定属性的初始状态样式和结束状态样式，在两个状态之间进行平滑过渡实现动画效果。
animation 动画属性通过设置关键帧、调用关键帧的方式来实现动画效果，支持复杂的动画效果。触发动画的方式不同
transition 过渡属性实现动画需要触发一个事件，如 hover 事件等。
animation动画属性实现动画可以在不触发任何事件的情况下也能随着时间的变化来实现动画效奥。