Css3动画

Css3动画

    元素从一种样式逐渐变化为另一种样式的效果

transform、transition、animation的区别

1.transform 是静态的,一般辅助transition、animation
2.触发条件不同：
transition通常由事件触发和hover等事件配合使用，与js的交互更紧密
animation则和gif动态图差不多，立即播放(或延迟一段时间播放)
3.精确性：
tranistion 只能设定头尾,所有样式属性都一起变化
animation可以设定每一帧的样式和时间，且可以设定循环次数
结论：
   1.如果要简单的from to 效果或者要使用js灵活设定动画属性，用transition
   2.如果要灵活定制多个帧以及循环，用animation

transform

    对元素进行旋转、缩放、移动或倾斜的2D、3D转换
none: 默认值,不进行变换
rotate(Xdeg)：水平旋转
    X为正数时，顺时针旋转；为负数时，逆时针旋转
scale(x,y)：缩放
    1为原始大小,正数放大，负数缩小
skew(Xdeg,Ydeg)：
    将元素沿水平方向倾斜变形
translate(Xpx,Ypx)：平移
    属性值为一个时，x轴定位；为两个时，x、y轴分别定位

transition: property duration timing-function delay

    在一定的时间区间内平滑地过渡（可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值）
transition效果实现步骤：
    第一，在默认样式中声明元素的初始状态样式；
    第二，在默认样式中通过添加过渡函数，添加一些不同的样式
    第三，声明过渡元素最终状态样式，比如悬浮状态
property：none | all | transition-property
指定过渡或动态模拟的CSS属性
none: 没有指定任何样式
all: 默认值，表示终始状态所有可过渡的样式
transition-property: 可过渡的样式，可用逗号分开写多个样式
可以过渡的CSS样式
    颜色: color background-color border-color outline-color
    位置: backround-position left right top bottom
    长度:
       [1]max-height min-height max-width min-width height width
       [2]border-width margin padding outline-width outline-offset
       [3]font-size line-height text-indent vertical-align
       [4]border-spacing letter-spacing word-spacing
    数字: opacity visibility z-index font-weight zoom
    组合: text-shadow transform box-shadow clip
    其他: gradient
duration：指定完成过渡所需的时间(秒或毫秒)
    [注意]该属性不能为负值
    [注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
    [注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间
timing-function：指定过渡函数
delay：指定开始出现的延迟时间

可参考地址：深入理解CSS过渡transition

animation: name duration timing-function delay iteration_count direction

@-webkit-keyframes 'name'{   //关键帧  } 

name: 需要绑定到选择器的 keyframe 名称
duration: 一个动画持续的时间,没有设置duration的话，则表示为无穷大
timing-function: 动画的速度曲线
    ease 默认。动画以低速开始，然后加快，在结束前变慢
    ease-in 动画以低速开始
    ease-out 动画以低速结束
    ease-in-out 动画以低速开始和结束
    linear 动画从头到尾的速度是相同的
delay ：开始动画之前的延时，值以秒或毫秒计
iteration-count： 动画要重复几次(无穷次：infinite)
direction: 是否应该轮流反向播放动画
    normal 方向始终向前
    alternate 当重复次数为偶数时方向向前，奇数时方向相反

跟animation有关的其他属性
animation-fill-mode :
    none (默认) 不改变默认行为
    backwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
    forwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义
    both 向前和向后填充模式都被应用 设置动画开始之前和结束之后的行为
animation-play-state: running（默认） | paused
    设置动画的运行状态

示例：

@-webkit-keyframes fontbulger {    0% {font-size: 10px;}    30% {font-size: 30px;}    100% {font-size: 20px;}}#box {    -webkit-animation-name:  fontbulger;    -webkit-animation-duration: 5s;    -webkit-animation-timing-function: ease-out;    -webkit-animation-delay: 2s;    -webkit-animation-iteration-count:3;    -webkit-animation-direction: alternate;    -webkit-animation-fill-mode: both;}