第九章 网页动画

第九章 网页动画

1.变形函数transform

• translate(tx,ty)：平移函数
• scale(sx,sy)：2D缩放
• skew(ax,ay)：2D倾斜，元素不旋转，改变元素形状
• rotate(a)：2D旋转（deg）不会改变元素形状

2.过渡transition

transition:[transition-property transition-duration transition-timing-function transition-delay ]

• transition-property：过度或动态模拟

  ident：指定的css属性

  all：所有元素支持transition-property属性的样式

• transition-duration：过渡所需时间，旧属性到新属性所花费时间（s）

• transition-timing-function：过渡动画函数，动画的快慢

  ease：默认值，快到慢

  linear：匀速运动，恒速

  ease-in：渐显效果，越来越快

  ease-out：渐隐效果，越来越慢

  ease-in-out：渐显渐隐效果，先加速再减速

• transition-delay：延迟时间

  正值：设置时间

  负值：从该时间点显示，之前动作被截断

  0：默认值，立即执行

**过渡触发机制：**伪类（:hover、:active、:focus、:checked）、媒体查询（@media属性判断）、JavaScript（脚本）

3.动画animation

设置关键帧：

@keyframes 函数名字{
	from{	}
	percentage{	}
	to{	}
}
@keyframes 函数名字{
    0%{}
    33%{}
    66%{}
    100%{}
}

调用关键帧：

animation:函数名字 动画时间 动画方式 延迟时间 动画的播放次数  动画的播放方向

animation-iteration-count播放次数：默认1次，infinite：无限播放

animation-direction播放方向：normal：循环向前播放，alternate：偶数次向前播放

animation-play-state播放状态：running：暂停的重新播放，paused：播放的暂停