css过渡动画

css过渡动画

一、css3过渡

语法：transition : all 3s linear 5s;
transition : 过度属性（复合）
all : 所有可以参与过度的属性
3s : 执行过度动画所需要的时间
linear : 过度动画的类型
5s : 执行过度动画的延迟时间

• transition-property：跟可以执行过度的属性（display、visibility、渐变不参与过度）
• transition-duration：后跟执行过度动画的时间
• transition-timing-function：过度动画的类型
  • 它的取值有：
    1. ease：平滑过度
    2. ease-in：由慢到快
    3. ease-out：由快到慢
    4. ease-in-out：由慢到快再到慢
    5. linear：线性过渡，匀速直线运动
    6. steps（）：按照步骤执行（跳帧）
    7. cubic-bezier（，，，）贝塞尔曲线
• transition-delay：过渡动画的延迟执行

二、css3平面动态交互

1.平移

transform : translateX(number)/Y()/(X,Y)

• translateX()：水平位移
• translateY() : 垂直位移
• translate(x,y) : 水平和垂直同时进行位移，如果只取一个值则只能实现一个方向

2.旋转函数

transform : rotateX(deg)/Y()/(X,Y)

• rotateX() : 元素绕着X轴进行旋转；类似于：水井打水器
• rotateY() : 元素绕着Y轴进行旋转；类似于：吊炉烤鸭
• rotate() : 元素绕着中心点进行旋转；中心点默认位于元素正中心位置

transform-origin : x , y ; x是水平位置，y是垂直位置；旋转中心可以位于元素内部，也可以位于元素外（旋转中心需要放在初始效果中）

3.缩放函数

transform : scaleX()/scaleY()/scale()

• scaleX()：沿着X轴进行缩放，＋为放大，－为缩小
• scaleY()：沿着Y轴进行缩放，＋为放大，－为缩小
• scale()：沿着中心点进行缩放，+为放大，-为缩小（只取一个值时代表两个方向，取两个值时第一个代表X轴方向，第二个代表Y轴方向）

4.倾斜函数

transform : skew()/skewX()/skewY()

• skew : 沿着x轴和y轴两个轴进行倾斜，参数1是x轴，2是Y

• skewX()：沿着X轴倾斜，与Y轴形成夹角

• skewY()：沿着Y 轴进行倾斜，与X轴形成夹角

三、css3动画

animation : name 5s linear 3s infinite alternate；

• animation : 是触发动画的属性 , 一般哪里需要调用动画

• name : 调用动画 , 声明动画的名字 , 想要使用animation属性必须得声明动画;

• 5s : 动画执行的时间

• linear : 动画执行的类型

• 3s : 动画延迟执行

• infinite : 动画制定的次数, 可以为数值, 数值代表执行多少次, infinite代表的无穷尽的一直执行;

• animation-name 检索或设置对象所应用的动画名称

• animation-duration 检索或设置对象动画的持续时间

• animation-timing-function 检索或设置对象动画的过渡类型

  • linear 动画从头到尾的速度是相同的。 测试
  • ease 默认。动画以低速开始，然后加快，在结束前变慢。 测试
  • ease-in 动画以低速开始。 测试
  • ease-out 动画以低速结束。 测试
  • ease-in-out 动画以低速开始和结束。 测试
  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

• animation-delay 检索或设置对象动画延迟的时间

• animation-iteration-count 检索或设置对象动画的循环次数

• animation-direction 检索或设置对象动画在循环中是否反向运动

  • normal：正常方向
  • reverse：反方向运行
  • alternate：动画先正常运行再反方向运行，并持续交替运行
  • alternate-reverse：动画先反运行再正方向运行，并持续交替运行

• animation-play-state 检索或设置对象动画的状态

  • running:运动
  • paused: 暂停