CSS3中和动画有关的属性transform、transition 和 animation
CSS3 中和动画有关的属性有三个 transform 、transition 和 animation 下面一一说明
transform
从字面来看transform 的释义为改变,使...改变,转换,这里我们可以理解为变形,那都能怎么变呢,
node 表示不进行变化
rotate 旋转 transform:rotate(20deg) 旋转角度可以为负数。需要先有 transform-origin 定义旋转的基点可为 left top center right bottom或者坐标值(50px 70px)
skew 扭曲 transform:skew(30deg,30deg) skew(相对X轴倾斜,相对Y轴倾斜)
scale 缩放 transform:scale(2,3) 横向放大2倍,纵向放大3倍 【等多放大写一个参数即可】
translate 移动 transform:translate(50px,50px) 位移【类似position 的left 以及 top】
matrix 矩阵变形 transform:matrix(a,b,c,d,tx,ty) ;其中a,b,c,d 是一个二维矩阵
transition
W3c 标准中对CSS3 的transition是这样描述的:“CSS的transition 允许CSS的属性值在一定的时间区内平滑的过渡。这种效果可以在鼠标点击、活的焦点、被点击或对元素任何改变中触发,并圆滑以动画效果改变CSS的属性值”
transition 主要包含四个属性值
transition-property: 执行变换的属性
transition-duration: 变换持续的时间
transition-timing-function: 在延续时间段,变换的速率变化
transition-delay: 变换延迟时间
transition-property
是用来指定当元素其中一个属性改变时执行transition 效果,其主要有以下几个值:
none (没有属性改变)
all(所有属性改变)
indent (元素属性名) ,当其值为none 时,transition 马上停止执行,当指定all 时,则元素产生任何属性值变化时都将执行transition 效果,ident 是指定元素的某一个属性值。
transiton-dutation
transiton-duration 是用来指定元素转换过程的持续时间,取值:<time> 围殴数值,单位为s(秒),可以作用于所有元素,包括:before 和:after 伪元素。其默认值为0 也就是变换时是即时的
transition-timing-function
取值
transition-timing-function 的值允许你根据时间的推荐去改版属性值的变换速率,transition-timing-function 有6个可能值
1.ease (逐渐变慢) 默认值,ease 函数等同于贝塞尔曲线
2.linear (匀速),linear 函数等同于贝塞尔曲线
3.ease-in (加速)
4.ease-out(减速)
5.ease-in-out 加速然后减速
6.cublic-bezier
transition-delay
transition-delay 是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果
animation
故名思议为动画的意思。Animation 应用在页面DOM上使其产生动画的效果。在开始介绍Animation 之前我们有必要来了解一个特殊的东西,那就是“keyframes” 我们把他叫做“关键帧”,玩过flash 的朋友可能对这个东西并不会陌生。
@keyframe 'wobble' { 0% { margin-left:100px;background:green } 40% { margin-lef:150px;background:orange; } 60% { margin-left:75px;backgrouns:blue } 100% { margin-left:100px;background:red } }
key frames定义好了以后,就可以去调用定义好的动画 wobble
下面我们来看下怎么给一个元素调用animation
.demo{ width:50px;height:50px; margin-left:100px; background:blue; animation-name: 'wobble'; /* 动画属性名,对应前面的keyframes 定义的动画名*/ animation-duration:10s; /* 动画持续时间*/ animation-duration: 10s;/*动画持续时间*/ animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/ animation-delay: 2s;/*动画延迟时间*/ animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/ animation-direction: alternate;/*定义动画方式*/ }
SS3的animation类似于transition属性,他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一 个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来 改变元素css的属性值,从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点,css3的 animation就需要明确的动画属性值,这也就是回到我们上面所说的,我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间 段变化的效果。