一、过渡
CSS 过渡是指在设置的时间内来平滑的改变属于值。
transition用于设置过渡效果
属性值：
- transition 可以同时设置过渡相关的所有属性
- transition-property 执行过渡的效果
- transition-duration 指定过渡效果的时间
- transition-delay 过渡效果的延迟，等待一段时间后在执行过程
- transition-timing-function 指定过渡时间的效果
transition-property 可选值：width,height,all 多个属性使用逗号隔开，所有属性需要过渡则用all,过度时必须要有一个有效的数值向另一个有效的数值过渡。
transition-duration：时间单位为s和ms，如2s或2000ms
transition-delay：属性值也是以时间单位，如2s或2000ms
transition-timing-function：可选值
- ease 默认值，慢速开始，先加速再减速
- linear 匀速运动
- ease-in 加速运动
- ease-out 减速运动
- ease-in-out 先加速后减速
- cubic-bezier() 指定时序函数，取值范围0-1
- steps() 分布执行过渡效果，第二个值start表示开始之前，end表示时间过后
二、动画
- 动画使元素逐渐从一种样式变为另一种样式
- 您可以随意更改任意数量的 CSS 属性
- 关键帧包含元素在特定时间所拥有的样式
- 如需使用 CSS 动画，您必须首先为动画指定一些关键帧
如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到某个元素
- 语法：@keyframes 名称{ from{}表示开始 to{}表示结束 }
animation属性
- animation-name 设置名称
- animation-duration 执行时间
- animation-delay 延迟时间
- animation-iteration-count 动画执行的次数(infinite 无限次)
- animation-direction指定动画运行时的方向(normal 默认值，正常播放 alternate 重复播放)
- animation-timing-function 属性规定动画的速度曲线。
- animation-play-state 执行状态(paused 动画暂停，running 动画执行)
- animation-fill-mode 规定元素在不播放动画时的样式(在开始前、结束后，或两者同时)
三、变形
通过CSS来改变元素的形状或位置，不会影响到页面的布局
transform:用来设置元素的变形效果
平移：
- translateX()沿着x轴方向平移
- translateY()沿着y轴方向平移
- translateZ()沿着z轴方向平移
旋转：
- rotateX() 根据x轴旋转
- rotateY()根据y轴旋转
- rotateZ()根据z轴旋转
缩放：
- scaleX() 水平方向缩放
- scaleY() 垂直方向缩放
- scaleZ() 双方向缩放
四、时钟案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
