'css3动画'

发表于 2017-04-06

css3中所有的属性都是即时效果
transition过渡动画:property duration timing-function delay;

语法:在一定时间内,css值由起始值向预定值过渡所产生的效果
- 只有两种状态:起始状态–>结束状态
- transition过渡动画执行需要触发条件
transition为复合属性
1. transition-property 过渡属性,默认值是all
2. transition-duration 过渡时间,必须设置
3. transition-timing-function 运动类型:
  - ease(默认值,减速)|liner(匀速)|ease-in(加速)|ease-out(减速)|ease-in-out(先加速后减速)|cubic-bezier(贝塞尔曲线生成)
  - 解读贝塞尔曲线_简书
4. transition-delay 延迟时间(规定动画运行的先后的顺序)
5. 动画运行结束时会产生’transitionend事件:
  1
  oDiv.addEventListener('transitionend',function(){})

transform

rotate(),scale(),skew()默认的基准点可以转变,translate()默认的基准点不是不可更改的
Transform-origin top|left|bottom|right|x|x,y|center旋转的基点
组合使用时,基点会改变,不同顺序会导致结束效果不同,通常情况下是放在最后使用

rotate()旋转度数
- deg 度数
scale() 缩放函数默认为1
- scaleY();
- scaleX();
skew(x|x,y) 倾斜函数:
- skewY(); 正->往下,负->往上
- skewX();正->往左，负->往右
translate(x|x,y) 位移函数 ;默认值为0,0
- translateX();
- translateY();
  帧动画

复合写法:animation:move 1s ease 0s reverse 2 forwards
animate动画库
特征:
1. 可以有多种状态,可以制作复杂的动画效果
2. 不需要触发条件,浏览器加载可直接运行

实现帧动画需要如下两个步骤

通过@keyframes 动画名; 声明帧动画->决定了帧动画的运行轨迹
-

@keyframes move{
        0%{/*第一帧*/
 }
        20%{}
        50%{}
        100%{/*最后一帧*/
 }
 }

animation调用帧动画

属性
1. 帧动画调用
  - animation-name:move
  - animation-duration 动画执行的时间
  - animation-timing-function 动画运行的速度
  - animation-delay 动画延迟的时间
  - animation-direction: normal|reverse(反方向)|alternate(交替)|alternate-reverse(反方向交替)
  - animation-iteration-count:1|infinite(无数次) 动画执行的次数
  - animation-play-state:paused|running(默认值) 动画运行的状态
  - animation-fill-mode:null|backwards(第一帧开始)|forwards(停留在最后一整)|both(从第一帧开始,结束后停留在最后一帧) 动画结束后的状态
    关键帧动画steps(多少帧动画,start/end)
如果第二个参数不写,默认的是end
1
-webkit-animation: box 3s steps(3,start);

精灵动画(sprites) –>雪碧图只能是background-position

u

3D动画

如果想要在3d空间里展示,一开始必须要设置两个属性
1. transform-style:flat|preserve-3d(3D空间里展示);作用在变形元素的父标签上
2. perspective:2000px;景深(近大远小,视距,隔着多远去看物体),作用在祖先标签上(包含父标签)
3. perspective-origin 透视点位置
4. rotate3d(rx,ry,rz,a) rx,ry,rz向量坐标 a是角度