CSS3动画知识点总结

浏览器前缀：

• Gecko内核 前缀-moz- 火狐浏览器
• Webkit内核 前缀为-webkit- 谷歌内核，chrome浏览器最早开发，最广泛
• Trident内核 前缀-ms- IE内核
• Presto内核 前缀-o- 目前只有opera采用

---

圆角(顺时针设置)：

• border-radius：value；
阴影：
• 文字阴影：text-shadow：水平-length 垂直-length 模糊度-length 外沿值-length 颜色-color
• 盒子阴影：box-shadow
渐变：
线性渐变：background（-image）：linear-gradient（to 方向，颜色）；
径向渐变
• backgroudn：radial-gradient

---

转换

• 书写格式：transform：函数名（x轴值，y轴值）
• translate（）移动
• scale（）缩放
• rotate（）旋转，只支持一个参数（数字deg）角度
• skew（）翻转

---

过渡

四要素
• 过渡属性
• transition-property:none | all | property
• 过渡所需时间
• transition-duration:s | ms
• 过渡函数
• transition-timing-fuction:
• ease:默认值，先慢后快
• linear:匀速
• ease-in:加速
• ease-out:减速
• ease-in-out:先加速后减速
• 过渡延迟时间transition-delay

---

动画

@keyframes用于声明动画，指定关键帧
@keyframes的语法格式
@keyframes name{
from|0%{
css样式
}
percent{
css样式
}
to|100%{
css样式
}
}

动画属性

• animation-name：调用动画，需要与keyframes的名字一致
• animation-duration：s|ms 动画完成一个周期所需要的时间
• animation-timing-function：动画的速度变化类型
• animation-delay：s|ms
• 等等